JS基础——事件高级【注册，删除事件，事件对象，鼠标事件，DOM事件流，事件委托】

最新推荐文章于 2024-06-06 10:28:40 发布

安北北

最新推荐文章于 2024-06-06 10:28:40 发布

阅读量319

点赞数

分类专栏： js 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/m0_48454458/article/details/126426061

版权

js 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

JS基础——事件高级【注册，删除事件，事件对象，鼠标事件，DOM事件流，事件委托】

１注册事件【绑定事件】

![在这里插入图片描述](https://img-blog.csdnimg.cn/5b775dd714ba4496b4d6f2bf1371118b.png

１·１注册事件的两种方法

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
            // 2. 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
        
    </script>
</body>

２删除事件

在这里插入图片描述兼容性方案：

２·１删除事件的三种方法【前两种常用】

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        // var divs = document.querySelectorAll('div');
        // divs[0].onclick = function() {
        //         alert(11);
        //         // 1. 传统方式删除事件
        //         divs[0].onclick = null;
        //     }
        //     // 2. removeEventListener 删除事件
        // divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        // function fn() {
        //     alert(22);
        //     // divs[1].removeEventListener('click', fn);
        // }
        // // 3. detachEvent
        // divs[2].attachEvent('onclick', fn1);

        // function fn1() {
        //     alert(33);
        //     divs[2].detachEvent('onclick', fn1);
        // }

        var divs=document.querySelectorAll('div')
        divs[0].onclick=function(){
            alert('00')
            divs[0].onclick=null
        }
        divs[1].addEventListener('click',fn)
        function fn(){
            alert(22)
            // divs[1].removeEventListener('click',fn)
        }
        divs[2].addEventListener('click',function(){
            alert(33);
            divs[2].removeEventListener('click',function(){})
        })
    </script>
</body>

３DOM事件流【默认的是冒泡】

![在这里插入图片描述](https://img-blog.csdnimg.cn/3073e4ee682240dc9e936b23ac398814.png

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

4事件对象

在这里插入图片描述

4·1事件对象常用的属性和方法4·2事件对象代码：

<body>
    <div>123</div>
    <script>
        // 事件对象
        var div = document.querySelector('div');
        div.onclick = function(e) {
                // console.log(e);
                // console.log(window.event);
                // e = e || window.event;
                console.log(e);


            }
            // div.addEventListener('click', function(e) {
            //         console.log(e);

        //     })
        // 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
        // 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
        // 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e
        // 5. 事件对象也有兼容性问题 ie678 通过 window.event 兼容性的写法  e = e || window.event;
    </script>
</body>

4·3 e.target和this的区别：

<body>
    <div>123
        <span>567</span>
    </div>
    <ul>
        <li>abc1</li>
        <li>abc2</li>
        <li>abc3</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>
</body>

5·阻止事件冒泡

在这里插入图片描述
5·1解决兼容性d’w

6·事件委托

在这里插入图片描述

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('知否知否，点我应有弹框在手！');
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
       })      
    </script>
</body>

7·常用的鼠标事件

在这里插入图片描述

<body>
    <div>我是一段不愿意分享的文字</div>
    <br>
    <p>baby，baby，baby</p>
    <script>        
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
            // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })      
    </script>
</body>

7`1鼠标事件对象

在这里插入图片描述

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function(e) {
            // 1. client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>

8·跟随鼠标的图片案例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>

<body>
    <img src="images/angel.gif" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 1. mousemove只要我们鼠标移动1px 就会触发这个事件
            // console.log(1);
            // 2.核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            //3 . 千万不要忘记给left 和top 添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        });
        
    </script>
</body>