在元素上写事件和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)


相关推荐

  • 常用元器件使用方法3:电平转换芯片74LVC1T45的使用方法[通俗易懂]

    常用元器件使用方法3:电平转换芯片74LVC1T45的使用方法[通俗易懂]介绍:74LVC1T45是一个单位双向可控电平转换芯片。 芯片特性:1、宽供给电压范围:1.65V到5.5V;2、3.3V时,可输出24mA电流;3、最大16uA电能损耗;4、高噪音抑制; 型号: 引脚:VCC(A) 1 A端和DIR电源 GND 2 地 A 3 数据输入/输出 B 4 …

  • mysql数据库设计工具--mysql workbench

    mysql数据库设计工具--mysql workbench关键字:Database     在windows下,有一些不错的数据库设计工具,像Powerdesign,但在linux,找来找去,还没有发现一款好的设计工具,即使找到一个dbdesign4,但死活编译不过去,最后,还是在mysql的官网上找到了mysqlworkbench.下面是截图我是通过编译源码来安装的,

  • pycharm2021激活码(破解版激活)

    pycharm2021激活码(破解版激活),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 什么是人工智能,大数据,云计算,物联网系统_5g物联网人工智能大数据

    什么是人工智能,大数据,云计算,物联网系统_5g物联网人工智能大数据人工智能,英文缩写为AI。是利用计算机科学技术研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 大数据,又称巨量资料,指的是所涉及的数据资料量规模巨大到无法通过人脑甚至主流软件工具,在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。 互联网科技发展蓬勃兴起,人工智能时代来临,抓住下一个风口。为帮助那些往想互联网方向转…

  • qtreewidget基本使用_qtreewidget列宽自适应

    qtreewidget基本使用_qtreewidget列宽自适应1、voidQTreeWidget::setHeaderLabels(constQStringList&labels)设置表头,QStringList有几项,表头就有多少列2、voidQHeaderView::setSortIndicatorShown(boolshow)Thispropertyholdswhetherthesortindicatoris

  • C语言读取txt文件实例

    C语言读取txt文件实例本文主要总结用C语言来读txt文本的内容,具体的步骤如下所述。1.1建一个.c源文件,赋值如下代码。#include<stdio.h>#include<stdlib.h>#include<string.h>#defineMAX_LINE1024intmain(){charbuf[MAX_LINE];/*缓冲区*/FILE*fp;…

发表回复

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

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