DOM高级事件

最新推荐文章于 2023-03-17 14:36:39 发布

VIP文章浩哥学习编程之路

最新推荐文章于 2023-03-17 14:36:39 发布

阅读量257

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/m0_46978034/article/details/110875107

版权

文章目录

一.注册事件(绑定事件)

1.注册事件概述
给元素添加事件称为注册事件或绑定事件
注册事件有俩种方式：传统方式和方法监听注册方式

他俩的区别

传统注册方式

利用的on开头事件onclick
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式
addEventListener() 它是一个方法
IE9之前的IF不支持方法，可以使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器(这里的监听器是指function)
按注册顺序依次执行

2.addEventListener事件监听方式

evenTarget.addEventListener(type，listener[，useCapture])

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

type:事件类型字符串，比如click、mouseover，注意这里不带on的
listener：事件处理函数。事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。学完DOM事件流，在来进一步学习

代码演示

<body>
    <button>传统注册方式</button>
    <button>方法监听注册事件</button>
    <script>
        var bus = document.querySelectorAll('button')
            // 1.传统的注册事件  传统的后面会把前面的给覆盖掉
        bus[0].onclick = function() {
            alert(11)
        }
        bus[0].onclick = function() {
                alert(22)
            }
          //我们还可以把传统事件执行函数提出来单独写，点击后直接调用函数即可
              bus[0].onclick = fn //注意这里不能加入小括号因为如果你加入了小括号相当于它自己在调用了
            function fn(){
                alert(22)
            }
            // 2.事件监听注册事件 addEventListener 
            // （1）里面的事件类型是字符串的，必须加引号 是不带on的
            // （2）同一个元素同一个事件可以添加多个监听事件 不会覆盖
        bus[1].addEventListener('click', function() {
            alert(11)
        })
        bus[1].addEventListener('click', function() {
            alert(22)
        })
        //我们还可以把监听事件执行函数提出来单独写，点击后直接调用函数即可
            bus[1].addEventListener('click', fn1);注意这里函数调用也不能加入小括号
            bus[1].addEventListener('click', fn2)
            
            function fn1(){
            alert(22)
            }
             function fn2(){
            alert(22)
            }
    </script>
</body>

二.删除事件(解绑事件)

1.删除事件的方式

传统注册方式删除

eventTarget.onclick = null;

方法监听注册方式删除

eventTarget.removeEventListener(type,listener[,useCapture]);

这种解绑方式函数必须放在外面去定义，如果不放在外面定义，直接在参数当中写匿名函数表达式，那么绑定和解绑传的回调函数不是同一个，所以解绑不了
代码演示

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var dis = document.querySelectorAll('div');
        dis[0].onclick = function() {
                alert('被点击了')
                    // 1.传统方式删除事件
                dis[0].onclick = null//传统方法解绑直接把那个绑定事件赋值为空即可 在没有解绑之前对象指向得就是对应得自己回调函数，我们只需要把他对应得那个回调函数为空，就是相当于把他那条连接线给打断即可
            }
            // 2.removeEventListener 删除事件 我们删除事件的时候要知道删除的是那个函数所以我们添加函数的时候要用到单独声明函数 在把函数名写在里面去 移除的时候移除函数名即可
        dis[1].addEventListener('click', fn) //里面的fn是不需要加上小括号的

        function fn() {
            alert('被点击了')
            dis[1].removeEventListener('click', fn)注意解绑对应你的执行函数名
        }
    </script>
</body>

三.DOM事件流(事件传播)

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给div一个注册了点击事件：
1.铺获阶段
2.当前目标阶段
2.冒泡阶段

最低0.47元/天解锁文章

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM高级事件

文章目录一.注册事件(绑定事件)二.删除事件(解绑事件)三.DOM事件流一.注册事件(绑定事件)1.注册事件概述给元素添加事件称为注册事件或绑定事件注册事件有俩种方式：传统方式和方法监听注册方式他俩的区别传统注册方式利用的on开头事件onclick特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式addEventListener() 它是一个方法IE9之前的IF不支持方法，可以使用a
复制链接

扫一扫