在元素上写事件和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没有第三个参数。

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm 查看函数帮助_WINCC记录字符串变量

    pycharm 查看函数帮助_WINCC记录字符串变量【为了方便自己以后查阅,记录下使用PyCharm时的一些小技巧】正在学习Python,在调试Python程序时,遇到了一个非常大的问题:如何能够方便地查看变量的取值呢?由于使用matlab多年,深深地习惯了Matlab方便地参考变量取值的功能,所以,对于正在学习的python没办法实时查看变量取值感到很是郁闷没想到,原来PyCharm具有这个功能,只不过之前没有发现而已对于将要调试

    2022年8月27日
    6
  • 移动互联网:社交的发展,人脉的扩展

    移动互联网:社交的发展,人脉的扩展

    2021年12月1日
    219
  • 什么是互联网,以太网,广域网,局域网的代码_局域网和广域网和城域网的区别

    什么是互联网,以太网,广域网,局域网的代码_局域网和广域网和城域网的区别计算器网络

    2022年10月9日
    2
  • 微信小程序不在以下 request 合法域名列表中「建议收藏」

    微信小程序不在以下 request 合法域名列表中「建议收藏」首先检查开发工具 设置 详情===》本地设置;取消以下勾选框查看异常问题;不在以下 request 合法域名列表中,请参考文查看是否配置域名信息,如果没有配置则去小程序后台设置即可多个已 “;” 分割即可。配置完毕后,在开发者工具刷新查看,然后 记得 【重启开发者工具】就解决啦~…

    2022年8月19日
    9
  • webpack基本配置详解_vue基础知识

    webpack基本配置详解_vue基础知识devServer可以用来提高开发效率,它提供一下配置可以改变devServer的默认行为。除了在配置问题通过devServer传入参数外,还可以通过命令行参数传入。注意:只用在通过devServer去启动webpack时,配置文件里devServer才会生效,因为这些参数所对应的功能都是devServer提供的,webpack本身并不认识devServer配置项。1.hotdevServer.hot配置是否启用模块热替换功能。devServer默认行为是在发现…

    2025年6月28日
    2
  • 微型计算机的档次主要取决于,微型计算机的性能主要取决于

    微型计算机的档次主要取决于,微型计算机的性能主要取决于匿名用户1级2013-07-10回答“微型计算机的性能主要取决于什么?”主要看三大件,CPU,主板,内存。1、CPU:其功能主要是解释计算机指令以及处理计算机软件中的数据,他的速度快慢可以代表计算机处理数据的能力的高低。2、内存:它是与CPU进行沟通的桥梁,计算机中所有程序的运行都是在内存中进行的,因此内存的性能对计算机的影响非常大。3、主板:主板在整个微机系统中扮演着举足轻重的角色。主板的类型…

    2022年6月28日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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