| 一文彻底搞懂：前端事件流机制 | 您所在的位置：网站首页 › dom事件流过程 › 一文彻底搞懂：前端事件流机制 |
一文彻底搞懂：前端事件流机制
|
前言
本文介绍了浏览器的事件流机制，通过阅读本文，你讲了解到： 如果给dom添加事件响应。 了解元素的默认行为。 事件的冒泡与捕获机制。 事件委托。 React 事件机制原理。 给元素添加事件的几种方式给元素添加事件通常用三种方式： 行内事件。 通过js操作dom属性。 通过给dom绑定监听事件。 行内事件通过给html标签添加onclick 属性来添加事件，如下代码：可以给直接写代码，或者写方法名+() Document 点击我 click me function click_me() { alert('2222222'); } 复制代码 通过js添加属性 Document 点击我 const btn = document.querySelector('button'); btn.onclick = function() { alert('hello javascript'); } 复制代码 通过监听的方式通过addEventListener() 和removeEventListener() 两个方法对事件添加和移除监听。 Document 点击我 移除监听 const btn = document.querySelector('button'); function click_me() { alert('hello javascript'); } btn.addEventListener('click', click_me); function click_me2() { alert('hello javascript--2'); } btn.addEventListener('click', click_me2); const btn2 = document.getElementById('remove_lister') function remove_lister() { btn.removeEventListener('click', click_me); } btn2.addEventListener('click', remove_lister); 复制代码可以给同一个监听器注册多个处理器，click_me2 和 click_me 都会响应。通过第二种方式不能实现这种效果。 元素的默认行为某些html标签有默认值的响应行为，如form表单，点击提交按钮之后会跳转到指定的界面。我们可以使用event的preventDefault()方法，阻止默认行为。 下面代码，如果姓名或年龄为空就会阻止提交行为。 Document 姓名: 年龄: const form = document.querySelector('form'); const name = document.getElementById('name'); const age = document.getElementById('age'); const submit = document.getElementById('submit'); const para = document.querySelector('p'); form.onsubmit = function(e) { if (age.value === '' || age.value === '') { e.preventDefault(); para.textContent = '姓名和年龄都不能为空'; } } 复制代码兼容IEe.returnValue = false; 事件冒泡及捕获事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。 如下代码,我们添加了2个div, class为parent的div是class为child的div的父节点。分别给他们添加onclick事件。 Document .parent { width: 300px; height: 300px; font-size: 30px; background-color: blue; } .child { width: 150px; height: 150px; font-size: 30px; background-color: green; } 1 2 const parent = document.querySelector('.parent') const child = document.querySelector('.child') parent.onclick = function() { alert('parent-clicked'); } child.onclick = function() { alert('child-clicked'); } 复制代码效果如下：
但如果我们将事件的添加方式改为下面这种方式：通过addEventListener添加事件，并将第三个参数改为true，将事件的响应机制改为捕获。 function parentClicked() { alert('parent-clicked'); } function childClicked() { alert('child-clicked'); } parent.addEventListener('click', parentClicked, true) child.addEventListener('click', childClicked, true) 复制代码在这种情况下，点击clild会先响应parent的事件，再响应clild的事件。这是因为事件的捕获机制导致的。 阻止冒泡行为, 调用event对象的stopPropagation()方法。 总结： 冒泡机制： 从被点击元素开始 检查元素是否有事件的处理方法： a. 如果有对应的事件方法，就调用事件方法，然后进入步骤3 b. 如果没有事件方法，进入步骤3 找到元素的父元素，然后对父元素进行步骤2的操作。直到html根节点。捕获机制： 从html元素开始 检查元素是否有事件的处理方法： a. 如果有对应的事件方法，就调用事件方法，然后进入步骤3(叔叔节点也会响应事件) b. 如果没有事件方法，进入步骤3 找到元素的子元素，然后对子元素进行步骤2的操作。直到到达实际点击的元素。 事件委托事件委托是一种代码设计方式，如果你想要在大量子元素中单击任何一个都可以运行同一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。 Document Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 document.getElementById("parent-list").addEventListener("click", function(e) { if(e.target && e.target.nodeName == "LI") { console.log("List item ", e.target.id.replace("post-", ""), " was clicked!"); } }); 复制代码 React 事件机制 合成事件SyntheticEvent 是浏览器的原生事件的跨浏览器包装。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。React中它作为实例参数将被传递给你的事件处理函数。 当你需要使用浏览器的底层事件时，只需要使用 nativeEvent 属性来获取即可。 合成事件与浏览器的原生事件不同，也不会直接映射到原生事件。 React事件分类React中将事件分为三种类型，分别是： DiscreteEvent：click，blur,focus,submit,tuchStart 等，优先级是 0。 UserBlockingEvent：touchMove,mouseMove,scroll,drag,dragOver 等，这些事件会阻塞用户的交互，优先级是 1。 ContinuousEvent：load,error,loadStart,abort,animationend 等，优先级是 2，这个优先级最高，不会被打断。React17之前事件与React17之后绑定差异
17之前事件是绑定到document上的。17之后是绑定到根标签上的, 即下面代码中的第二个参数：document.getElementById('root') ReactDOM.render( , document.getElementById('root') ); 复制代码注意：dom事件可以阻止合成事件的冒泡，合成事件不能阻止dom事件冒泡 import React, { PureComponent } from 'react' import './style.css' export default class EventTest extends PureComponent { constructor(props) { super(props); this.grandClicked = this.grandClicked.bind(this) this.fatherClicked = this.fatherClicked.bind(this) this.sonClicked = this.sonClicked.bind(this) this.sonClicked1 = this.sonClicked1.bind(this) } componentDidMount() { const grand = document.querySelector('.grand') const father = document.querySelector('.father') const son = document.querySelector('.son') // grand.onclick = function() { // console.log('dom-grand') // } // father.onclick = function() { // console.log('dom-father') // } // son.onclick = function(e) { // console.log('dom-son') // //会阻止合成事件以及dom冒泡 // e.stopPropagation(); // } son.addEventListener('click', this.sonClicked1) father.addEventListener('click', this.fatherClicked) grand.addEventListener('click', this.grandClicked) } grandClicked(e) { console.log('grand'); // e.stopPropagation() } fatherClicked(e) { console.log('father'); // e.stopPropagation() } sonClicked(e) { console.log('son'); //会阻止合成事件的冒泡 e.stopPropagation() } sonClicked1(e) { console.log('dom-son'); //会阻止合成事件以及dom冒泡 // e.stopPropagation() } render() { return ( ) } } 复制代码 参考事件介绍 React17更新公告 点赞，关注 是你对我最大的鼓励。 更多优质内容，请扫码关注公众号：RiverLi。 |
【本文地址】