JS基础事件

r囧r小猫 2023-10-06 21:47 28阅读 0赞

#### 阅读目录 ####

*  基础知识
 *  处理程序
 *   *  HTML绑定
     *   *  绑定函数或方法时需要加上括号
         *  使用方法做为事件处理程序
         *  传递事件源对象与事件对象
     *  DOM绑定
 *  事件监听
 *   *  绑定多个事件
     *  通过对象绑定
     *  移除事件
     *  事件选项
     *   *  使用 \`once:true\` 来指定事件只执行一次
         *  设置 \` \{ capture: true \}\` 或直接设置第三个参数为 true 用来在捕获阶段执行事件
         *  设置 \{ capture: false \} 或直接设置第三个参数为 false 用来在冒泡阶段执行事件
 *  事件对象
 *  冒泡捕获
 *   *  冒泡行为
     *  阻止冒泡
     *  事件捕获
     *  事件代理
     *  未来元素
 *  默认行为
 *  窗口文档
 *   *  事件类型
     *   *  window.onload
         *  DOMContentLoaded
         *  beforeunload \*
         *  unload
 *  鼠标事件
 *   *  事件类型
     *   *  mouseenter 与 mouseleave 事件从子元素移动到父元素时不触发父元素事件
     *  事件对象
     *   *  relatedTarget 是控制鼠标移动事件的来源和目标对象的
     *  禁止复制
 *  键盘事件
 *   *  事件对象
 *  表单事件

## 基础知识 ##

在文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件，比如用户的单击行为、表单内容的改变行为即为事件，我们可以为不同的事件定义处理程序。JS使用异步事件驱动的形式管理事件。

事件类型  
JS为不同的事件定义的类型，也可以称为事件名称。

事件目标  
事件目标指产生事件的对象，比如 `a` 标签被点击那么 `a` 标签就是事件目标。  
元素是可以嵌套的，所以在进行一次点击行为时可能会触发多个事件目标。

## 处理程序 ##

事件的目的是要执行一段代码，我们称这类代码为事件处理（监听）程序。当在对象上触发事件时就会执行定义的事件处理程序。

### HTML绑定 ###

可以在html元素上设置事件处理程序，浏览器解析后会绑定到DOM属性中

往往事件处理程序业务比较复杂，所以绑定方法或函数会很常见

#### 绑定函数或方法时需要加上括号 ####

<button onclick="show()">博客</button>
    <script>
      function show() {
        
        alert('wgchen.blog.csdn.net')
      }
    </script>

#### 使用方法做为事件处理程序 ####

<input type="text" onkeyup="HD.show()" />
    <script>
      class HD {
        
        static show() {
        
          console.log('wgchen.blog.csdn.net')
        }
      }
    </script>

![在这里插入图片描述][e44ab36ef8c1436f8f6d21a1ee022d3e.gif_pic_center]

#### 传递事件源对象与事件对象 ####

<button onclick="show(this,'wgchen','willem','博客',event)">技术文章</button>
    <script>
        function show(...args) {
        
            console.log(args)
        }
    </script>

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

### DOM绑定 ###

也可以将事件处理程序绑定到DOM属性中

*  使用 `setAttribute` 方法设置事件处理程序无效
 *  属性名区分大小写

<div id="app">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      app.onclick = function () {
        
        this.style.color = 'red'
      }
    </script>

![在这里插入图片描述][34e96bb77e8642dd820f0ea1d0871434.png]  
无法为事件类型绑定多个事件处理程序，下面绑定了多个事件处理程序，因为属性是相同的所以只有最后一个有效。

<div id="app">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      
      app.onclick = function () {
        
        this.style.color = 'red'
      }
    
      app.onclick = function () {
        
        this.style.fontSize = '55px'
      }
    </script>

## 事件监听 ##

通过上面的说明我们知道使用HTML与DOM绑定事件都有缺陷，建议使用新的事件监听绑定方式 `addEventListener` 操作事件

使用 `addEventListener` 添加事件处理程序有以下几个特点

*  transtionend / DOMContentLoaded 等事件类型只能使用 addEventListener 处理
 *  同一事件类型设置多个事件处理程序，按设置的顺序先后执行
 *  也可以对未来添加的元素绑定事件

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>addEventListener</td> 
   <td>添加事件处理程序</td> 
  </tr> 
  <tr> 
   <td>removeEventListener</td> 
   <td>移除事件处理程序</td> 
  </tr> 
 </tbody> 
</table>

addEventListener 的参数说明如下

1、参数一事件类型  
2、参数二事件处理程序  
3、参数三为定制的选项，可传递 `object` 或 `boolean` 类型。后面会详细介绍使用区别

### 绑定多个事件 ###

使用 addEventListener 来多个事件处理程序

<div id="app">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      app.addEventListener('click', function () {
        
        this.style.color = 'red'
      })
      app.addEventListener('click', function () {
        
        this.style.fontSize = '55px'
      })
    </script>

### 通过对象绑定 ###

如果事件处理程序可以是对象，对象的 `handleEvent` 方法会做为事件处理程序执行。

下面将元素的事件统一交由对象处理

<div id="app">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      class HD {
        
        handleEvent(e) {
        
          this[e.type](e)
        }
        click() {
        
          console.log('单击事件')
        }
        mouseover() {
        
          console.log('鼠标移动事件')
        }
      }
      app.addEventListener('click', new HD())
      app.addEventListener('mouseover', new HD())
    </script>

![在这里插入图片描述][1b907320fb434ac7b9d52cf8f68ca542.gif_pic_center]

### 移除事件 ###

使用 `removeEventListener` 删除绑定的事件处理程序

事件处理程序单独定义函数或方法，这可以保证事件处理程序是同一个

<div id="app">wgchen.blog.csdn.net</div>
    <button id="hd">删除事件</button>
    
    <script>
      const app = document.querySelector('#app')
      const hd = document.querySelector('#hd')
    
      function show() {
        
        console.log('APP我执行了')
      }
    
      app.addEventListener('click', show)
      
      hd.addEventListener('click', function () {
        
        app.removeEventListener('click', show)
      })
    </script>

### 事件选项 ###

`addEventListener` 的第三个参数为定制的选项，可传递 object 或 boolean 类型

下面是传递对象时的说明

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>可选参数</th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>once</td> 
   <td>true/false</td> 
   <td>只执行一次事件</td> 
  </tr> 
  <tr> 
   <td>capture</td> 
   <td>true/false</td> 
   <td>事件是在捕获/冒泡哪个阶段执行，true:捕获阶段 false:冒泡阶段</td> 
  </tr> 
  <tr> 
   <td>passive</td> 
   <td>true/false</td> 
   <td>声明事件里不会调用 <code>preventDefault()</code>，可以减少系统默认行为的等待</td> 
  </tr> 
 </tbody> 
</table>

#### 使用 `once:true` 来指定事件只执行一次 ####

<div id="app">wgchen.blog.csdn.net</div>
    <script>
      const app = document.querySelector('#app')
      app.addEventListener(
          'click',
          function () {
        
              alert('wgchen.blog.csdn.net@博客')
          },
          {
         once: true }
      )
    </script>

#### 设置 `{ capture: true }` 或直接设置第三个参数为 true 用来在捕获阶段执行事件 ####

addEventListener 的第三个参数传递 true/false 和设置 \{capture:true/false\}是一样

<div id="app" style="background-color: red">
        <button id="bt">wgchen.blog.csdn.net</button>
    </div>
    <script>
        const app = document.querySelector('#app')
        const bt = document.querySelector('#bt')
        app.addEventListener(
            'click',
            function () {
        
                alert('这是div事件 ')
            },
            {
         capture: true }
        )
    
        bt.addEventListener(
            'click',
            function () {
        
                alert('这是按钮事件 ')
            },
            {
         capture: true }
        )
    </script>

![在这里插入图片描述][bdd5b38557f2400295b806f1fbe4bbb8.gif_pic_center]

#### 设置 \{ capture: false \} 或直接设置第三个参数为 false 用来在冒泡阶段执行事件 ####

<div id="app" style="background-color: red">
        <button id="bt">wgchen.blog.csdn.net</button>
    </div>
    <script>
      const app = document.querySelector('#app')
      const bt = document.querySelector('#bt')
      app.addEventListener(
          'click',
          function () {
        
              alert('这是div事件 ')
          },
          {
         capture: false }
      )
    
      bt.addEventListener(
          'click',
          function () {
        
              alert('这是按钮事件 ')
          },
          {
         capture: false }
      )
    </script>

![在这里插入图片描述][b62595a7def14aa599daee489952e9f7.gif_pic_center]

## 事件对象 ##

执行事件处理程序时，会产生当前事件相关信息的对象，即为事件对事。系统会自动做为参数传递给事件处理程序。

*  大部分浏览器将事件对象保存到 `window.event` 中
 *  有些浏览器会将事件对象做为事件处理程序的参数传递

事件对象常用属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>事件类型</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>事件目标对象，冒泡方式时父级对象可以通过该属性找到在哪个子元素上最终执行事件</td> 
  </tr> 
  <tr> 
   <td>currentTarget</td> 
   <td>当前执行事件的对象</td> 
  </tr> 
  <tr> 
   <td>timeStamp</td> 
   <td>事件发生时间</td> 
  </tr> 
  <tr> 
   <td>x</td> 
   <td>相对窗口的X坐标</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>相对窗口的Y坐标</td> 
  </tr> 
  <tr> 
   <td>clientX</td> 
   <td>相对窗口的X坐标</td> 
  </tr> 
  <tr> 
   <td>clientY</td> 
   <td>相对窗口的Y坐标</td> 
  </tr> 
  <tr> 
   <td>screenX</td> 
   <td>相对计算机屏幕的X坐标</td> 
  </tr> 
  <tr> 
   <td>screenY</td> 
   <td>相对计算机屏幕的Y坐标</td> 
  </tr> 
  <tr> 
   <td>pageX</td> 
   <td>相对于文档的X坐标</td> 
  </tr> 
  <tr> 
   <td>pageY</td> 
   <td>相对于文档的Y坐标</td> 
  </tr> 
  <tr> 
   <td>offsetX</td> 
   <td>相对于事件对象的X坐标</td> 
  </tr> 
  <tr> 
   <td>offsetY</td> 
   <td>相对于事件对象的Y坐标</td> 
  </tr> 
  <tr> 
   <td>layerX</td> 
   <td>相对于父级定位的X坐标</td> 
  </tr> 
  <tr> 
   <td>layerY</td> 
   <td>相对于父级定位的Y坐标</td> 
  </tr> 
  <tr> 
   <td>path</td> 
   <td>冒泡的路径</td> 
  </tr> 
  <tr> 
   <td>altKey</td> 
   <td>是否按了alt键</td> 
  </tr> 
  <tr> 
   <td>shiftKey</td> 
   <td>是否按了shift键</td> 
  </tr> 
  <tr> 
   <td>metaKey</td> 
   <td>是否按了媒体键</td> 
  </tr> 
  <tr> 
   <td>window.pageXOffset</td> 
   <td>文档参考窗口水平滚动的距离</td> 
  </tr> 
  <tr> 
   <td>window.pageYOffset</td> 
   <td>文档参考窗口垂直滚动的距离</td> 
  </tr> 
 </tbody> 
</table>

## 冒泡捕获 ##

### 冒泡行为 ###

标签元素是嵌套的，在一个元素上触发的事件，同时也会向上执行父级元素的事件处理程序，一直到HTML标签元素。

*  大部分事件都会冒泡，但像 `focus` 事件则不会
 *  `event.target` 可以在事件链中最底层的定义事件的对象
 *  `event.currentTarget == this` 即当前执行事件的对象

以下示例有标签的嵌套，并且父子标签都设置了事件，当在子标签上触发事件是会冒泡执行父级标签的事件。

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

### 阻止冒泡 ###

冒泡过程中的任何事件处理程序中，都可以执行 `event.stopPropagation()` 方法阻止继续进行冒泡传递。

*  `event.stopPropagation()` 用于阻止冒泡
 *  如果同一类型事件绑定多个事件处理程序 `event.stopPropagation()` 只阻止当前的事件处理程序。
 *  `event.stopImmediatePropagation()` 阻止事件冒泡并且阻止相同事件的其他事件处理程序被调用。

下例中为 `h2` 的事件处理程序添加了阻止冒泡动作，将不会产生冒泡，也就不会执行父级中的事件处理程序了。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 事件捕获 ###

事件执行顺序为 捕获 > 事件目标 > 冒泡，在向下传递到目标对象的过程即为事件捕获。  
事件捕获在实际使用中频率不高。

通过设置第三个参数为 `true` 或 `{ capture: true }` 在捕获阶段执行事件处理程序。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 事件代理 ###

借助冒泡思路，我们可以不为子元素设置事件，而将事件设置在父级。  
然后通过父级事件对象的 `event.target` 查找子元素，并对他做出处理。

*  这在为多个元素添加相同事件时很方便
 *  会使添加事件变得非常容易

下面是为父级 `UL` 设置事件来控制子元素 `LI` 的样式切换。

![在这里插入图片描述][19787d258b594cb38fa1f09a54c0669b.gif_pic_center]

可以使用事件代理来共享事件处理程序，不用为每个元素单独绑定事件。

![在这里插入图片描述][7f02214f586d4a2ab0b4071976d39bbd.gif_pic_center]

<ul>
        <li data-action="hidden">https://wgchen.blog.csdn.net</li>
        <li data-action="color" data-color="red">博客</li>
    </ul>
    
    <script>
    class HD {
        
        constructor(el) {
        
            el.addEventListener('click', (e) => {
        
                const action = e.target.dataset.action
                this[action](e)
            })
        }
    
        hidden() {
        
            event.target.hidden = true
        }
        
        color() {
        
            event.target.style.color = event.target.dataset.color
        }
    }
    new HD(document.querySelector('ul'))
    </script>

下面是使用事件代理实现的 `TAB` 面板效果

![在这里插入图片描述][e840ec1fb61c48158eddb3ffdc9be1f2.gif_pic_center]

<div class="tab">
        <dl>
            <dt data-action="toggle">博客</dt>
            <dd data-action="hidden">https://wgchen.blog.csdn.net</dd>
        </dl>
        <dl>
            <dt data-action="toggle">技术文章</dt>
            <dd data-action="hidden">wgchen</dd>
        </dl>
    </div>
    
    <script>
        class HD {
        
            constructor(el) {
        
                this.el = el
                el.addEventListener('click', this.handle.bind(this))
            }
            handle() {
        
                const action = event.target.dataset.action
                if (action) this[action]()
            }
            hidden() {
        
                event.target.hidden = true
            }
            toggle() {
        
                this.el.querySelectorAll(`[data-action='hidden']`).forEach((e) => (e.hidden = true))
                event.target.nextElementSibling.hidden = ''
            }
        }
        new HD(document.querySelector('.tab'))
    </script>

下面实现通过代理事件行为，在表单提交时禁用提交按钮，并记录提示次数。

![在这里插入图片描述][f7d4f49eb236406eb5bba3f6f08cb6ae.gif_pic_center]

<form>
        <input type="text" />
        <button type="button" data-submit-disabled data-action="submit,counter">提交表单</button>
    </form>
    <script>
    class FORM {
        
        constructor(form) {
        
            this.form = form
            this.form.counter = 0
            this.form.addEventListener('click', this.handle.bind(this))
        }
        handle() {
        
            const actions = event.target.dataset.action
            
            actions.split(',').forEach((action) => {
        
                if (this[action]) this[action]()
            })
        }
        submit() {
        
            event.preventDefault()
            this.disableButton(true)
            console.log('提交中')
            setTimeout(() => {
        
                this.disableButton(false)
                console.log('提交结束')
            }, 1000)
        }
        disableButton(state) {
        
            this.form.querySelectorAll(`[data-submit-disabled]`).forEach((bt) => {
        
                bt.disabled = state
            })
        }
        counter() {
        
            this.form.counter++
            console.log(this.form.counter)
        }
    }
    
    document.querySelectorAll(`form`).forEach((form) => {
        
        new FORM(form)
    })
    </script>

### 未来元素 ###

下面使用事件代理来对未来元素进行事件绑定

<div id="app">
        <h2>https://wgchen.blog.csdn.net</h2>
    </div>
    
    <script>
    function show() {
        
        console.log(this.textContent)
    }
    
    const app = document.querySelector('#app')
    const h2 = document.querySelectorAll('h2')
    
    app.addEventListener('click', () => {
        
        show.call(event.target)
    })
    
    let newH2 = document.createElement('h1')
    
    newH2.textContent = '博客'
    
    app.append(newH2)
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]

## 默认行为 ##

JS中有些对象会设置默认事件处理程序，比如 A 链接在点击时会进行跳转。

一般默认处理程序会在用户定义的处理程序后执行，所以我们可以在我们定义的事件处理中取消默认事件处理程序的执行。

*  使用 `onclick` 绑定的事件处理程序，`return false` 可以阻止默认行为
 *  推荐使用 `event.preventDefault()` 阻止默认行为

下面阻止超链接的默认行为  
![在这里插入图片描述][828fd45ae5104585a1a799342debcdcb.gif_pic_center]

<a href="https://wgchen.blog.csdn.net">博客</a>
    <script>
    document.querySelector('a').addEventListener('click', () => {
        
        event.preventDefault()
        alert(event.target.innerText)
    })
    </script>

## 窗口文档 ##

下面来学习针对窗口和文档的事件的处理。

### 事件类型 ###

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>window.onload</td> 
   <td>文档解析及外部资源加载后</td> 
  </tr> 
  <tr> 
   <td>DOMContentLoaded</td> 
   <td>文档解析后执行，不需要等待图片/样式文件等外部资源加载，该事件只能通过addEventListener设置</td> 
  </tr> 
  <tr> 
   <td>window.beforeunload</td> 
   <td>文档刷新或关闭时</td> 
  </tr> 
  <tr> 
   <td>window.unload</td> 
   <td>文档卸载时</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>页面滚动时</td> 
  </tr> 
 </tbody> 
</table>

#### window.onload ####

window.onload 事件在文档解析后及图片、外部样式文件等资源加载完后执行

![在这里插入图片描述][35b505c9059f428e851e7d87104a8f31.gif_pic_center]

#### DOMContentLoaded ####

DOMContentLoaded事件在文档标签解析后执行，不需要等外部图片、样式文件、JS文件等资源加载。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]

#### beforeunload \* ####

当浏览器窗口关闭或者刷新时，会触发 `beforeunload` 事件，可以取消关闭或刷新页面。

*  返回值为非空字符串时，有些浏览器会做为弹出的提示信息内容
 *  部分浏览器使用 `addEventListener` 无法绑定事件

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]

#### unload ####

window.unload 事件在文档资源被卸载时执行，在 beforeunload 后执行

*  不能执行 alert、confirm 等交互指令
 *  发生错误也不会阻止页面关闭或刷新

## 鼠标事件 ##

### 事件类型 ###

针对鼠标操作的行为有多种事件类型。

鼠标事件会触发在 `Z-INDEX` 层级最高的那个元素上。

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click</td> 
   <td>鼠标单击事件，同时触发 mousedown/mouseup</td> 
  </tr> 
  <tr> 
   <td>dblclick</td> 
   <td>鼠标双击事件</td> 
  </tr> 
  <tr> 
   <td>contextmenu</td> 
   <td>点击右键后显示的所在环境的菜单</td> 
  </tr> 
  <tr> 
   <td>mousedown</td> 
   <td>鼠标按下</td> 
  </tr> 
  <tr> 
   <td>mouseup</td> 
   <td>鼠标抬起时</td> 
  </tr> 
  <tr> 
   <td>mousemove</td> 
   <td>鼠标移动时</td> 
  </tr> 
  <tr> 
   <td>mouseover</td> 
   <td>鼠标移动时</td> 
  </tr> 
  <tr> 
   <td>mouseout</td> 
   <td>鼠标从元素上离开时</td> 
  </tr> 
  <tr> 
   <td>mouseup</td> 
   <td>鼠标抬起时</td> 
  </tr> 
  <tr> 
   <td>mouseenter</td> 
   <td>鼠标移入时触发，不产生冒泡行为</td> 
  </tr> 
  <tr> 
   <td>mosueleave</td> 
   <td>鼠标移出时触发，不产生冒泡行为</td> 
  </tr> 
  <tr> 
   <td>oncopy</td> 
   <td>复制内容时触发</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>元素滚动时，可以为元素设置overflow:auto; 产生滚动条来测试</td> 
  </tr> 
 </tbody> 
</table>

#### mouseenter 与 mouseleave 事件从子元素移动到父元素时不触发父元素事件 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]

### 事件对象 ###

鼠标事件产生的事件对象包含相对应的属性。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>which</td> 
   <td>执行mousedown/mouseup时，显示所按的键 1左键，2中键，3右键</td> 
  </tr> 
  <tr> 
   <td>clientX</td> 
   <td>相对窗口X坐标</td> 
  </tr> 
  <tr> 
   <td>clientY</td> 
   <td>相对窗口Y坐标</td> 
  </tr> 
  <tr> 
   <td>pageX</td> 
   <td>相对于文档的X坐标</td> 
  </tr> 
  <tr> 
   <td>pageY</td> 
   <td>相对于文档的Y坐标</td> 
  </tr> 
  <tr> 
   <td>offsetX</td> 
   <td>目标元素内部的X坐标</td> 
  </tr> 
  <tr> 
   <td>offsetY</td> 
   <td>目标元素内部的Y坐标</td> 
  </tr> 
  <tr> 
   <td>altKey</td> 
   <td>是否按了alt键</td> 
  </tr> 
  <tr> 
   <td>ctrlKey</td> 
   <td>是否按了ctlr键</td> 
  </tr> 
  <tr> 
   <td>shiftKey</td> 
   <td>是否按了shift键</td> 
  </tr> 
  <tr> 
   <td>metaKey</td> 
   <td>是否按了媒体键</td> 
  </tr> 
  <tr> 
   <td>relatedTarget</td> 
   <td>mouseover事件时从哪个元素来的，mouseout事件时指要移动到的元素。当无来源（在自身上移动）或移动到窗口外时值为null</td> 
  </tr> 
 </tbody> 
</table>

#### relatedTarget 是控制鼠标移动事件的来源和目标对象的 ####

如果移动过快会跳转中间对象

<div id="app">https://wgchen.blog.csdn.net</div>
    <div id="cms">博客</div>
    <script>
    const app = document.querySelector(`#app`)
    const cms = document.querySelector(`#cms`)
    app.addEventListener('mouseout', () => {
          
      console.log(event.target)
      console.log(event.relatedTarget)
    })
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]

