jsおよびhtmlのonclickバインディング関数に括弧を追加するかどうか

最初に2つの違いについて話させてください

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>
    )
}

これは上記とは少し異なります。この時点でonclickが関数に渡され、括弧が追加されると、ページがレンダリングされるときに関数がトリガーされ、ボタンをクリックした効果が失われます。試してみることができます私はそれを次のように理解しています:それはjsxの文法形式であるため、引き続きjsモードで実行されるため、イベントを上記のjsコードにバインドする方法は同じですが、関数アドレスのみが渡されました。

おすすめ

転載: blog.csdn.net/qq_44606064/article/details/109017001