DOM事件高级

最新推荐文章于 2024-10-01 20:12:28 发布

POTATO！

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量715

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_56498069/article/details/131714398

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

此为DOM事件高级内容，若想了解DOM事件基础知识，点击此处👉DOM基础知识大总结

看不到光，就成为光。

DOM事件高级

注册事件（绑定事件）

1、注册事件概述

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和监听注册方式

传统注册方式：

利用on 开头的事件onclick
<button οnclick=“alert(‘hi~’)”></button>
btn.onclick = function() {}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

监听注册方式:

w3c 标准推荐方式
addEventListener() 它是一个方法
IE9 之前的IE 不支持此方法，可使用attachEvent() 代替
特点：同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

2、addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

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

该方法接收三个参数：

type：事件类型字符串，比如click 、mouseover ，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。学完DOM 事件流后，我们再进一步学习

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>传统注册事件</button>
    <button>addEventListener事件监听方式</button>
  </body>
  <script>
    var btns = document.querySelectorAll("button");
    //1.传统方式注册事件
    //特点：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 (只会显示hi 不会显示hello)
    btns[0].onclick = function () {
      alert("hello");
    };
    btns[0].onclick = function () {
      alert("hi");
    };
    //2.addEventListener事件监听方式
    //特点：同一个元素同一个事件可以注册多个监听器（hi1和hi2都会显示）
    btns[1].addEventListener("click", function () {
      alert("hi1");
    });
    btns[1].addEventListener("click", function () {
      alert("hi2");
    });
  </script>
</html>

3、attachEvent 事件监听方式（了解即可）

eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

eventNameWithOn：事件类型字符串，比如onclick 、onmouseover ，这里要带on
callback：事件处理函数，当目标触发事件时回调函数被调用

注意：只有IE8 及早期版本支持，所以仅需了解。

删除事件（解绑事件）

1、删除事件的方式

传统注册方式：

eventTarget.onclick = null;

方法监听注册方式：

①eventTarget.removeEventListener(type, listener[, useCapture]);

②eventTarget.detachEvent(eventNameWithOn, callback);

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>传统方式删除事件</button>
    <button>addEventListener事件监听方式</button>
  </body>
  <script>
    var btns = document.querySelectorAll("button");
    //1.传统方式删除事件
    btns[0].onclick = function () {
      alert("hello");
      btns[0].onclick = null;
    };
    //2.方法监听删除方式
    btns[1].addEventListener("click", fn); //里面的fn后面不需要加小括号
    function fn() {
      alert("hi");
      btns[1].removeEventListener("click", fn);
    }
  </script>
</html>

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给一个div注册了点击事件：

请添加图片描述

DOM 事件流分为3个阶段：

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

事件冒泡：IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM 最顶层节点的过程。
事件捕获：网景最早提出，由DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。

请添加图片描述

注意：

1.JS代码中只能执行捕获或者冒泡其中的一个阶段。

2.onclick和attachEvent只能得到冒泡阶段。

3.addEventListener(type, listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

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

5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave。

6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

示例：

<!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>
      .father {
        overflow: hidden;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        background-color: pink;
        text-align: center;
      }

      .son {
        width: 200px;
        height: 200px;
        margin: 50px;
        background-color: purple;
        line-height: 200px;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div class="father">
      <div class="son">son盒子</div>
    </div>
    <script>
      // 1. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son（先弹出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
      );
      // 2. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document（先弹出son再弹出father再弹出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>
</html>

事件对象

1、什么是事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {})
//这个event就是事件对象，我们还喜欢的写成e或者evt

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

比如：

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

2、事件对象的使用语法

eventTarget.onclick = function(event) {
	//这个event就是事件对象，我们还喜欢的写成e或者evt
}
eventTarget.addEventListener('click', function(event) {
	//这个event就是事件对象，我们还喜欢的写成e或者evt
})

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

3、事件对象的兼容性方案

事件对象本身的获取存在兼容问题：

标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。
在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。

