WebAPI之DOM事件操作详解

╰+攻爆jí腚メ 2023-02-12 11:29 197阅读 0赞

### WebAPI之DOM事件 ###

*  WebAPI之DOM事件
 *   *  1. 事件基础
     *   *  1.1 事件三要素
         *  1.2 执行事件的步骤
     *  2. 事件高级
     *   *  2.1 注册事件（2种方式）
         *  2.2 事件监听
         *  2.3 删除事件（解绑事件）
         *  2.4 DOM事件流
         *   *  2.4.1 事件流来源与介绍
             *  2.4.2 事件冒泡
             *  2.4.3 事件捕获
         *  2.5 事件对象
         *   *  2.5.1 事件对象的使用
             *  2.5.2 事件对象的属性和方法
             *  2.5.3 e.target 和 this 的区别
         *  2.6 阻止默认行为
         *  2.7 阻止事件冒泡
         *  2.8 事件委托
     *  3 鼠标事件
     *   *  3.1 常用鼠标事件
         *  3.2 鼠标事件对象与获取鼠标在页面中的坐标
     *  4 键盘事件
     *   *  4.1 键盘事件用法
         *  4.2 键盘事件对象
         *  4.3 案例：模拟京东按键输入内容

# WebAPI之DOM事件 #

## 1. 事件基础 ##

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。触发— 响应机制。

### 1.1 事件三要素 ###

*  事件源（谁）：触发事件的元素
 *  事件类型（什么事件）： 例如 click 点击事件
 *  事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数

<button id="btn">唐伯虎</button>
        <script>
            // 点击一个按钮，弹出对话框
            // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
            //(1) 事件源 事件被触发的对象 谁 按钮
            var btn = document.getElementById('btn');
            //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
            //(3) 事件处理程序 通过一个函数赋值的方式 完成
            btn.onclick = function() { 
                alert('点秋香');
            }

### 1.2 执行事件的步骤 ###

<div>123</div>
        <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick // 3.添加事件处理程序 div.onclick = function() { console.log('我被选中了'); } </script>

## 2. 事件高级 ##

### 2.1 注册事件（2种方式） ###

<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>

### 2.2 事件监听 ###

1.事件监听用法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
2.代码见2.1注册事件代码部分。

### 2.3 删除事件（解绑事件） ###

<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); } </script>
    </body>

### 2.4 DOM事件流 ###

#### 2.4.1 事件流来源与介绍 ####

事件流的来源如下：

>     当时的2大浏览器霸主谁也不服谁！
>     IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
>     Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。
>     
>     江湖纷争，武林盟主也脑壳疼！！！
>     
>     最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。
>     现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

DOM 事件流会经历3个阶段：

*  捕获阶段
 *  当前目标阶段
 *  冒泡阶段

#### 2.4.2 事件冒泡 ####

<div class="father">
            <div class="son">son盒子</div>
        </div>
        <script>
            // onclick 和 attachEvent（ie） 在冒泡阶段触发
            // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
            // son -> father ->body -> html -> document
            var son = document.querySelector('.son');
    		// 给son注册单击事件
            son.addEventListener('click', function() { 
                alert('son');
            }, false);
    		// 给father注册单击事件
            var father = document.querySelector('.father');
            father.addEventListener('click', function() { 
                alert('father');
            }, false);
    		// 给document注册单击事件，省略第3个参数
            document.addEventListener('click', function() { 
                alert('document');
            })
        </script>

#### 2.4.3 事件捕获 ####

<div class="father">
            <div class="son">son盒子</div>
        </div>
        <script>
            // 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
            // document -> html -> body -> father -> son
             var son = document.querySelector('.son');
    		// 给son注册单击事件，第3个参数为true
             son.addEventListener('click', function() { 
                 alert('son');
             }, true);
             var father = document.querySelector('.father');
    		// 给father注册单击事件，第3个参数为true
             father.addEventListener('click', function() { 
                 alert('father');
             }, true);
    		// 给document注册单击事件，第3个参数为true
            document.addEventListener('click', function() { 
                alert('document');
            }, true)
        </script>

### 2.5 事件对象 ###

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

比如：

