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


相关推荐

  • EL表达式详解

    EL表达式详解一、EL表达式简介EL全名为ExpressionLanguage。EL主要作用:1、获取数据EL表达式主要用于替换JSP页面中的脚本表达式,以从各种类型的web域中检索java对象、获取数

    2022年7月2日
    21
  • leetcode-41缺失的第一个正数

    leetcode-41缺失的第一个正数原题链接给你一个未排序的整数数组 nums ,请你找出其中没有出现的最小的正整数。进阶:你可以实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案吗?示例 1:输入:nums = [1,2,0]输出:3示例 2:输入:nums = [3,4,-1,1]输出:2示例 3:输入:nums = [7,8,9,11,12]输出:1 提示:0 <= nums.length <= 300-231 <= nums[i] <= 231 – 1题解

    2022年8月8日
    14
  • Java快速入门的六个技巧[通俗易懂]

    Java快速入门的六个技巧[通俗易懂]学习目标:Java入门该学习什么?Java如何快速入门?Java快速入门的六个技巧,帮你顺利入门Java!学习内容:需要掌握:1、掌握静态方法和属性2、重现接口3、学好集合框架4、例外捕捉5、多线程需要理解机理6、了解网络编程学习目录:文章目录学习目标:学习内容:学习目录:一、掌握静态方法和属性二、重现接口三、学好集合框架四、例外捕捉五、多线程需要理解机理六、了解网络编程一、掌握静态方法和属性静态方法和属性用于描述某一类对象群体的特征,而不是对单个对象的特征。Jav

    2022年5月29日
    36
  • spring cloud和dubbo的区别

    spring cloud和dubbo的区别最近一段时间不论互联网还是传统行业,凡是涉及信息技术范畴的圈子几乎都在讨论 微服务架构 。近期也看到各大技术社区开始组织一些沙龙和论坛来分享spring Cloud的相关实施经验,这对于最近正在整理SpringCloud相关套件内容与实例应用的我而言,还是有不少激励的。目前,SpringCloud在国内的知名度并不高,在前阵子的求职过程中,与一些互联网公司的架构师、技术VP或者CT

    2022年4月29日
    43
  • Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

    Vue2+VueRouter2+webpack 构建项目实战(一)准备工作Vue2+VueRouter2+webpack构建项目实战(一)准备工作之前写的博客没有采用打包工具,而是直接引用js的方式来做的。这种方式很扯淡,也因此,我写了三篇博客之后就没有再写了。通过几个月的学习和实战,基本厘清了Vue1+VueRouter1+browserify的一些技术点。并且通过几个实际项目的工作,已经验证了自己利用该技术完成项目是没有问题的了。但是,现在主流的打包方式已经

    2022年7月27日
    9
  • Java开发中的Memcache原理及实现

    Java开发中的Memcache原理及实现

    2021年9月4日
    50

发表回复

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

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