DOM 高级事件

刺骨的言语ヽ痛彻心扉 2023-09-26 09:04 70阅读 0赞

#### 文章目录 ####

*   *  一、注册事件
     *  二、删除事件
     *  三、DOM 事件流
     *  四、事件对象
     *   *  1.e.target 属性
         *  2.阻止默认行为
     *  五、阻止事件冒泡
     *  六、事件委托
     *  七、常用鼠标事件
     *   *  1.禁止鼠标右键
         *  2.禁止鼠标选中
         *  3.获得鼠标坐标
     *  八、常用键盘事件
     *   *  1.判断用户按键
         *  2.按键输入内容

### 一、注册事件 ###

给元素添加事件称为注册事件或者绑定事件，注册事件有两种方式：传统方式和方法监听注册方式。

> ① 传统注册方式，事件以 on 开头，且该注册事件具有唯一性，也就是说同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会将前面注册的处理函数覆盖掉；  
> ② 方法监听注册方式，w3c 标准推荐方式，addEventListener() 它是一个方法，该注册方式的特点是，同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。

//方法监听注册
    eventTarget.addEventListener(type, listener, useCapture);

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

> 该方法接收三个参数：  
> ① type：事件类型字符串，比如 click、mouseover，注意这里不要带 on；  
> ② listener：事件处理函数，事件发生时会调用该监听函数；  
> ③ useCapture：可选参数，是一个布尔值，默认是 false。

### 二、删除事件 ###

> ① 传统解绑，eventTarget.onclick = null；  
> ② 方法监听方式，eventTarget.removeEventListener(type, listener, useCapture)。

<div>盒子</div>
    <script>
        var div = document.querySelector('div');
       div.addEventListener('click',fn);
       function fn() {
        
           alert(2222);
           div.removeEventListener('click',fn);
       } 
    </script>

### 三、DOM 事件流 ###

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。  
事件流分为3个阶段，捕获阶段、当前目标阶段和冒泡阶段。

![在这里插入图片描述][92f1b90185a946b6ac8fafda887abc26.png_pic_center]

> 注意：  
> ① JS 代码中只能执行捕获或者冒泡中的一个阶段；  
> ② onclick 只能得到冒泡阶段；  
> ③ eventTarget.addEventListener(type, listener, useCapture) 第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序，如果是 false（不写默认就是 false），表示在事件冒泡阶段调用事件处理程序；  
> ④ 捕获阶段由上到下传播执行，冒泡阶段由下到上依次传播；  
> ⑤ 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave 等。

<div class="father">
        <div class="son">son盒子</div>  
    </div>
    <script>
        var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        son.addEventListener('click',function() {
        
            alert('son'); 
        }, true);
        father.addEventListener('click',function() {
        
            alert('father'); 
        }, true); 
        //由于第三个参数是true，捕获阶段，所以先弹出father再弹出son 
    </script>

`实际开发中我们很少使用事件捕获，我们更关注事件冒泡！`

### 四、事件对象 ###

var div = document.querySelector('div');
    div.onclick = function(event) {
        }

> ① 这里的event就是一个事件对象，写到我们侦听函数的小括号里面，当形参来看；  
> ② 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递实参过去；  
> ③ 事件对象是我们事件的一系列相关数据的集合，跟事件相关的（比如键盘事件里面就包含了键盘事件的信息，判断用户按下了哪个键等）；  
> ④ 这个事件对象不一定必须写成 event，也可以自己命名，我们喜欢写成 e、evt 或者 event；  
> ⑤ 事件对象也有兼容性问题，当然一般不太考虑兼容性问题。

事件对象常见的属性和方法：

![在这里插入图片描述][0ed747d17a0e46e3bb35d612b05acaa4.png_pic_center]

#### 1.e.target 属性 ####

`e.target 返回的是触发事件的对象（点击谁返回谁），this 返回的是绑定事件的对象！`

<ul>
    <li>123</li>
    <li>456</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addListener('click',function(e) {
        
            console.log(this); //this指向绑定元素ul
            console.log(e.target); //e.target指向触发事件的元素li
        })
    </script>

#### 2.阻止默认行为 ####

让链接不跳转，或者让提交按钮不提交！

var a = document.querySelector('a');
    a.addEventListener('click', fn);
    function fn(e) {
        
        e.preventDefault(); //DOM标准写法
    }
    
    //传统注册方式也可以（两种）
    a.onclick = function(e) {
        
        e.preventDefault(); //第一种方法 缺点是具有兼容性问题
        return false; //第二种方法 优点是无兼容性，缺点是return后面的代码就不执行了，且只限于传统的注册方式
    }

### 五、阻止事件冒泡 ###

事件冒泡：开始时由具体的元素接收，然后逐级向上传播到 DOM 最顶层节点。  
但是有时候我们并不想让事件冒泡，这时候需要有一个方法去阻止它！

//想在哪里停止冒泡，就在哪个事件里添加这个方法，后面的冒泡停止传播
    e.stopPropagation(); 
    
    //兼容性解决方案（了解即可）
    if (e && e.stopPropagation) {
        
        e.stopPropagation();
    }else{
        
        window.event.cancelBubble = true;
    }

### 六、事件委托 ###

