Javascript -DOM 事件机制

超、凢脫俗 2024-04-08 11:53 91阅读 0赞

**目录**

事件组成

执行事件的步骤：

事件对象

事件对象常用的属性

常见的鼠标事件

常见键盘事件

焦点事件-FocusEvent

用户界面事件-UIEvent

常见的表单事件

DOM 2 级事件监听

--------------------

##  ##

## 事件组成 ##

事件源 事件类型 事件处理程序 我们也称为事件三要素

1.事件源：事件被触发的对象 -->按钮对象 ...

2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…

3.事件处理程序：通过一个函数赋值的方式

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

1.获取事件源

2.注册事件（绑定事件）

3.采用函数赋值形式添加事件处理程序

### 事件对象 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>event</td> 
   <td> <p>返回事件的状态</p> </td> 
  </tr> 
 </tbody> 
</table>

## 事件对象常用的属性 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>返回当前触发事件的元素</td> 
  </tr> 
  <tr> 
   <td>currentTarget</td> 
   <td>返回监听事件的元素</td> 
  </tr> 
  <tr> 
   <td>clientX</td> 
   <td>返回鼠标指针相对于浏览器的水平坐标</td> 
  </tr> 
  <tr> 
   <td>clientY</td> 
   <td>返回鼠标指针相对于浏览器的垂直坐标</td> 
  </tr> 
  <tr> 
   <td>pageX</td> 
   <td>返回鼠标指针相对于整个网页的水平坐标</td> 
  </tr> 
  <tr> 
   <td>pageY</td> 
   <td>返回鼠标指针相对于整个网页的垂直坐标</td> 
  </tr> 
  <tr> 
   <td>offsetX</td> 
   <td>返回鼠标指针相对于事件源元素的水平坐标</td> 
  </tr> 
  <tr> 
   <td>offsetY</td> 
   <td>返回鼠标指针相对于事件源元素的垂直坐标</td> 
  </tr> 
  <tr> 
   <td>charCode</td> 
   <td>通常用于 onkeypress 事件，返回用户按下按键对应的码值，区分大小写<br> 示例：按下键盘 a，对应的值是 97， 按下键盘 A，对应的值是 65</td> 
  </tr> 
  <tr> 
   <td>keyCode</td> 
   <td>通常用于 onkeydown 和 onkeyup 事件，返回用户按下按键的码值，不区分大小写。<br> 示例：按下键盘 a 或 A， 对应的值是 65</td> 
  </tr> 
 </tbody> 
</table>

### 常见的鼠标事件 ###

> DOM 0 级事件监听方式：on + 事件名

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td>监听鼠标单击事件</td> 
  </tr> 
  <tr> 
   <td>ondblclick</td> 
   <td>监听鼠标双击事件</td> 
  </tr> 
  <tr> 
   <td>onmousedown</td> 
   <td>监听鼠标按下事件</td> 
  </tr> 
  <tr> 
   <td>onmouseup</td> 
   <td>监听鼠标松开事件</td> 
  </tr> 
  <tr> 
   <td>onmousemove</td> 
   <td>监听鼠标移动事件</td> 
  </tr> 
  <tr> 
   <td>onmouseenter</td> 
   <td>监听鼠标移入事件，不存在事件冒泡</td> 
  </tr> 
  <tr> 
   <td>onmouseleave</td> 
   <td>监听鼠标离开事件，不存在事件冒泡</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>监听鼠标移入事件，存在事件冒泡</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>监听鼠标离开事件，存在事件冒泡</td> 
  </tr> 
  <tr> 
   <td>onmousewheel</td> 
   <td>监听鼠标滚轮事件</td> 
  </tr> 
 </tbody> 
</table>

