JS行内绑定事件到底加不加括号

一、事件的绑定方式

1.1、行内式（内联式）

<div class="box" onclick="doClick()">hello</div>
<script>
  // 获取页面中id为box的元素
  function doClick() {}
</script>

1.2、属性绑定

<div class="box">hello</div>
<script>
  var box = document.querySelector(".box");
  //对象添加属性 点语法
  box.onclick = function () {};
</script>

1.3、给事件添加监听器绑定

<div class="box">hello</div>
<script>
  var box = document.querySelector(".box");
  //对象添加属性 点语法
  box.onclick = function () {};
</script>

二、今天主要对比下内联模式下事件添加时加不加括号？

<div id="container">
  <button id="btn" onclick="test1(window.event)">test1</button>
  <button id="btn2" onclick="test2">test2</button>
</div>
<script>
  function test1(event) {
    console.log("event", event);
  }
  function test2(event) {
    console.log(event);
  }
</script>

第一个test1按钮点击时会触发，事件对象也正确打印
第二个test2按钮则不会触发，函数也不会执行
这是因为内联模式下，事件直接执行引号内的代码
而在vue中使用@click绑定事件加不加括号都行，它会给你处理的，vue中加括号的话，参数由你定义，不加括号的话，传入的参数是默认的event事件