js代码理解

Question

问题描述

一个简单的点击按钮触发弹窗功能，代码概念细节有点混淆

相关代码

// 方式一：

<script>
  function f1() {
    alert("这是一个对话框");
  }
</script>
<input type="button" value="显示效果" onclick="f1()"/>  <!--这里的f1()为什么可以加括号？-->

方式二：

<input type="button" value="开始分离代码" id="btn" />

<script>
  function f2() {
    alert("开始分离html和js代码");
  }
  function f2() {
    alert("嘎嘎");
  }
  var btnObj=document.getElementById("btn");
  //为按钮注册点击事件
  btnObj.onclick=f2;//不能加括号，加括号直接就调用
</script>

请问为什么方式一里的onclick属性后面的f1要加括号，而方式二中的f2后面就不能加括号？？？

Answer 1

dom上的事件绑定是点击时触发 ,只有onclick事件触发的时候才会去查询按钮绑定的事件,然后触发,这里的等号赋值只是赋值一个引用地址. 而js中,函数加()则代表函数调用,直接返回执行结果的.

Answer 2

onclick="f1()" 相当于下面的代码：

//浏览器为你包装了一层
onclick=function(){
    fn();
}

而 btnObj.onclick=f2; 是一个赋值表达式

Answer 3

加括号代表调用，执行这个方法,
不加括号目的是引用,代表把这个函数赋值给某个变量.

Answer 4

我认为是，如果

onclick = "f1()"

那么会解释成

onclick = Function("f1()")

Answer 5

onclick 属性的内容是点击事件发生时要执行的代码
Function 对象实例后面加上()表示立即执行

对于方式一，不加双括号真正执行的代码相当于
`
onclick = function (){

f1; 

}
`
因为f1没有立即执行，所以执行匿名函数没有什么效果

而对于方式二，加上双括号表示把f2执行后的结果赋给onclick属性，f2执行后返回undefined,所以没有效果