分析JS高级绑定事件的几种方式

JavaScript jghq 发表于 1 年前

第一种绑定方式: html绑定 (把事件写在标签属性里)

语法: 爱思社区

分析:这种方式 行为 结构不分离,效率较低

行为: 方法

结构: div

样式: css

第二种绑定方式: 对象属性方式

语法: xxxDomObject.onclick = function(){

}

分析:这种方式 只能绑定一个事件

如 一个页面中都写了onload事件,则后面的事件会将前面的onload的属性值给覆盖

window.onload = function(){

alert('bbs.aseoe.com');

}

window.onload = function(){

alert('爱思社区');

}

最终的结果是爱思社区 会将bbs.aseoe.com 覆盖

第三种绑定方式: addEventListener方式 (W3c中的标准)

语法:xxxDomObject.addEventListener();

var test = document.getElementById('test');

test.addEventListener('click', function(){alert('爱思社区');},false);

test.addEventListener('click', function(){alert('bbs.aseoe.com');},false);

注意: 1.事件名,一律不带on (即 绑在 click,load,change,blur,focus,mouseover.. 等等)

2.绑定事件函数中的"this"指绑定该事件的对象

3.执行顺序,是按绑定的顺序来的

注:文章由坚固环球:http://www.solidfx.hk/ 整理发布。。

暂无回复,说出你的观点吧
登录后即可参与回复