码迷,mamicode.com
首页 > 其他好文 > 详细

事件的冒泡和捕获

时间:2019-11-12 09:22:16      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:def   实现   修改   参数   鼠标   red   list   菜单   ||   

DOM事件发生后,会在当前节点和父节点之间传播(propagation)。

事件传播按照传播顺序分为三个阶段。对应Event.prototype.eventPhase的三个状态:

  const phases = {
    1: ‘capture‘, //捕获
    2: ‘target‘,   // 目标
    3: ‘bubble‘   // 冒泡
  }

一. 事件传播阶段

1. 捕获阶段

事件按照window->document(window.document)->html(window.documentElement)

->body(document.body)->父节点->当前节点(target)顺序传递

对应监听函数如下:

element.addEventListener = function(type, function(e) {
   // TODO
}, true);  

2. 目标阶段

当触发对应的节点就是当前监听的节点。

不管addEventListener的第三个参数是true还是false,都会触发执行。

3. 冒泡阶段

事件按照target->父节点-> body->html->document->window顺序传递.

html标签的on[event] 属性和dom对象的on[event]方法都是监听的冒泡阶段的事件。

示例:

<body>
  <div id="container">
    <div id="root">
      <button id="btn">ClickMe</button>
    </div>    
  </div>

<script>  
  const phases = {
    1: ‘capture‘,
    2: ‘target‘,
    3: ‘bubble‘
  }
  container.addEventListener(‘click‘, function(e) {
    console.log(‘container->‘,phases[e.eventPhase]);
  },true);
  container.addEventListener(‘click‘, function(e) {
    console.log(‘container->‘,phases[e.eventPhase]);
  },false);
  root.addEventListener(‘click‘, function(e) {
    console.log(‘root->‘,phases[e.eventPhase]);
  },true);
  root.addEventListener(‘click‘, function(e) {
    console.log(‘root->‘,phases[e.eventPhase]);
  },false);
  btn.addEventListener(‘click‘, function(e) {
    console.log(‘btn->‘,phases[e.eventPhase]);
  }, true)
  btn.addEventListener(‘click‘, function(e) {
    console.log(‘btn->‘,phases[e.eventPhase]);
  }, false)
</script> 

运行结果:

// 当单击button时
container->capture
root->capture
btn->target
btn->target
root->bubble
container->capture

// 当单击root时
container->capture
root->target
root->target
container->bubble

// 当单击container时
container->target
container->target

二. 事件传播的相关方法

1. event.stopPropagation()

停止向上/向下传播;但是还可以监听同一事件。

// 事件传播到 element 元素后,就不再向下传播了
element.addEventListener(‘click‘, function (event) {
  event.stopPropagation();
}, true);

// 事件冒泡到 element 元素后,就不再向上冒泡了
element.addEventListener(‘click‘, function (event) {
  event.stopPropagation();
}, false);

示例:

技术图片
  <div id="container">
    <div id="root">
      <button id="btn">ClickMe</button>
    </div>    
  </div>
<script>  
  const phases = {
    1: ‘capture‘,
    2: ‘target‘,
    3: ‘bubble‘
  }
  container.addEventListener(‘click‘, function(e) {
    console.log(‘container->‘,phases[e.eventPhase]);
  },true);
  container.addEventListener(‘click‘, function(e) {
    console.log(‘container->‘,phases[e.eventPhase]);
  },false);
  root.addEventListener(‘click‘, function(e) {
    event.stopPropagation(); // 停止传播
    console.log(‘root->‘,phases[e.eventPhase]);
  },true);
  root.addEventListener(‘click‘, function(e) {
    console.log(‘root->‘,phases[e.eventPhase]);
  },false);
  btn.addEventListener(‘click‘, function(e) {
    console.log(‘btn->‘,phases[e.eventPhase]);
  }, true)
  btn.addEventListener(‘click‘, function(e) {
    console.log(‘btn->‘,phases[e.eventPhase]);
  }, false)
</script> 
View Code

运行结果如下:

// 单击btn
container->capture
root->capture

// 单击root
container->capture
root->target
root->target  // 不会拦截目标节点的事件多次触发

2. event.stopImmediatePropagation()

停止事件传播,并且停止事件再次监听同样的事件

element.addEventListener(‘click‘, function (event) {
  event.stopImmediatePropagation();
  console.log(1);
});

element.addEventListener(‘click‘, function(event) {
  // 不会被触发
  console.log(2);
});