<!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>
        #d1{
          width: 300px;
          height: 300px;
          background-color: aqua;
        }
      </style>
    </head>
    <body>
      <div id="d1"></div>
      <script>
        var d1 = document.getElementById('d1');
        // 单击事件
        d1.onclick = function (event) {
          console.log('click');
          console.log(event);
        }
        // 双击事件
        d1.ondblclick = function () {
          console.log('dblclick');
        }
        // 鼠标移入事件
        d1.onmouseenter = function () {
          console.log('mouseenter');
        }
        // 鼠标移出事件
        d1.onmouseleave = function () {
          console.log('mouseleave');
        }
        // 鼠标在元素内部移动时触发
        d1.onmousemove = function () {
          console.log('mousemove');
        }
      </script>
    </body>
    </html>

## 常见键盘事件 ##

> DOM 0 级事件监听方式：on + 事件名

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>用户按下键盘上某个键时触发，而且持续按住会重复触发。</td> 
  </tr> 
  <tr> 
   <td>onkeypress</td> 
   <td>用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件。</td> 
  </tr> 
  <tr> 
   <td>keyup</td> 
   <td>用户释放键盘上某个键时触发</td> 
  </tr> 
 </tbody> 
</table>

## 焦点事件-FocusEvent ##

> DOM 0 级事件监听方式：on + 事件名

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>当元素是焦点时触发。这个事件不冒泡，所有浏览器都支持</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>当元素获得焦点时触发。事件不冒泡，所有的浏览器都支持</td> 
  </tr> 
  <tr> 
   <td>focusin</td> 
   <td>当元素获得焦点时触发，这个事件是focus的冒泡版</td> 
  </tr> 
  <tr> 
   <td>focusout</td> 
   <td>当元素失去焦点时触发。这个事件时blur的冒泡版</td> 
  </tr> 
 </tbody> 
</table>

<input type="text" id="inp1">
    <script>
      var inp1 = document.getElementById('inp1');
      // 失去焦点触发
      inp1.onblur = function () {
        console.log('失去焦点');
        console.log(this.value);
      }
      // 获得焦点触发
      inp1.onfocus = function () {
        console.log('获得焦点');
      }
    </script>

## 用户界面事件-UIEvent ##

> DOM 0 级事件监听方式：on + 事件名

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>load</td> 
   <td>监听页面或图像加载完成事件</td> 
  </tr> 
  <tr> 
   <td>onunload</td> 
   <td>监听用户退出页面事件</td> 
  </tr> 
  <tr> 
   <td>select</td> 
   <td>在文本框（&lt;input&gt;或 textarea）上当用户<span style="color:#fe2c24;">选择</span>了一个或多个字符时触发。</td> 
  </tr> 
  <tr> 
   <td> <p>resize</p> </td> 
   <td>在 window 或窗格上当窗口或窗格被缩放时触发。</td> 
  </tr> 
  <tr> 
   <td> <p>scroll</p> </td> 
   <td> <p>当用户滚动包含滚动条的元素时在元素上触发。&lt;body&gt;元素包含已加载页面的滚动条。</p> <p>大多数 HTML 事件与 window 对象和表单控件有关。</p> </td> 
  </tr> 
 </tbody> 
</table>

### 常见的表单事件 ###

> DOM 0 级事件监听方式：on + 事件名

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>onchange</td> 
   <td>当表单元素的内容发生变化所触发的事件</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>当元素获得焦点时触发的事件，例如：tab 键或者点击鼠标</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>当元素失去焦点时触发的事件</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>当提交表单时触发的事件</td> 
  </tr> 
  <tr> 
   <td>onreset</td> 
   <td>当重置表单时触发的事件</td> 
  </tr> 
 </tbody> 
</table>

### DOM 2 级事件监听 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>名称</td> 
   <td>描述</td> 
  </tr> 
  <tr> 
   <td>addEventListener()</td> 
   <td>监听事件并添加到指定的元素<br> 1、方法中接收三个参数如下：<br> （1）第一个参数是字符串，表示要监听的事件名，必须传入<br> （2）第二个参数是函数，指定事件触发时要执行的函数，必须传入<br> （3）第二个参数是布尔值，指定事件是否在捕获或冒泡阶段执行，可选<br> 2、示例：oBox.addEventListener('click', function() {}, true) 在捕获阶段监听 oBox 的点击事件</td> 
  </tr> 
 </tbody> 
</table>