### 禁止复制 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 9]

<body>
    https://wgchen.blog.csdn.net
    
    <script>
    document.addEventListener('copy', () => {
        
      event.preventDefault()
      alert('禁止复制内容')
    })
    </script>
    
    </body>

## 键盘事件 ##

针对键盘输入操作的行为有多种事件类型。

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Keydown</td> 
   <td>键盘按下时，一直按键不松开时keydown事件会重复触发</td> 
  </tr> 
  <tr> 
   <td>keyup</td> 
   <td>按键抬起时</td> 
  </tr> 
 </tbody> 
</table>

### 事件对象 ###

键盘事件产生的事件对象包含相对应的属性。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>keyCode</td> 
   <td>返回键盘的ASCII字符数字</td> 
  </tr> 
  <tr> 
   <td>code</td> 
   <td>按键码，字符以Key开始，数字以Digit开始，特殊字符有专属名子。左右ALT键字符不同。<br>不同布局的键盘值会不同</td> 
  </tr> 
  <tr> 
   <td>key</td> 
   <td>按键的字符含义表示，大小写不同。不能区分左右ALT等。不同语言操作系统下值会不同</td> 
  </tr> 
  <tr> 
   <td>altKey</td> 
   <td>是否按了alt键</td> 
  </tr> 
  <tr> 
   <td>ctrlKey</td> 
   <td>是否按了ctlr键</td> 
  </tr> 
  <tr> 
   <td>shiftKey</td> 
   <td>是否按了shift键</td> 
  </tr> 
  <tr> 
   <td>metaKey</td> 
   <td>是否按了媒体键</td> 
  </tr> 
 </tbody> 