示例

技术图片
<body>
  <div id="container">
    <div id="root">
      <button id="btn">ClickMe</button>
    </div>    
  </div>
<script>  
  const phases = {
    1: ‘capture‘,
    2: ‘target‘,
    3: ‘bubble‘
  }
  container.addEventListener(‘click‘, function(e) {
    console.log(‘container->‘,phases[e.eventPhase]);
  },true);
  container.addEventListener(‘click‘, function(e) {
    console.log(‘container->‘,phases[e.eventPhase]);
  },false);
  root.addEventListener(‘click‘, function(e) {
    event.stopImmediatePropagation(); // 立即停止传播
    console.log(‘root->‘,phases[e.eventPhase]);
  },true);
  root.addEventListener(‘click‘, function(e) {
    console.log(‘root->‘,phases[e.eventPhase]);
  },false);
  btn.addEventListener(‘click‘, function(e) {
    console.log(‘btn->‘,phases[e.eventPhase]);
  }, true)
  btn.addEventListener(‘click‘, function(e) {
    console.log(‘btn->‘,phases[e.eventPhase]);
  }, false)
</script> 
View Code

运行结果如下:

// 单击btn
container->capture
root->capture

//单击root
container->capture
root->target //目标节点只能触发一次事件

3. event.preventDefault()

取消浏览器对当前事件的默认行为。该方法有效前提是事件的cancelable属性为true。

所有浏览器子有的一些事件(click,mouseover等)该属性都是true;

自定义的事件默认cancelable属性为false,需要手动设置为true。

const event = new Event(‘myevent‘, {cancelable: true})

事件的默认行为常见的有:

1)向input键入内容,会在文本框中显示输入的数据;

    通过keypress事件监听可以阻止文本输入,使无法输入。

2)单击单选框/复选框,会出现选中效果;

    通过click事件监听可以取消选中行为,使无法选中。

3)单击<a>标签的链接,会出现跳转;

    通过click事件监听可以取消跳转行为,使无法跳转。

4)空格键使页码向下滚动;

示例:

技术图片
<!--
 * @Author: LyraLee
 * @Date: 2019-10-30 08:53:28
 * @LastEditTime: 2019-11-11 18:48:19
 * @Description: preventDefault()
 -->
<!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>串行异步操作</title>
  <style>
    body{
      height: 2000px;
    }
  </style>
</head>
<body>
  <input id="checkboxElement" type="checkbox"/>
  <a id="toBaidu" href="http://www.baidu.com">跳转到百度</a>
  <input id="inputElement" type="text"/>
<script>  
  checkboxElement.addEventListener(‘click‘, function(e) {
    e.preventDefault(); //无法选中
  })  
  toBaidu.addEventListener(‘click‘, function(e) {
    e.preventDefault(); // 无法跳转
  })
  inputElement.addEventListener(‘keypress‘, function(e) {
    console.log(e);
    if (e.charCode < 97 || e.charCode > 122) { 
      e.preventDefault();//键入的字符只能是a-z
      alert(‘only lowercase letters‘);
    }
  })
  document.body.addEventListener(‘keypress‘, function(e) {
    if (e.charCode === 32) {// 是空格键
      e.preventDefault(); //阻止空格后页码向下滑动
    }
  })
</script> 
</body>
</html>
View Code

4. event.composedPath()

返回一个数组,成员是目标节点到window节点的冒泡的所有路径。

示例:

<body>
  <div id="container">
    <div id="second">
      <div id=‘bottom‘>
        ClickMe
      </div>
    </div>
  </div>
<script>  
  bottom.addEventListener(‘click‘, function(e) {
    console.log(e.composedPath()); 
    //[div#bottom, div#second, div#container, body, html, document, Window]
  },false)
</script> 

三. 事件传播相关属性

1. 只读属性

1. event.eventBubbles

返回值:布尔值;表示是否可以冒泡

浏览器原生事件默认都是true,可以冒泡;

通过Event构造函数,自定义的事件默认为false,不能冒泡,需要手动设置。

const event = new Event(‘lyra‘, {bubbles: true})

2. event.eventPhase

返回值:0-3的数字;表示当前当前事件传播所处的阶段。

0: 事件未发生
1: 事件捕获阶段
2: 目标阶段
3: 事件冒泡阶段

3. event.cancelable

返回值:布尔值;表示是否可以取消默认行为。

浏览器原生事件默认都是true,可以取消,可以调用event.preventDefault()方法;

