JavaScript注册、删除事件的两种方式--传统注册方式、方法监听注册方式

我是Dreamer啊

已于 2023-07-27 09:07:43 修改

阅读量1.6k

点赞数 2

分类专栏：前端开发文章标签： javascript js dom

于 2020-11-25 11:20:47 首次发布

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/110121039

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

JavaScript注册事件的两种方式–传统注册方式、方法监听注册方式

注册事件有两种方式：传统方式和方法监听注册方式。（还有一种IE9以前支持的方式attachEvent注册事件，现在不常用）

传统注册方式

利用on开头的事件，如onclick。

btn.onclick = function(){}

传统事件注册具有唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

addEventListener()；是一个方法。同一个元素同一个事件可以之策多个监听器，会按照注册的顺序依次执行。

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。

三个参数：

type：事件类型字符串，比如 click、mouseover。这里不需要加on

listener：事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数，是一个布尔值，默认是false。

<body>
    <button>
        传统注册事件
    </button>
    <button>
        事件监听注册事件
    </button>
    <script>
    	var btns = document.querySelectorAll('button');
        //传统注册事件
        btns[0].onclick = function(){
            alert('hi');
        }
        btns[0].onclick = function(){
            alert('传统注册事件');
        }
        //运行程序，点击传统注册事件按钮，弹出提示框：传统注册事件。第一个hi提示框被覆盖，不会弹出。
        
        //事件侦听注册事件
        btns[1].addEventListener('click',function(){
            alert('事件监听注册事件')；
        })
        btns[1].addEventListener('click',function(){
            alert('事件监听注册事件2')；
        })
        //运行程序，点击事件监听注册事件按钮，弹出提示框：事件监听注册事件，点击确定后，再次弹出“事件监听注册事件2”的提示框
        //在事件侦听注册事件的方法中事件类型要加引号并且没有on
    </script>
</body>

JavaScript删除事件(解绑事件)

传统方式删除事件

evenTarget.onclick. = null;

方法监听方式删除事件

evenTarget.removeEventListener()

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
    	var divs = document.querySelectorAll('div');
        divs[0].onclick = fuction(){
            alert(123);
            //每次点击div1都会弹出来一个提示框123，想要第二次点击时不弹出提示框。
            //传统方式解绑事件
            divs[0].onclick = null;
        }
        //将fn函数绑定到点击事件中，里面的fn不需要加小括号
        divs[1].addEventListener('click',fn);
        //fn函数的内容
            function fn (){
                alert(456);
                //每次点击div2都会弹出来一个提示框456，想要第二次点击时不弹出提示框。
           		//方法监听注册方式
                //因为要考虑到解绑，所以在前面绑定的时候不使用匿名函数的绑定方式。
                divs[1].removeEventListener('click',fn)
            }
            
            
        })
    </script>
</body>

我是Dreamer啊

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
JavaScript注册、删除事件的两种方式--传统注册方式、方法监听注册方式

JavaScript注册事件的两种方式–传统注册方式、方法监听注册方式注册事件有两种方式：传统方式和方法监听注册方式。（还有一种IE9以前支持的方式attachEvent注册事件，现在不常用）传统注册方式利用on开头的事件，如onclick。<button onclick = “alert(‘123’)”></button>btn.onclick = function(){}传统事件注册具有唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注
复制链接

扫一扫