JS事件绑定（addEventListener）和普通事件（onclick）有什么区别

小咪咪 2023-06-25 06:10 89阅读 0赞

# JS事件绑定（addEventListener）和普通事件（onclick）有什么区别 #

## 普通事件（onclick） ##

普通事件就是直接触发事件，同一时间只能指向唯一对象，所以会被覆盖掉。代码如下：

var btn = document.getElementById("btn");
    btn.onclick = function(){ 
    	alert("你好111");
    }
    btn.onclick = function(){ 
    	alert("你好222");
    }

输出的结果只会有<**你好222**>，一个click处理器在同一时间只能指向唯一的对象。所以就算一个对象绑定了多次，其结果只会出现最后的一次绑定的对象。

## 事件绑定（addEventListener） ##

事件绑定就是对于一个可以绑定的事件对象，进行多次绑定事件都能运行。代码如下：

var btn = document.getElementById("btn");
    btn.addEventListener("click",function(){ 
    	alert("你好111");
    },false);
    btn.addEventListener("click",function(){ 
    	alert("你好222");
    },false);

运行结果会依次弹出**你好111，你好222**的弹出框。

*  友情提示（了解即可）
    
     *  ie9 以前：使用**attachEvent/detachEvent**进行绑定
        
         *  进行事件类型传参需要带上 on 前缀
         *  这种方式只支持事件冒泡，不支持事件捕获
     *  ie9 开始：使用**addEventListener**进行绑定

## 二者区别 ##

addEventListener对任何DOM都是有效的，而onclick仅限于HTML

addEventListener可以控制listener的触发阶段,（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除。

总的来说：事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件

发表评论取消回复

表情：

评论列表（有 0 条评论，89人围观）

还没有评论，来说两句吧...

相关阅读

相关事件绑定(onclick,onfocus,onblur)

事件绑定(onclick,onfocus,onblur) 学习路线：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语

╰半夏微凉°/ 2024年03月31日 13:23/ 0 赞/ 156 阅读

相关点击事件：onclick、addEventListener、attachEvent及解绑事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

- 日理万妓/ 2023年08月17日 16:30/ 0 赞/ 148 阅读

相关 JS事件绑定（addEventListener）和普通事件（onclick）有什么区别

JS事件绑定（addEventListener）和普通事件（onclick）有什么区别普通事件（onclick）普通事件就是直接触发事件，同一时间只能指向唯一对

小咪咪/ 2023年06月25日 06:10/ 0 赞/ 90 阅读

相关 JavaScript面试题-事件绑定和普通事件有什么区别？

事件绑定和普通事件有什么区别？普通事件通过 `on` 来添加事件的方式 <button id="btn">按钮</button> docum

比眉伴天荒/ 2023年06月11日 15:30/ 0 赞/ 64 阅读

相关 JS addEventListener多次绑定同一事件，触发多次

今天项目上遇到一个问题，是因为addEventListener绑定事件时，执行了多次，导致执行了多次事件。在不能让绑定事件执行一次的情况下有没有办法解决这个问题呢？模拟代码

短命女/ 2023年03月06日 05:19/ 0 赞/ 104 阅读

相关 JS添加事件和解绑事件：addEventListener()与removeEventListener()

作用： addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。它们都接受3个参数：事

朴灿烈づ我的快乐病毒、/ 2022年08月18日 01:54/ 0 赞/ 288 阅读

相关 javascript-事件绑定和普通事件

1.什么是事件绑定,什么是普通事件？事件绑定:针对dom绑定的事件. 普通事件:没有针对dom绑定的事件. 2.为什么要使用事件绑定? 普通事件有一个缺点,

╰+攻爆jí腚メ/ 2022年06月12日 11:09/ 0 赞/ 342 阅读

相关事件绑定和普通事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

偏执的太偏执、/ 2022年06月03日 06:08/ 0 赞/ 352 阅读

相关【JS】原生JS事件绑定onclick和addEventListener

onclick绑定方式优点： \- 简洁 \- 处理事件的this关键字指向当前元素缺点： \- 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，

女爷i/ 2022年05月27日 04:42/ 0 赞/ 732 阅读

相关 JS绑定事件

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年1月17日目的：实现一些js简单绑定按钮事件分享一些简单的js绑定事件给一些刚入门的网友玩玩，代码简

深藏阁楼爱情的钟/ 2022年03月26日 11:20/ 0 赞/ 453 阅读