一、事件的绑定方式
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
事件