终于搞明白标签中绑定事件到底加不加括号了

终于搞明白标签中绑定事件到底加不加括号了

终于搞明白标签中绑定事件到底加不加括号了

最近有看到文章讲解说用js绑定事件和标签内直接绑定事件的区别,但是比较零散,直说了对应的执行结果,让人看完还是迷迷糊糊,我就专门整理并对比了下区别,做下记录。

首先说下事件绑定的三种主要方式:

1、内联模式:将函数名直接作为html标签中属性的属性值。

代码语言:javascript代码运行次数:0运行复制这种方式的缺点就是不符合行为分离的基本规范

2、脚本模式:获取节点并给节点添加属性

代码语言:javascript代码运行次数:0运行复制var btn = document.getElementById("btn");

btn.onlick=function(){

XXX

}这种方式虽然实现了分离,但只能添加一个函数,再次使用就会被覆盖

3、DOM2级事件

代码语言:javascript代码运行次数:0运行复制btn.addEventListener("click", function (event) {

console.log(this);

}, false);这种方式算可以多次添加,也有对应的移除方法。实现的方式就如同名称一样,给标签添加了一个事件监听器,监听到之后就执行对应的方法

今天主要是对比下事件添加时加不加括号的效果

也就是内联模式下的使用规范

代码语言:javascript代码运行次数:0运行复制

喜欢深究的同学可以看下对应的结果,第一个test按钮点击时会触发,但是无法打印出e

第二个按钮则不会触发

这是因为内联模式下的事件属性是使用引号包裹,代表的是当点击该元素时,执行引号内的代码。

而在vue中使用@click绑定事件加不加括号都行,它会给你处理的

加括号的话,参数由你定义,不加括号的话,传入的参数是默认的event事件

相关推荐

妖狐为什么叫崽(妖狐为什么叫渣男)
365信誉线上

妖狐为什么叫崽(妖狐为什么叫渣男)

📅 06-29 👁️ 242
Beyond LIVE
365信誉线上

Beyond LIVE

📅 07-06 👁️ 2508
精选密密的春雨像什么比喻89句文案集锦
365bet亚洲真人网

精选密密的春雨像什么比喻89句文案集锦

📅 06-29 👁️ 1159
中国十大最好看的闯关节目榜中榜
365bet世界

中国十大最好看的闯关节目榜中榜

📅 06-30 👁️ 2964
钻的成语
365bet亚洲真人网

钻的成语

📅 07-02 👁️ 4017
斗牛?不了解。但是斗牛舞,你一定要了解!
365bet亚洲真人网

斗牛?不了解。但是斗牛舞,你一定要了解!

📅 07-05 👁️ 5910