在元素上写事件和addEventListener()的区别[通俗易懂]

在元素上写事件和addEventListener()的区别[通俗易懂]在元素上写事件和addEventListent()的区别onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的。而addEventListener能添加多个事件绑定,按顺序执行。addEventListener方式,不支持低版本的IE。(attachEvent支持IE)。普通方式绑定事件后,不可以取消。addEventListener绑定后则可以用removeEvenListe…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

在元素上写事件和addEventListener()的区别

  1. onclick添加事件不能绑定多个事件,后面绑定的会覆盖前面的。而addEventListener能添加多个事件绑定,按顺序执行。
  2. onclick只能冒泡,addEventListener()可以得到捕获or冒泡。
  3. addEventListener方式,不支持低版本的IE。(attachEvent 支持IE)。
  4. 普通方式绑定事件后,不可以取消。addEventListener绑定后则可以用 removeEvenListener 取消。
  5. addEventListener 是W3C DOM 规范中提供的注册事件监听器的方法。
addEventListener用法:

语法:
element.addEventListener( type , listener , useCapture )
– – 添加事件监听
– – type: 事件类型字符串,不使用“on”前缀
– – callback:事件处理程序(回调函数)
– – useCapture:可选参数,是否使用事件捕获的方式处理事件。不传递时,默认为false,表示不使用事件捕获(使用事件冒泡),如果需要显示事件捕获,则显示传递true。

如果你对事件捕获与冒泡不太了解请看:JS事件流介绍以及阻止事件冒泡

示例:

document.getElementById("item").addEventListener( 'click' , (event) => { 
   
	console.log(event)
}, false )

addEventListener 第三个参数:
为 true 时,浏览器采用Capture(捕捉)
为 false 时,浏览器采用bubbing(冒泡)– 建议使用!

addEventListener兼容写法:

IE9之前浏览器使用element.attachEvent(type, callback)

attachEvent(type, callback)

type:事件类型字符串,使用“on”前缀
callback:事件处理程序(回调函数)
注意:因为IE9之前只有事件捕获,没有事件冒泡,所有attachEvent没有第三个参数。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157852.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 微信开放平台认证后怎么实现扫码登录功能[通俗易懂]

    微信开放平台认证后怎么实现扫码登录功能[通俗易懂]主题:微信开放平台认证后怎么实现扫码登录功能在面对这些问题时,同时也是很多刚入手做开发朋友疑惑的希望能帮你们快速完成微信登录配置。以我多天的日夜辛苦测试和实践,同时也是我自己在开发过程中遇到的问题被我不断尝试,一遍又一遍的填写参数,建站平台换几十个,最总发现了这些问题所在给大家总结了以下几点问题和解决方案:1.认证微信开放平台和微信公众平台认证有区别吗?如果只用来作微信登录和使用微信支付,那么告诉你:没有区别,同样是三百块钱认证费用(你只注意一下你的开发资料能一次性通过就行)2.同样能实

  • Repeater控件的ItemDataBound事件

    Repeater控件的ItemDataBound事件Repeater控件的ItemDataBound事件:在项被绑定数据后触发。下面的例子来自msdn,不过我把前台和后台分开了。前台是:ViewCode<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebForm1.aspx.cs"Inherits="WebApplication2.WebForm1…

    2022年10月13日
  • pycharm python安装教程_python环境安装教程

    pycharm python安装教程_python环境安装教程首先我们来安装python1、首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downloads/),进入之后如下图,选择图中红色圈中区域进行下载。2、下载完成后如下图所示3、双击exe文件进行安装,如下图,并按照圈中区域进行设置,切记要勾选打钩的框,然后再点击Customizeinstallation进入到下一步:4、对于上图中,可以通过Browse…

  • 计算机等级考试–二级Java的知识点大全

    计算机等级考试–二级Java的知识点大全第一章数据结构与算法【考点1】算法的基本概念1、算法:是指一组有穷的指令集,是解题方案的准确而完整的描述。算法不等于程序,也不等于计算方法。2、算法的基本特征:1)确定性,算法中每一步骤都必须有明确定义,不允许有多义性;2)有穷性,算法必须能在有限的时间内做完,即能在执行有限个步骤后终止;3)可行性,算法原则上能够精确地执行;4)拥有足够的情报。3、算法的组成…

  • ThinkPHP 小于5.0.24 远程代码执行高危漏洞 修复方案

    ThinkPHP 小于5.0.24 远程代码执行高危漏洞 修复方案

  • SpringMVC工作原理(含案例图解)

    SpringMVC工作原理(含案例图解)SpimgMVC工作原理第1步:浏览器发送指定的请求都会交给DispatcherServlet,他会委托其他模块进行真正的业务和数据处理第2步:DispatcherServlet会查找到HandleMapping,根据浏览器的请求找到对应的Controller,并将请求交给目标Controller第3步:目标Controller处理完业务后,返回一个ModelAndView给Dispa…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号