JavaScript onclick与addEventListener使用的区别介绍

目录
  • 摘要
  • 区别
    • 同时绑定多个事件
    • 决定事件触发顺序
    • removeEventListener的使用方法

摘要

当我们想要给某个DOM元素绑定事件的时候，最常用的方法是通过on + 事件名字的方式。而在DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：

addEventListener()和removeEventListener().

并且它们都接受三个参数：要处理的事件名，作为事件处理的一个函数，一个布尔值。

最后的布尔值如果为false，表示在冒泡阶段调用事件处理函数，如果是true，表示在捕获阶段调用事件处理程序。

区别

同时绑定多个事件

我们来想一个问题，我们使用onclick方法可不可以给一个按钮绑定多个事件呢？

我们来尝试一下：

    <button id="btn">点击</button>
    <script>
        btn.onclick = function(){
            console.log('第一次点击');
        }
        btn.onclick = function(){
            console.log('第二次点击');
        }
    </script>

然后我们来看一下结果是否两次都打印出来了：

可以看到只有第二次生效了，说明通过这种方法第二次绑定事件会将第一次覆盖！

现在我们来用第二种方法：

    <button id="btn">点击</button>
    <script>
        btn.addEventListener('click',()=>{console.log('第一次点击');},false);
        btn.addEventListener('click',()=>{console.log('第二次点击'),false});
    </script>

我们来看一下运行结果：

OK，可以看到通过这种方式我们是可以进行多次绑定事件的。

决定事件触发顺序

我们先来看一下代码：

    <div id="div1">
        <button id="btn">点击</button>
    </div>
    <script>
        div1.onclick = function(){
            console.log('div1的事件');
        }
        btn.onclick = function(){
            console.log('btn的事件');
        }
    </script>

想一下如果我们点击了按钮，打印的顺序应该是什么样子的呢？

可以看到是从内而外，是以事件冒泡的方式来执行的。

而如果使用另一种方法：

    <div id="div1">
        <button id="btn">点击</button>
    </div>
    <script>
        btn.onclick = function(){
            console.log('btn的事件');
        }
        div1.addEventListener('click',()=>{console.log('div1的事件');},true);
    </script>

我现在把div1的事件通过addEventListener的方式来绑定，并且给第三个参数设置为true。

那么结果就是这样的：

所以我们通过第二种方法我们可以决定DOM事件的触发是以事件捕获的事件流还是事件冒泡的事件流方式。

removeEventListener的使用方法

这个方法就是删除DOM指定的事件，如果我们删除onclick的话，直接将onclick的值设置为null就可以了。

那这个方法如何删除呢？我们来看一下代码：

        div1.addEventListener('click',()=>{console.log('div1的事件');},true);
        div1.removeEventListener('click',()=>{console.log('div1的事件');},true);

这样做的话我们是否能将这个事件删除呢？答案是否定的，我们的两个事件处理程序虽然代码是一样的，但是它们确确实实不是一个事件处理程序，如果我们想要删除掉某个事件，我们必须这样做：

        var fn = function(){
            console.log('div1的事件');
        }
        div1.addEventListener('click',fn,true);
        div1.removeEventListener('click',fn,true);

只有这样才能确定两个方法所用的为一段事件处理程序，也是有效的删除方法。

