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

来源 : 作者 : admin时间 : 2013-12-28 11:21:56 人气指数 :

导语第一种绑定方式： html绑定（把事件写在标签属性里）语法： <a href="http: bbs aseoe com "onclick="t();">爱思社区< a>分析：这种方式行为结构不分离，效率较低行为：方法结构：

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

  语法： <a href="http://bbs.aseoe.com/"  onclick="t();">爱思社区</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高级绑定事件的几种方式

浏览效果立即下载

TAG:JS 高级绑定事件

本站欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
转载请注明：文章转载自：爱思资源网 http://www.aseoe.com/show-12-86-1.html

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

[前端插件推荐] Plugin