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

发布者: ming_fei391 | 发布时间: 2018-2-8 18:05| 查看数: 5821| 评论数: 1|帖子模式

第一种绑定方式： html绑定（把事件写在标签属性里）

  语法： <a href="爱思社区</a>

分析：这种方式行为结构不分离，效率较低
            行为：方法
            结构： 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.执行顺序，是按绑定的顺序来的

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