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


相关推荐

  • lcd1602使用手册_lcd液晶屏工作原理

    lcd1602使用手册_lcd液晶屏工作原理1602液晶也叫1602字符型液晶,它是一种专门用来显示字母、数字、符号等的点阵型液晶模块。1602LCD是指显示的内容为16X2,即可以显示两行,每行16个字符液晶模块(显示字符和数字)。lcd1602引脚状态字的说明:RAM映射地址:控制接口的时序:1.读的时序2.写的时序3.时序的相关参数读状态:RS=L,R/W=H,EN=H读数据:RS=H,…

    2022年9月23日
    0
  • 修改host访问github_github下载单个文件

    修改host访问github_github下载单个文件修改host文件登录github

    2022年10月11日
    0
  • intercept用法_俄大使称加拿大新制裁仅具象征性

    intercept用法_俄大使称加拿大新制裁仅具象征性“斜率”参数(w,也叫作权重或系数)被保存在coef_属性中,而偏移或截距(b)被保存在intercept_属性中L1正则化时,可以通过coef_中不等于0的个数来确定使用了几个特征np.sum(lasso.coef_!=0)…

    2025年5月31日
    0
  • OpenCV 人脸识别LBPH算法分析

    OpenCV 人脸识别LBPH算法分析一、背景及理论基础人脸识别是指将一个需要识别的人脸和人脸库中的某个人脸对应起来(类似于指纹识别),目的是完成识别功能,该术语需要和人脸检测进行区分,人脸检测是在一张图片中把人脸定位出来,完成的是搜寻的功能。从OpenCV2.4开始,加入了新的类FaceRecognizer,该类用于人脸识别,使用它可以方便地进行相关识别实验。原始的LBP算子定义为在3*3的窗口内,以窗口中心像素为阈值,将相邻的8…

    2022年6月3日
    33
  • 登录双微信怎么登_windows设置多用户远程登录

    登录双微信怎么登_windows设置多用户远程登录QQ都能登录两个,为啥微信不行。其实微信也可以,让笔者来教教大家第一步:新建一个文本第二步:输入以下内容startD:\Tencent\WeChat\WeChat.exestartD:\

    2022年8月1日
    3
  • C++17实现的读写锁「建议收藏」

    C++17实现的读写锁「建议收藏」1.shared_mutex和shared_lock很有意思的两个关于共享线程锁的特性#include#include<shared_mutex>#include#include#includeusingnamespacestd;classCounter{public:std::size_tGet()const{std::shared_lockstd:…

    2022年8月12日
    4

发表回复

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

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