比如说，我们准备了很多的 li，想要点击每一个 li 都会弹出一个对话框。按照我们之前的做法，就是给每一个 li 都获取过来循环注册事件，但是当数量足够大的时候，是非常辛苦的，而且访问 DOM 的次数越多，整个页面的交互就绪时间就会越长。  
事件委托的原理：不是给每个子节点单独设置事件监听器，而是**将事件监听器设置在其父节点之上**，然后利用冒泡原理影响去设置每个子节点。  
以上案例，给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。  
`我们只操作了一次 DOM，提高了程序的性能！`

<ul>
         <li>我</li>
         <li>是</li>
         <li>你</li>
         <li>爸</li>
        </ul>
    <script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        
        m = e.target.innerHTML;
        alert(m);    
    })
    </script>

### 七、常用鼠标事件 ###

**① 常用的鼠标事件**

![在这里插入图片描述][964e0579b50f4390b3e05167a1189154.png_pic_center]  
**② 常用的鼠标事件对象**

![在这里插入图片描述][148effaf818c46cb92e8c5141321c167.png_pic_center]

#### 1.禁止鼠标右键 ####

contextmenu 控制何时显示上下文菜单，主要作用是取消默认的上下文菜单。

document.addEventListener('contextmenu', function(e) {
        
        e.preventDefault();
    });

#### 2.禁止鼠标选中 ####

document.addEventListener('selectstart', function(e) {
        
        e.preventDefault();
    });

#### 3.获得鼠标坐标 ####

document.addEventListener('click', function(e) {
         
        //client返回的是鼠标在可视区的坐标
        console.log(e.clientX);
        console.log(e.clientY);
        //page返回的是鼠标在页面文档中的坐标
        console.log(e.pageX);
        console.log(e.pageY);
    });

那么我们来实现一个好玩的游戏，你能否让一张图片跟着你的鼠标移动呢？鼠标去哪图片跟哪，好了现在开始！

案例分析：  
① 鼠标不断移动，使用鼠标移动事件 mousemove。  
② 在页面中移动，给 document 注册事件。  
③ 图片要移动距离，而且不占位置，所以我们使用绝对定位控制图片。  
④ 核心原理，每次移动鼠标，我们都会获得最新的鼠标坐标，把这个 x 和 y 的坐标作为图片的 top 和 left 值就可以移动图片。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            img {
        
                position: absolute;
                top: 100px;
                left: 100px;
                width: 60px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <img src="小鹿.jpg"/>
        <script>
            var img = document.querySelector('img');
            document.addEventListener('mousemove',fn);
            function fn(e) {
        
                var x = e.pageX;
                var y = e.pageY;
                img.style.left = x - 30 + 'px'; 
                img.style.top = y - 50 + 'px';
            }
        </script>
    </body>
    </html>

`鼠标默认在图片左上角，我们可自行改变相对位置，一般居中，注意加 px 单位！`

### 八、常用键盘事件 ###

**① 常用的键盘事件**  
![在这里插入图片描述][80f07424882d4527b700241b29d413a6.png_pic_center]  
**② 常用的键盘事件对象**  
![在这里插入图片描述][149c95c2714e44de8f5bd692fa0c7252.png_pic_center]

> ① onkeypress 不识别功能键，按功能键是没反应的；  
> ② 三个事件的执行顺序，keydown、keypress、keyup；  
> ③ 使用 addEventListener 不需要加 on；  
> ④ 实际开发中，我们更多使用 keydown 和 keyup，毕竟它们能识别所有的键。

#### 1.判断用户按键 ####

document.addEventListener('keyup', function(e) {
        
        console.log(e.keyCode);
    });

> ① 键盘事件对象中的 keyCode 属性可以得到相应键的 ASCII 码值；  
> ② keyup 和 keydown 事件不区分字母大小写，a 和 A 得到的都是65，keypress 区分大小写，a97，A65。

#### 2.按键输入内容 ####

案例分析：  
① 核心思路，检测用户是否按下了 s 键，如果按下 s 键，就把光标定位到搜索框里面。  
② 使用键盘事件对象里面的 keyCode 判断用户按下的是否是 s 键。  
③ 搜索框获得焦点，使用 js 里面的 focus() 方法。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <input type="text"/>
        <script>
            var search = document.querySelector('input');
            //这里我们不使用keydown，如果使用keydown出现的结果就是一按下s键光标就定进去,之后就会在输入框里输入一堆的s
            document.addEventListener('keyup',fn); 
            function fn(e) {
        
                if (e.keyCode === 83) {
        
                    search.focus();
                }
            }   
        </script>
    </body>
    </html>

[92f1b90185a946b6ac8fafda887abc26.png_pic_center]: https://img-blog.csdnimg.cn/92f1b90185a946b6ac8fafda887abc26.png#pic_center
[0ed747d17a0e46e3bb35d612b05acaa4.png_pic_center]: https://img-blog.csdnimg.cn/0ed747d17a0e46e3bb35d612b05acaa4.png#pic_center
[964e0579b50f4390b3e05167a1189154.png_pic_center]: https://img-blog.csdnimg.cn/964e0579b50f4390b3e05167a1189154.png#pic_center
[148effaf818c46cb92e8c5141321c167.png_pic_center]: https://img-blog.csdnimg.cn/148effaf818c46cb92e8c5141321c167.png#pic_center
[80f07424882d4527b700241b29d413a6.png_pic_center]: https://img-blog.csdnimg.cn/80f07424882d4527b700241b29d413a6.png#pic_center
[149c95c2714e44de8f5bd692fa0c7252.png_pic_center]: https://img-blog.csdnimg.cn/149c95c2714e44de8f5bd692fa0c7252.png#pic_center