在元素上写事件和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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • ios-ScrollView添加到view上,view的touchesBegan无法执行

    ios-ScrollView添加到view上,view的touchesBegan无法执行这几天做的时候碰到了这么个问题,就是当我们把ScrollView添加到控制器的view上,或者添加到UICollectionViewCell上面,scrollView的父视图的touchesBegan都无法响应。而当我们把scrollView的userInteractionEnabled改成false的时候,父视图的touchesBegan就可以执行。这里记录下。有可能是因为ScrollVie

    2022年7月25日
  • 数据库连接池的好处有哪些_计算机系统坏了怎么修复

    数据库连接池的好处有哪些_计算机系统坏了怎么修复对于一个简单的数据库应用,由于对于数据库的访问不是很频繁。这时可以简单地在需要访问数据库时,就新创建一个连接,用完后就关闭它,这样做也不会带来什么明显的性能上的开销。但是对于一个复杂的数据库应用,情况就完全不同了。频繁的建立、关闭连接,会极大的减低系统的性能,因为对于连接的使用成了系统性能的瓶颈。    连接复用。通过建立一个数据库连接池以及一套连接使用管理策略,使得一个数据库连接可以得

    2022年9月15日
  • 7个免费的服务器监控工具

    7个免费的服务器监控工具监控服务器是否正常与健康是非常重要的,确保用户始终可以访问你的服务。提高监控效率就需要使用高效的工具了,下面介绍10个免费的服务器监测工具。一、PerformanceCo-PilotPerformanceCo-Pilot(PCP)是一个开源框架和工具包,用于监控,分析和响应实时和历史系统性能的细节。PCP具有完全分布式,基于插件的架构,使其特别适用于复杂环境和系统的集中分析。可以使用C,C++,Perl和Python界面添加自定义性能指标。二、Antur…

    2022年7月13日
  • socks4代理网络渗透测试实验

    socks4代理网络渗透测试实验实验目的:利用2级代理功能对3层网络进行渗透测试靶机ubantu192.168.31.207192.168.1.129ubantu192.168.1.100192.168.2.10windows2009192.168.2.100192.168.首先访问192.1…

    2022年6月14日
  • POJ3061 Subsequence(二进制前缀和法律+仿真足)

    POJ3061 Subsequence(二进制前缀和法律+仿真足)

    2022年1月4日
  • python调用数组里某一个元素_python中数组用法

    python调用数组里某一个元素_python中数组用法##Python数组注意:Python不具有对数组的内置支持,但是可以使用[Python列表](https://www.w3schools.com/python/python_lists.asp)代替。注意:此页面显示了如何将LISTS用作数组,但是,要在Python中使用数组,您必须导入一个库,例如[NumPylibrary](https://www.w3schools.com/python…

    2022年8月13日

发表回复

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

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