在元素上写事件和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-tableView的touchesBegan事件和didSelectRowAtIndexPath方法

    ios-tableView的touchesBegan事件和didSelectRowAtIndexPath方法今天做了个测试,看看tableView如果实现了touchesBegan方法和实现了didSelectRowAtIndexPath点击的时候会去实现哪一个?答案是touchesBegan。先附上测试的函数-(void)touchesBegan:(NSSet*)toucheswithEvent:(UIEvent*)event{NSLog(@”——“);}

    2022年7月25日
    11
  • js 判断是否字符串_js字符串查找

    js 判断是否字符串_js字符串查找整理js中可以用到的判断一个字符串中是否包含另外一个字符的方法String对象方法1、indexOfindexOf返回指定字符串在该字符中首次出现的位置,如果没有找到,则返回-1indexOf接收两个参数,第一是需要搜索的字符串,第二个参数是检索的位置,默认为0letstr=’abcde’;//例如,从str第三位开始搜索’a’console.log(str.indexOf(‘a’,2));//-1console.log(str.indexOf(‘a’))//02、

    2022年10月6日
    2
  • SpringBoot面试题大汇总附答案,SpringBoot面试题-持续更新中「建议收藏」

    SpringBoot面试题大汇总附答案,SpringBoot面试题-持续更新中「建议收藏」2021最新SpringBoot面试题【附答案解析】SpringBoot面试题及答案2021,SpringBoot2021最新面试题及答案,SpringBoot面试题新答案已经全部更新完了,有些答案是自己总结的,也有些答案是在网上搜集整理的。这些答案难免会存在一些错误,仅供大家参考。如果发现错误还望大家多多包涵,不吝赐教,谢谢~SpringBoot最新面试题大汇总,附答案其实,博主还整理了,更多大厂面试题,直接下载吧下载链接:高清172份,累计7701页大厂面试题PDF1、SpringBoo

    2022年6月7日
    48
  • 什么是WEBserver? 经常使用的WEBserver有哪些?

    什么是WEBserver? 经常使用的WEBserver有哪些?

    2021年9月20日
    70
  • java map 缓存_缓存用于

    java map 缓存_缓存用于缓存什么是缓存?平常的开发项目中,多多少少都会使用到缓存,因为一些数据我们没有必要每次查询的时候都去查询到数据库。缓存的使用场景:在Java应用中,对于访问频率高,更新少的数据,通常的方案是将这类数据加入缓存中,相对从数据库中读取,读缓存效率会有很大提升。在集群环境下,常用的分布式缓存有Redis等。但在某些业务场景上,可能不需要去搭建一套复杂的分布式缓存系统,在单机环境下,通常是会希望使用内部的缓存(LocalCache)。使用map缓存方案:基于ConcurrentHashMap实现数

    2022年9月27日
    2
  • vue富文本编辑器tinymce_idea代码高亮设置

    vue富文本编辑器tinymce_idea代码高亮设置1.查找IntelliJIDEA是否已经安装vue.js 注:之前有写过关于使用cmd命令搭建vue项目的全部过程,详情在此打开IDEA编辑器,快捷键Ctrl+Alt+S打开Settings(设置)——>Plugins——>搜索vue.js(图中已经安装,没有安装的点击InstallJetBrainsplugins…进行安装即可),安装成功后重启IDE…

    2022年8月26日
    17

发表回复

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

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