终于搞明白标签中绑定事件到底加不加括号了
最近有看到文章讲解说用js绑定事件和标签内直接绑定事件的区别，但是比较零散，直说了对应的执行结果，让人看完还是迷迷糊糊，我就专门整理并对比了下区别，做下记录。
首先说下事件绑定的三种主要方式：
1、内联模式：将函数名直接作为html标签中属性的属性值。
代码语言：javascript复制<button onclick="func()">内联模式</button>这种方式的缺点就是不符合行为分离的基本规范
2、脚本模式：获取节点并给节点添加属性
代码语言：javascript复制var btn = document.getElementById("btn");
btn.onlick=function(){
XXX
}这种方式虽然实现了分离，但只能添加一个函数，再次使用就会被覆盖
3、DOM2级事件
代码语言：javascript复制btn.addEventListener("click", function (event) {
console.log(this);
}, false);这种方式算可以多次添加，也有对应的移除方法。实现的方式就如同名称一样，给标签添加了一个事件监听器，监听到之后就执行对应的方法
今天主要是对比下事件添加时加不加括号的效果
也就是内联模式下的使用规范
代码语言：javascript复制<div id="container">
<button id="btn" onclick="test()">test1</button>
<button id="btn2" onclick="test2">test2</button>
</div>
<script>
function test(e) {
console.log('e', e)
console.log(222, this)
return 1
}
function test2(e) {
console.log(222, this)
return 1
}
</script>喜欢深究的同学可以看下对应的结果，第一个test按钮点击时会触发，但是无法打印出e
第二个按钮则不会触发
这是因为内联模式下的事件属性是使用引号包裹，代表的是当点击该元素时，执行引号内的代码。
而在vue中使用@click绑定事件加不加括号都行，它会给你处理的
加括号的话，参数由你定义，不加括号的话，传入的参数是默认的event事件
