js中的事件机制(IE和FF)

luoyjx · 2014-06-24 00:05 · 1176次阅读

为什么要采用事件监听而不是直接对元素的事件属性(如:onclick、onmouseover)赋值?这个我一直不明白

 原来用事件属性只能赋值一种方法,即:

    button1.onclick = function() { alert(1); };
    button1.onclick = function() { alert(2); };

这样后面的赋值语句就将前面的onclick属性覆盖了

而添加事件监听就可以并行。特别是当团队合作时,事件并行的需求增多,比如:监听document对象的鼠标事件或者window对象的载入事件等。使用事件属性则很容易造成事件覆盖掉

使用事件监听有两种方式:attachEvent和addEventListener

attachEvent与addEventListener区别
适应的浏览器版本不同,同时在使用的过程中要注意
attachEvent方法 按钮onclick
addEventListener方法 按钮click
attachEvent方法, (ie系列)
addEventListener方法 Mozilla系列

两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:

var btn1Obj = document.getElementByIdx_x(“btn1″); //object.attachEvent(event,function); 
btn1Obj.attachEvent(“onclick”,method1); 
btn1Obj.attachEvent(“onclick”,method2); 
btn1Obj.attachEvent(“onclick”,method3);执行顺序为method3->method2->method1 

addEventListener var btn1Obj = document.getElementByIdx_x(“btn1″);
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener(“click”,method1,false);
btn1Obj.addEventListener(“click”,method2,false);
btn1Obj.addEventListener(“click”,method3,false);执行顺序为method1->method2->method3

detachEvent(‘onclick’,func);//ie下使用删除事件func 
removeEventListener(‘click’,func);//Mozilla下,删除事件func

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册