react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

课程目标

1. 深入理解和掌握事件的冒泡及捕获机制
2. 理解react中的合成事件的本质
3. 在react组件中合理的使用原生事件

知识点

1. 在原生的dom模型上触发的事件会进行事件传递。而所谓的事件传递指的是当在A元素上触发某一事件的时候，B元素如果满足了和A元素一定的关系的话，那么B元素上也可能触发改事件（即使B元素未添加该事件）；

2. dom模型是怎样的呢？如何一组dom元素可以看成一个是一个家族的族谱，那么我们就可以把dom元素之间的关系描述成直系和旁系，如果事件要进行传递的话，dom元素之间必须先满足直系的关系。且是在直系关系中，真正触发的元素的上层的元素才有可能被传递。如下：

<div>
    <h1>hello world</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div>foot</div>
</div>

假如我们用鼠标点击了 <ul><ul/>这个元素的话，那么哪些元素可能也会触发点击事件呢？那么我们可以这样分析：

- 该元素的直系是这样的  `div > ul > li(4个)`
- 直系中的上层元素是 `div` 那么只有div才有可能触发点击事件。

那么，如果点击了 <li>1</li>这个元素呢？

1. 假如点击了 <li>1</li>这个元素的话，根据分析可以知道将要触发事件的元素是 ul和div,那么它俩谁先触发呢？这就要涉及到捕获和冒泡的问题了！
   • 首先，捕获和冒泡决定的是事件传递的顺序，
   • 所有元素的事件默认都是冒泡的，但是在添加事件的时候，可以改变这种特质比如使用 addEventListener这个方法。
   • 那么冒泡的事件是从内向外传递的，捕获是从外向内传递的。
   • 捕获的事件的优先级要大于冒泡的优先级

根据以上的总结，那么点击了<li>1</li>这个元素的话，哪些元素会触发事件，且顺序是怎样的？ div和ul会触发事件，顺序是先ul然后是div

1. 如果某个事件的事件对象阻止了事件传递（ev.stopPropagation()），那么后续的事件就不会再触发了。

2. 所有元素的顶层元素是 document;

3. react中的合成事件就是利用了事件传递的这种特性，所有的元素事件触发，肯定会传递到document身上，react中为了节省性能，我们写在虚拟dom中的事件，其实在编译的时候，都被挂载到了document这个元素上，只是react自己实现了一套事件系统，可以记录真正触发的元素是那个，以及其他相关的信息。

4. 函数的this指向，应该记住如下几点：

   • 函数在调用的时候才能去判断this的指向
   • 函数在调用的时候，我们要判断函数当前是在什么环境下调用的，此时函数指向该环境，比如：

       function add(){
           console.log(this)
       }
   
       cosnt obj = {add: add}
   
       add() // this指向window
       obj.add() // this指向obj这个对象
   
   

    
   • 函数的this在函数调用如下方法的时候可以被改变: bind call apply
   • 以new的方式调用函数的时候，函数的this也会被改变 new 函数名()

5. react中事件的this指向，我们希望this的指向尽可能的指向组件实例。如下：

class Test extends Component {
    constructor() {
        super(arguments);
        this.handleClick2 = this.handleClick2.bind(this);
    }
    handleClick(){
        console.log(this);
        return 'hello world';
    }
    handleClick1 = () => {
        console.log(this);
        return '123';
    }
    handleClick2(){
        console.log(this)
        return '456';
    }
    render() {
        <div>
            <h1>{this.handleClick}</h1>
            <button className="button" onClick={this.onReactClick}>点击</button>
            <button className="button" onClick={() => this.onReactClick()}>点击</button>
            <button className="button" onClick={this.handleClick1}>点击</button>
            <button className="button" onClick={this.handleClick2}>点击</button>
        </div>
    }
}

 

理解上述this的指向以及原理即可，记住一点：当事件触发的时候，对应的事件监听器会触发，要认清楚谁才是事件监听器，而且事件监听器的this指向谁。

#授课思路

#案例和作业