到此这篇关于JavaScript onclick与addEventListener使用的区别介绍的文章就介绍到这了,更多相关JS onclick与addEventListener区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS addEventListener()和attachEvent()方法实现注册事件

    JS addEventListener()和attachEvent()方法实现注册事件

    在 JavaScript 的 DOM 事件模型中,通过调用对象的 addEventListener() 方法注册事件.用法如下: element.addEventListener(String type, Function listener, boolean useCaptrue); 参数说明如下: type:注册事件的类型名.事件类型与事件属性不同,事件类型名没有 on 前缀.例如,对于事件属性 onclick 来说,所对应的事件类型为 click. listener:监听函数,即事件处理函数

  • JavaScript中click和onclick本质区别与用法分析

    本文实例讲述了JavaScript中click和onclick本质区别与用法.分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的一个按钮.button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 语法:buttonObject.click() <html> <head> &l

  • JavaScript使用addEventListener添加事件监听用法实例

    本文实例讲述了JavaScript使用addEventListener添加事件监听用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html lang="en"> <head> <title>This text is the title of the document</title> <script> function showalert(){ alert('you clicked

  • JavaScript onclick点击事件-点击切换图片且自动播放

    JavaScript onclick点击事件-点击切换图片且自动播放

    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器.先看效果图.  下面是完整的代码: <body>     <img id="img" src="./img/0.webp" alt=""><br>     //给四个button加上点击事件     <butto

  • Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 EventListene

  • JavaScript onclick事件使用方法详解

    JavaScript onclick事件使用方法详解

    onclick是一个事件,当事件被触发时就会执行处理,onclick是一个处理鼠标点击的事件.本篇文章就给大家分享关于JavaScript中onclick事件的用法. 我们首先来看一下onclick事件的语法 以下是如何使用onclick事件编写. 使用document.getElementById()在文档中指定id元素,并使用function(){}处理单击该元素时发生的事件. document.getElementById("button").onclick = function

  • js中addEventListener()与removeEventListener()用法案例分析

    本文实例讲述了js中addEventListener()与removeEventListener()用法.分享给大家供大家参考,具体如下: 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加事件和删除追加. 接受参数:要处理的事件名.作为事件处理程序的函数和一个布尔值. (3个) 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序.默认为false; 事件传递有两

  • JavaScript onclick 和 click 的区别详解

    JavaScript onclick 和 click 的区别详解

    目录 为什么需要 addEventListener? 用 addEventListener 的代码 第三个参数的使用 总结 也就是 addEventListener 和 on 的区别 为什么需要 addEventListener? 先来看一个片段: <div id ="box">测试</div> 用 on 的代码: windwo.onload = function(){ var box = document.getElementById("box&qu

  • JavaScript onclick与addEventListener使用的区别介绍

    JavaScript onclick与addEventListener使用的区别介绍

    目录 摘要 区别 同时绑定多个事件 决定事件触发顺序 removeEventListener的使用方法 摘要 当我们想要给某个DOM元素绑定事件的时候,最常用的方法是通过on + 事件名字的方式.而在DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作: addEventListener()和removeEventListener(). 并且它们都接受三个参数:要处理的事件名,作为事件处理的一个函数,一个布尔值. 最后的布尔值如果为false,表示在冒泡阶段调用事件处理函数,如果是

  • JavaScript与Java正则表达式写法的区别介绍

    Js验证写法:(转义符\) var str = "待验证文本"; var regular = new RegExp(/这里是正则表达式/); if (regular.test(str)) { console.log("符合条件"); } else { console.log("不符合条件"); } //或者 var str = "待验证文本"; if (/这里是正则表达式/.test(str)) { console.log(&

  • JavaScript宏任务和微任务区别介绍

    JavaScript宏任务和微任务区别介绍

    目录 分类 宏任务 微任务 为什么 案例 分类 js中的任务,大致分为2类,一类是同步任务,另一类是异步任务.而异步任务,又分为宏任务和微任务,这两个任务是两个队列,所以是先进先出的. 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务. 异步任务指的是,不进入主线程.而进入"任务队列"的任务,只有等主线程任务执行完毕,"任务队列"开始通知主线程,请求执行任务,该任务才会进入主线程执行 宏任务 主代码块.setTimeout.set

  • JavaScript中的null和undefined区别介绍

    JavaScript中存在2个代表信息不存在的特殊值:null和undefined.个人认为可以从以下角度来理解这两个特殊值之间的区别: 1.null代表有存储信息的容器(比如之前被赋过值的变量),但该容器中的内容为空. 2.undefined代表不存在用于存储信息的容器. JavaScript中的null与其它多数编程语言中的null没有什么区别,基本用于表示信息值为空:而在JavaScript中下述情况下表达式返回结果为undefined: 1.从未被赋过值的变量. 2.访问某个对象不存在的

  • javascript中的onkeyup和onkeydown区别介绍

    javascript中的onkeyup和onkeydown区别介绍

    昨天在写上次那个动态生成年月日下拉框和文本框限制输入的时候遇到了一个问题,文本框里输入的时候要开始计算文本框里面输入了多少字,自然想到了onkeydown事件,然后计算value.length的方法,看代码吧 复制代码 代码如下: moto.onkeydown=function(){ var curlen=+this.value.length; shuru.innerHTML=curlen; shuru2.innerHTML=+(200-curlen); if(curlen>=200){ thi

  • javascript函数命名的三种方式及区别介绍

    javascript函数命名的三种方式及区别介绍 第一 复制代码 代码如下: function fn(val1,val2) { alert(val1+val2); } fn(1,2); 第二 复制代码 代码如下: var fn=function() { alert(val1+val2); } fn(1,2); 第三 复制代码 代码如下: var fn=new Function("alert(val1+val2)"); fn(1,2); 上面三种方式逻辑上是等价的,但是还是有点小区别:区

  • 莱鸟介绍javascript onclick事件

    onclick事件的定义和用法: 当点击对象的时候会触发此事件. 浏览器支持: 1.IE浏览器支持此事件. 2.火狐浏览器支持此事件. 3.Opera浏览器支持此事件. 4.谷歌浏览器支持此事件. 5.safria浏览器支持此事件. 实例代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content=&qu

  • JavaScript 与 Java 区别介绍 学java怎么样

    java和javascript长得是如此地相像,那么它们是一回事儿吗?现在让我来揭晓答案吧! JavaScript 是一种嵌入式脚本文件,直接插入网页,有浏览器一边解释一边执行. java 语言不一样,他必须在JAVA虚拟机上运行.而且事先需要进行编译. JAVA的语法规则比JavaScript要严格的多,功能要强大的多. 首先,这两个家伙没有任何的血缘关系,java是是由Sun 公司于1995年5月推出的,而javascript是于1995年由Netscape公司设计实现而成的,由于Netsc

  • JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍

    某天写代码突然县道这个问题,顺势总结一波 JavaScript 函数和变量声明的"提前"(hoist)行为 简单的说 如果我们使用 匿名函数 var a = {} 这种方式, 编译后变量声明a 会"被提前"了,但是他的赋值(也就是a)并不会被提前. 也就是,匿名函数只有在被调用时才被初始化. 如果使用 function a () {}; 这种方式, 编译后函数声明和他的赋值都会被提前. 也就是说函数声明过程在整个程序执行之前的预处理就完成了,所以只要处于同一个作用域

  • JavaScript判断数据类型有几种方法及区别介绍

    有五种数据判断类型方法typeof .instanceof.constructor.Object.prototype.toString.call().jquery.type() 一.typeof方法 typeof是个操作符,可以判断基本数据类型(返回的结果只能是number,string,boolean,null,symbol,function,object) 返回值分以下几种 对于基本类型.除了null值返回object以外,其他均返回正确的结果 对于引用值来说,除了function返回fun

随机推荐