解决: e = e ||window.event;

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

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发时间的对象非标准 ie6-8使用
e.type	返回事件的类型比如click mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该属性阻止默认事件（默认行为）非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	该属性阻止默认事件（默认行为）标准比如不让链接跳转
e.stopPropagation	阻止冒泡标准

e.target和this的区别：

this是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）。
e.target是事件触发的元素。

示例：

<!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>
 
    </style>
</head>
 
<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);
 
        function fn(e) {
            console.log(e.type);
        }
        // 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;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

</html>

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到DOM 最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation()

非标准写法：IE 6-8 利用事件对象cancelBubble 属性

e.cancelBubble = true;

示例：

<!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>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
         
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>
 
<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>
</html>

事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

生活中有如下场景：咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如？

解决方案：快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。

优势：快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。

程序中也有如此场景：

<ul>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
	<li>知否知否，应该有弹框在手</li>
</ul>

点击每个li都会弹出对话框，以前需要给每个li注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。

事件委托：

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

事件委托的原理：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

事件委托的作用：

我们只操作了一次DOM，提高了程序的性能。

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>知否知否，应该有弹框在手</li>
      <li>知否知否，应该有弹框在手</li>
      <li>知否知否，应该有弹框在手</li>
      <li>知否知否，应该有弹框在手</li>
      <li>知否知否，应该有弹框在手</li>
    </ul>
  </body>
  <script>
    var ul = document.querySelector("ul");
    ul.addEventListener("click", function (e) {
      alert("我是弹框");
    });
  </script>
</html>

常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1、常用的鼠标事件

（1）禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单（比如复制）

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

（2）禁止鼠标选中（selectstart开始选中）

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

2、鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+ 支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+ 支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

案例：跟随鼠标的天使

这个天使图片一直跟随鼠标移动

请添加图片描述

①鼠标不断的移动，使用鼠标移动事件：mousemove

②在页面中移动，给document注册事件

③图片要移动距离，而且不占位置，我们使用绝对定位即可

④核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <img src="images/angel.gif" alt="" />
  </body>
  <script>
    var pic = document.querySelector("img");
    document.addEventListener("mousemove", function (e) {
      //mousemove 只要我们鼠标移动就会触发
      //核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片
      var x = e.pageX;
      var y = e.pageY;
      //记得拼接单位！
      pic.style.left = x + "px";
      pic.style.top = y + "px";
    });
  </script>
</html>

请添加图片描述

常用的键盘事件

1、常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发，注意给文档document添加键盘事件。

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下并弹起时触发

注意：

onkeypress和前面2个的区别是，它不识别功能键，比如ctrl，左右箭头，shift 等。
onkeydown和onkeypress同时出现时先执行onkeydown
使用addEventListener不需要加on

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    document.addEventListener("keyup", function () {
      console.log("我弹起了");
    });
    document.addEventListener("keydown", function () {
      console.log("我按下了down");
    });
    document.addEventListener("keypress", function () {
      console.log("我按下了press");
    });
  </script>
</html>

2、ASCII表

请添加图片描述

3、键盘事件对象

键盘事件对象	说明
keyCode	返回该键的ASCII值

注意：onkeydown 和onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

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

当我们按下s键，光标就定位到搜索框

①核心思路：检测用户是否按下了s键，如果按下了s键，就把光标定位到搜索框里

②使用键盘事件对象的keyCode判断用户按下的是否是s键

③搜索框获得焦点：使用js里面的focus()方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
  </body>
  <script>
    var search = document.querySelector("input");
    document.addEventListener("keyup", function (e) {
      if (e.keyCode === 83) {
        search.focus();
      }
    });
  </script>
</html>

案例二：模拟京东快递单号查询

要求：当我们在文本框中输入内容时，文本框上面自动显示大字号的内容。

①快递单号输入内容时，上面的大号字体盒子（con）显示

②表单检测用户输入：给表单添加键盘事件

③同时把快递单号里面的值（value）获取过来给con盒子（innerText）

作为内容

④如果快递单号为空，则隐藏大号字体盒子

<!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, 0.2);
        box-shadow: 0 2px 4px rgba(0, 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>
</html>