React事件处理和原生JS事件处理

1.原生JS

事件触发调用有三种方式：

1. on[event]事件属性，手动触发 ❗️on[event]事件是Window对象上的方法。

2. on[event]事件属性，通过htmlElement.click()模拟触发

3. addEventListener监听事件，手动触发

this指向

如果onevent事件属性定义的时候将this作为参数，在函数中获取到该参数是DOM对象。用该方法可以获取当前DOM。
在方法中直接访问this, this指向当前函数所在的作用域。或者说调用函数的对象。

<body>

    <input type="checkbox" id="root" onmouseover="toclick(this,event)" onclick="add()" />

    <button onclick="a.test(this)">Test</button>

    <script>

        function toclick(argThis,e) {

            console.log(e); // event对象；必须手动传参

            console.log(argThis); // 传递过来的this指向DOM元素，可以通过这个方法调用自身

            const rootEle = argThis; // 等于document.getElementById('root');

            rootEle.click(); // 里面没有参数，只是触发

        }

        function add(arg) {

            console.log(arg);// undefined 说明事件想要获取event等参数必须要传参

            console.log(this); // window  不管是mouseover里面通过rootEle触发还是直接单击触发，相当于直接运行add()

        }

        const a = {

            test(argThis) {

                console.log(argThis); // dom元素

                console.log(this); // this指向对象a

            }

        }

        const rootEle = document.getElementById("root");

        rootEle.addEventListener('click', function() {

            console.log('listen===',this); // DOM元素；指向调用监听器的对象

        })

     </script>

</body>

2. ReactJS

事件触发调用方式：

1. 事件属性。on[Event]触发，注意ReactJS中使用小驼峰命名，这点和原生JS不同。

2. click()模拟触发。注意模拟触发和事件监听都要求DOM加载完毕。

3. 监听事件触发。addEventListener

this指向：

React中this指向一般都期望指向当前组件，如果不绑定this，this一般等于undefined。

绑定this的方法有三种：

箭头函数；本质上是在构造函数中进行了绑定；
在事件属性定义的时候使用.bind(this, ...params)（不推荐，因为每次运行，会生成一个新函数）
在构造函数中手动绑定，只需要绑定一次。

3. 事件对象

原生js中事件对象是原生事件对象，它存在浏览器兼容性，需要用户自己处理各浏览器兼容问题。

ReactJS中的事件对象是React将原生事件对象(event)进行了跨浏览器包装过的合成事件(SyntheticEvent)。

合成事件对象的特点：

1）在事件处理函数中，可以正常访问事件属性。

2）为了性能考虑，执行完后，合成事件的事件属性将不能再访问。

异步处理函数中，访问不到合成事件的属性。

因为执行异步函数的时候，事件处理函数的上下文消失。

示例：

handleClick = (event) => {

    console.log(event); // => nullified object

    console.log(event.type); // => "click"

    const eventType = event.type; // => "click"

    setTimeout(function() {// 异步函数中复用

      console.log(event.type); // => null

      console.log(eventType); // => "click"

    }, 0);

    // 不起作用，this.state.clickEvent 的值将会只包含 null

    this.setState({clickEvent: event});

    // 你仍然可以导出事件属性

    this.setState({eventType: event.type});

  }

想要在异步函数中继续使event属性可访问，需要使用event.persist();

 handleClick = (event) => {

    event.persist();

    console.log(event); // => nullified object

    console.log(event.type); // => "click"

    const eventType = event.type; // => "click"

    setTimeout(function() {// 异步函数中复用

      console.log(event.type); // => "click"

      console.log(eventType); // => "click"

    }, 0);

    this.setState({clickEvent: event});

    this.setState({eventType: event.type});

  }