通过Event构造函数,自定义的事件默认false, 需要手动设置后才能调用event.preventDefault();

const event = new Event(‘lyra‘, { cancelable: true})

应用:

可以用来作为使用preventDefault()方法的前置条件

  <input id="enter" type="text" />
  <script>
    enter.addEventListener(‘keypress‘, function(e) {
      if(e.cancelable) {
        e.preventDefault();
      }else {
console.warn(‘can not be cancelled‘)
} })
</script>

4. event.defaultPrevented

返回值: 布尔值;表示是否已经调用过preventDefault()方法

5.event.currentTarget

返回值:监听事件绑定的元素;相当于this; 不会变化

6.event.target

返回值:事件当前作用的元素;随触发节点实时变化;

7.event.type

返回值:事件类型

8.event.timeStamp

返回值: 毫秒时间,从网页加载完成到事件触发的时间;表示时间戳

应用:

可以通过两次mousemove触发的时间戳的差值,来计算鼠标移动速度。

技术图片
var previousX;
var previousY;
var previousT;

window.addEventListener(‘mousemove‘, function(event) {
  if (
    previousX !== undefined &&
    previousY !== undefined &&
    previousT !== undefined
  ) {
    var deltaX = event.screenX - previousX;
    var deltaY = event.screenY - previousY;
    var deltaD = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

    var deltaT = event.timeStamp - previousT;
    console.log(deltaD / deltaT * 1000);
  }

  previousX = event.screenX;
  previousY = event.screenY;
  previousT = event.timeStamp;
});
View Code

9.event.isTrusted

返回值:布尔值;表示是否是用户行为触发的,而不是用dispatch方法触发的。

一般原生事件返回true;自定义事件返回false。

10. event.detail

返回值: 事件相关信息;自定义事件中,返回用户自定义的数据

如:click事件的点击次数;滚轮的滚动距离

container.addEventListener(‘click‘, function(e) {
  console.log(‘container->‘,e.detail);
},true);
// 如果单击,返回1
// 如果双击,返回2
// 如果N次连续点击,返回N

应用:

当某个节点同时绑定单击事件和双击事件时,可以使用该属性。

2. 可写属性

1. event.cancelBubble

如果设为true, 可以阻止事件传播;不止阻止冒泡,也会阻止捕获;

event.cancelBubble = true; 
// 相当于
event.stopPropagation();

四.应用

1.多个字节点需要添加监听事件时

  <!--实现鼠标悬浮后,背景色修改为li便签中的颜色-->
  <ul id="container">
    <li>red</li>
    <li>yellow</li>
    <li>purple</li>
    <li>pink</li>
  </ul>
  <script>  
    // 该功能应该将监听事件添加到父节点上,否则需要添加四个监听事件
    container.addEventListener(‘mouseover‘, function(e) {
      if (e.target.tagName.toLowerCase() === ‘li‘) {
        e.target.style.backgroundColor = e.target.innerHTML;
      } 
    })
    container.addEventListener(‘mouseout‘, function(e) { // 不能用mouseleave
      if (e.target.tagName.toLowerCase() === ‘li‘) {
        console.log(‘innner‘);
        e.target.style.backgroundColor = ‘#fff‘;
      } 
    })
  </script> 

2. 父子节点同时添加监听事件

实际工作中,对于有复杂操作的地方,经常出现父子字节同时添加同一监听事件,但是实现不同功能的情况。

示例:

要求单击某菜单选中该菜单,将其id赋值给一个变量;菜单右侧有个提示图标,单击弹出提示框。

要求单击提示图标的时候,不选中该菜单。

分析:

要求子节点的事件不触发父节点的监听函数;使用stopPropagation();

  <ul id="container">
    <li id="menu1"><span>菜单1...</span><span class="arrow">??</span></li>
  </ul>
  <script>  
    let checked;
    menu1.addEventListener(‘click‘, function(e) {
      console.log(this.id);
      checked = this.id;
    })
    const arrow = document.querySelector(‘.arrow‘);
    arrow.onclick = function(e) { // 相当于addEventListen(‘click‘,fn,false)
      e.stopPropagation(); //阻止冒泡,触发父节点监听事件
      console.log(‘--arror---‘)
    }
  </script> 

 

事件的冒泡和捕获

标签:def   实现   修改   参数   鼠标   red   list   菜单   ||   

原文地址:https://www.cnblogs.com/lyraLee/p/11839619.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!