</table>

## 表单事件 ##

下面是可以用在表单上的事件类型。

<table> 
 <thead> 
  <tr> 
   <th>事件类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>focus</td> 
   <td>获取焦点事件</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>失去焦点事件</td> 
  </tr> 
  <tr> 
   <td>element.focus()</td> 
   <td>让元素强制获取焦点</td> 
  </tr> 
  <tr> 
   <td>element.blur()</td> 
   <td>让元素失去焦点</td> 
  </tr> 
  <tr> 
   <td>change</td> 
   <td>文本框在内容发生改变并失去焦点时触发，select/checkbox/radio选项改变时触发事件</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>Input、textarea或 select 元素的 <code>value</code> 被修改时，会触发 <code>input</code> 事件。而 change 是鼠标离开后或选择一个不同的option时触发。</td> 
  </tr> 
  <tr> 
   <td>submit</td> 
   <td>提交表单</td> 
  </tr> 
 </tbody> 
</table>

[e44ab36ef8c1436f8f6d21a1ee022d3e.gif_pic_center]: https://img-blog.csdnimg.cn/e44ab36ef8c1436f8f6d21a1ee022d3e.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/dcbd6740fd2b4d9f98b958ccb0e9ec0a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[34e96bb77e8642dd820f0ea1d0871434.png]: https://img-blog.csdnimg.cn/34e96bb77e8642dd820f0ea1d0871434.png
[1b907320fb434ac7b9d52cf8f68ca542.gif_pic_center]: https://img-blog.csdnimg.cn/1b907320fb434ac7b9d52cf8f68ca542.gif#pic_center
[bdd5b38557f2400295b806f1fbe4bbb8.gif_pic_center]: https://img-blog.csdnimg.cn/bdd5b38557f2400295b806f1fbe4bbb8.gif#pic_center
[b62595a7def14aa599daee489952e9f7.gif_pic_center]: https://img-blog.csdnimg.cn/b62595a7def14aa599daee489952e9f7.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/cdd36e1ae6e54e509813e8cb4657d8bd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/48d2592ceac24862928a44e8e895ac91.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/80077b2da5f141bea0d92261772730a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[19787d258b594cb38fa1f09a54c0669b.gif_pic_center]: https://img-blog.csdnimg.cn/19787d258b594cb38fa1f09a54c0669b.gif#pic_center
[7f02214f586d4a2ab0b4071976d39bbd.gif_pic_center]: https://img-blog.csdnimg.cn/7f02214f586d4a2ab0b4071976d39bbd.gif#pic_center
[e840ec1fb61c48158eddb3ffdc9be1f2.gif_pic_center]: https://img-blog.csdnimg.cn/e840ec1fb61c48158eddb3ffdc9be1f2.gif#pic_center
[f7d4f49eb236406eb5bba3f6f08cb6ae.gif_pic_center]: https://img-blog.csdnimg.cn/f7d4f49eb236406eb5bba3f6f08cb6ae.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/7b90958ff29e404380c3c5e5f1322a10.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[828fd45ae5104585a1a799342debcdcb.gif_pic_center]: https://img-blog.csdnimg.cn/828fd45ae5104585a1a799342debcdcb.gif#pic_center
[35b505c9059f428e851e7d87104a8f31.gif_pic_center]: https://img-blog.csdnimg.cn/35b505c9059f428e851e7d87104a8f31.gif#pic_center
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/7e5c43e95dfc4e75997b97e78092f8f9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/bb3041b0ceef4389bc90d462f0e62419.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/11574117081a42e490728556b3884260.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://img-blog.csdnimg.cn/59a130aaf5224bc296250153aaac87f6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://img-blog.csdnimg.cn/42c67a9b58ec41679dbb06b9788c4054.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16