js中和html中onclick绑定函数要不要加括号的问题

最新推荐文章于 2023-02-15 17:26:45 发布

编程小飞

最新推荐文章于 2023-02-15 17:26:45 发布

阅读量2.3k

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/qq_44606064/article/details/109017001

版权

先说两者的区别在哪里

1.函数名其实就是指向函数体的指针
2.不加括号，可以认为是查看该函数的完整信息，
3.不加括号传参，相当于传入函数整体
4.加括号表示立即调用（执行）这个函数里面的代码（花括号部分的代码）
看下面代码就很好理解了

<body>
<!--在html标签中是作为属性添加进去的,所以必须加括号,理解不了没关系,先看下面
对比一下就懂了-->
   <button onclick="onclick1()">btn1</button>
   <button id="btn">btn2</button>
</body>
<script>
   function onclick1() {
      alert("这是btn1的弹窗")
   }
   function onclick2() {
      alert("这是btn2的弹窗")
   }
   //这个代码是正确的,在给btn2进行绑定事件的时候传入一个函数地址,当触发事件执行函数体,而不是进行事件绑定的时候执行函数
   document.getElementById("btn").addEventListener("click",onclick2)
   //下面代码错误的
   //如果换成下面代码,就会在页面渲染的的时候执行弹窗,因为传入的是立即执行函数的结果
   //document.getElementById("btn").addEventListener("click",onclick2())
</script>

在React项目中的事件绑定

onchange=()=>{
    this.props.store.dispatch(increasefunc(2))
}
add_name=()=>{
    this.props.store.dispatch(addnamefuc("feifei"))
}
render() {
    const {count} = this.props.store.getState().counterReducer
    const {name} = this.props.store.getState().nameReducer
    //console.log(this.props.store.getState().counterReducer)
    return(
        <div>
            <p>{name}点击了{count}次</p>
            <button onClick={this.onchange}>click</button>
            <button onClick={this.add_name}>换名字</button>
        </div>
    )
}