769-772 --- DOM事件高级（事件对象的常见属性和方法，阻止事件冒泡，事件委托）

香甜的甲基橙

已于 2022-05-02 22:22:19 修改

阅读量323

点赞数 1

分类专栏： JavaScript web前端基础学习笔记文章标签： javascript 前端 html

于 2022-05-01 21:28:53 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/124532970

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

本文介绍了JavaScript中的事件处理高级概念，包括事件对象的常用属性和方法，如`target`、`srcElement`、`type`、`preventDefault()`和`stopPropagation()`。此外，还讲解了阻止事件冒泡的两种方式及其兼容性解决方案，并探讨了事件委托的优势，展示了如何通过给父元素添加事件监听器来简化和优化代码，提高程序性能。

摘要由CSDN通过智能技术生成

文章目录

事件高级

事件高级

4 事件对象

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

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

eg. 13-常见事件对象属性和方法.html

<!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>
  <div>123</div>
  <ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</li>
  </ul>

  <script>
    // 常见事件对象的属性和方法
    // 1 e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）
    // 区别： e.target 点击了哪个元素  就返回那个元素 this 那个元素绑定了这个点击事件  那么就返回谁
    var div = document.querySelector('div');
    div.addEventListener('click',function(e) {
      console.log(e.target);
      console.log(this);
    })

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

    // 兼容性（了解即可）
    // div.onclick = function(e) {
    //   e = e || window.event;
    //   var target = e.target || e.srcElement;
    //   console.log(target);
    // }

    // 2 了解 跟this 有个非常相似的属性  currentTarget   ie678不认识

  </script>
</body>
</html>

eg.14-阻止默认方式.html

<!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>
  <div>123</div>
  <a href="https://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);       // 鼠标点击123可以输出click
    div.addEventListener('mouseover',fn);   // 鼠标移动到123可以输出mouseover
    div.addEventListener('mouseout',fn);    // 鼠标离开123可以输出mouseout

    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>

5 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

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

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

阻止事件冒泡

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

<!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>
    .son {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    .father {
      width: 300px;
      height: 300px;
      background-color: blue;
    }
  </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>

5.2 阻止事件冒泡的兼容性解决方案（了解）

if(e && e. stopPropagation) {
	e. stopPropagation() ;
}else{
	window.event.cance1Bubble = true;

6 事件委托（代理、委托）

事件冒泡本身的特性 , 会带来的坏处 , 也会**带来的好处 **, 需要我们灵活掌握。生活中有如下场景:
咱们班有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 ,提高了程序的性能。

eg. 16-事件委托.html

<!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>
  <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';   // 点击li 背景色变色
    })
  </script>
</body>
</html>