前言:事件绑定是我们编写代码中非常不起眼但是必不可少的一环,也非常简单.我们现在就来系统的归纳一下在原生HTML和Vue还有React中都是怎么去使用的(主要是点击事件)

HTML(原生js)的事件绑定

我们可以在标签上定义点击事件,例如

 <button onclick="alert(123)">点击触发</button>

或者使用js

图1

图2

这里我们发现一个细节,图1我们触发的时候函数是带了()的,但是图二没带.这是因为在js中如果带()会直接调用这个函数,返回的结果是undefined.但是为什么图一可以呢?这是因为解析的时候会将html标签上的事件调用解析成如下的形式

[具体可以参考](浏览器事件简介 (javascript.info))

Vue中的事件绑定

Vue中的事件绑定比较简单,需要注意的是Vue可以在模板的事件内带()并且直接传值给函数,应该是Vue对其做了处理也可以放在回调函数中甚至可以直接在""直接写逻辑代码.具体可以看官网案例

vue还提供了强大的修饰符来处理一些需求,比如禁止冒泡等等,还有就是要注意需要访问原生dom对象的点击事件需要使用.native修饰符

React中的事件绑定

React的事件绑定其实就是原生js的事件绑定,我们有非常多的方法对其处理. 必须传递事件处理函数，而非函数调用！ onClick={handleClick} ，不是 onClick={handleClick()} 如果需要传参我们可以使用箭头函数onClick={()=>handleClick(111)}

如果是类组件要注意this的指向问题,解决方案主要有bind绑定this还有箭头函数(要么直接在事件后面使用箭头函数,要么就是绑定的函数本身就使用了箭头函数)

        let btn = document.querySelector("button")
        btn.addEventListener("click", function () {
            console.log(this)//指向button按钮如果是React就会指向undefined
        })
        //函数封装出去
        let btn = document.querySelector("button")
        function handlerClick() {
            console.log(this); //指向button
        }
        btn.addEventListener("click",handlerClick)

        //使用箭头函数1
        let btn = document.querySelector("button")
        btn.addEventListener("click",()=>{
            console.log(this)//指向全局
        })

        //使用箭头函数2
        let btn = document.querySelector("button")
        let handlerClick = () => {
            console.log(this); //同样指向全局
        }
        btn.addEventListener("click", handlerClick)

        //函数抽离出去
        let btn = document.querySelector("button")
        function handlerClick(value) {
            console.log(this, value); //同样指向全局且被传参
        }
        btn.addEventListener("click", () => handlerClick(2587))
        //案例2
        let btn = document.querySelector("button")
        let handlerClick = (value) => {
            console.log(this, value); //同样指向全局且被传参
        }
        btn.addEventListener("click", () => handlerClick(123))

总之就是保证两点! 1:注意是处理函数而不是函数的调用,点击后会帮你调用. 2:如果是类组件要注意this的指向问题,最好就是使用箭头函数的特性来避免这些副作用

事件绑定那些事

HTML(原生js)的事件绑定

Vue中的事件绑定

React中的事件绑定