1.  谁绑定了这个事件。
2.  鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3.  键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

#### 2.5.1 事件对象的使用 ####

<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>

#### 2.5.2 事件对象的属性和方法 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

#### 2.5.3 e.target 和 this 的区别 ####

*  this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
 *  e.target 是事件触发的元素。

> 常情况下target 和 this是一致的，  
> 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），  
> 这时候this指向的是父元素，因为它是绑定事件的元素对象，  
> 而target指向的是子元素，因为他是触发事件的那个具体元素对象。

<div>123</div>
        <script>
            var div = document.querySelector('div');
            div.addEventListener('click', function(e) { 
                // e.target 和 this指向的都是div
                console.log(e.target);
                console.log(this);
    
            });
        </script>

事件冒泡下的e.target和this：

<ul>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
        </ul>
        <script>
            var ul = document.querySelector('ul');
            ul.addEventListener('click', function(e) { 
                  // 我们给ul 绑定了事件 那么this 就指向ul 
                  console.log(this); // ul
    
                  // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
                  console.log(e.target); // li
            });
        </script>

### 2.6 阻止默认行为 ###

> html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转

<a href="http://www.baidu.com">百度</a>
        <script>
            // 2. 阻止默认行为 让链接不跳转 
            var a = document.querySelector('a');
            a.addEventListener('click', function(e) { 
                 e.preventDefault(); // dom 标准写法
            });
            // 3. 传统的注册方式
            a.onclick = function(e) { 
                // 普通浏览器 e.preventDefault(); 方法
                e.preventDefault();
                // 低版本浏览器 ie678 returnValue 属性
                e.returnValue = false;
                // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
                return false;
            }
        </script>

### 2.7 阻止事件冒泡 ###

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

<body>
        <div class="father">
            <div class="son">son儿子</div>
        </div>
        <script> // 常见事件对象的属性和方法 // 阻止冒泡 dom 推荐的标准 stopPropagation() var son = document.querySelector('.son'); son.addEventListener('click', function(e) { alert('son'); e.stopPropagation(); // stop 停止 Propagation 传播 e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡 }, false); var father = document.querySelector('.father'); father.addEventListener('click', function() { alert('father'); }, false); document.addEventListener('click', function() { alert('document'); }) </script>
    </body>

### 2.8 事件委托 ###

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

> 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

**1.事件委托的原理：**  
给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。  
**2.事件委托的作用：**  
我们只操作了一次 DOM ，提高了程序的性能；动态新创建的子元素，也拥有事件。

<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>

## 3 鼠标事件 ##

### 3.1 常用鼠标事件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]  
禁止选中文字和禁止右键菜单：

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

### 3.2 鼠标事件对象与获取鼠标在页面中的坐标 ###

<!DOCTYPE html>
    <html lang="en">
    
    <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> body { height: 3000px; } </style>
    </head>
    
    <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>
    
    </html>

## 4 键盘事件 ##

### 4.1 键盘事件用法 ###

### 4.2 键盘事件对象 ###

### 4.3 案例：模拟京东按键输入内容 ###

<!DOCTYPE html>
    <html lang="en">
    
    <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> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; } .con { display: none; position: absolute; top: -40px; width: 171px; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; } .con::before { content: ''; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent; } </style>
    </head>
    
    <body>
        <div class="search">
            <div class="con">123</div>
            <input type="text" placeholder="请输入您的快递单号" class="jd">
        </div>
        <script> // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大） // 表单检测用户输入： 给表单添加键盘事件 // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容 // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子 var con = document.querySelector('.con'); var jd_input = document.querySelector('.jd'); jd_input.addEventListener('keyup', function() { // console.log('输入内容啦'); if (this.value == '') { con.style.display = 'none'; } else { con.style.display = 'block'; con.innerText = this.value; } }) // 当我们失去焦点，就隐藏这个con盒子 jd_input.addEventListener('blur', function() { con.style.display = 'none'; }) // 当我们获得焦点，就显示这个con盒子 jd_input.addEventListener('focus', function() { if (this.value !== '') { con.style.display = 'block'; } }) </script>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200526092459535.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200526095424584.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20200526091408561.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center