addEventListener 与attachEvent

时间：2021-12-27 16:40:36

第一：简单的通用方法（IE && FF）

window.onload = function(){
   var oDiv = document.getElementById("J_myDiv"); //找到对象
   oDiv.onclick = function(){                                   //设置事件监听函数
        alert("click");
   }
}

缺点：1.添加单一事件

2.不能删除事件

第二：IE中监听函数

addEventListener 与attachEvent
var oDiv;

function fnClick(){
    alert("click me");
    oDiv.detachEvent("onclick",fnClick);//删除监听函数
}

window.onload = function(){
   oDiv = document.getElementById("J_myDiv");//找到对象
   oDiv.attachEvent("onclick",fnClick);       //添加监听函数
}
addEventListener 与attachEvent

第三：标准DOM监听函数

addEventListener 与attachEvent
var oDiv;

function fnClick1(){
   alert("click1");
   // oDiv.removeEventListener("click",fnClick2,false); //删除监听函数2
}

function fnClick2(){
   alert("click2");
}

window.onload = function(){

     oDiv = document.getElementById("J_myDiv"); //找到对象
     oDiv.addEventListener("click",fnClick1,false);   //添加监听函数1
     oDiv.addEventListener("click",fnClick2,false);   //添加监听函数2

}
addEventListener 与attachEvent

第四：从js实例来看事件监听 参看：http://imethan.com/?p=208

第五：从实例来看JS的事件监听学习笔记（事件监听绑定、ff/IE不同的处理机制兼容总结)参看：http://hi.baidu.com/dou917/blog/item/40219f37e6e3deee1b4cff67.html

第六：代码总结

addEventListener 与attachEvent
<script language="javascript">
//Javascript 事件演示
window.onload = function(){
    var hideBox = function(event){
        document.getElementById('status_show').style.display = 'none';
        document.getElementById('status_hide').style.display = 'block';
    };
    var showBox = function(event){
        document.getElementById('status_show').style.display = 'block';
        document.getElementById('status_hide').style.display = 'none';
        stopEvent(event);
    };
    var stopEvent = function(event){
        e = event || window.event;
        if(e.stopPropagation){
            e.stopPropagation();
        }else {
            e.cancelBubble = true;
        }
    };
    if(document.addEventListener){
        document.addEventListener('click', hideBox, false);
        document.getElementById('status_hide').addEventListener('click', showBox, false);
        document.getElementById('status_show').addEventListener('click', stopEvent, false);
    }else {
        //For IE
        document.attachEvent('onclick', hideBox);
        document.getElementById('status_hide').attachEvent('onclick', showBox);
        document.getElementById('status_show').attachEvent('onclick', stopEvent, showBox);
    }
};
</script>
 
 

  • onclick这种写法是DOM0级规范的写法，确实是所有的浏览器支持的，但是这种写法有一些弊端：

  1. 这种写法不能同时绑定多个事件

  2. 这种写法使代码耦合在了一起

  • addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序（由这个函数的第三个参数决定true/false），既然这个是DOM2标准中定义的，那么只有支持DOM2级事件处理程序的浏览器才支持这个方法（IE9,Firefox,Safari,Chrome和Opera都支持这个）。

  • attachEvent()方法并不是DOM标准定义的，而是IE自己实现的，而由于IE8及之前版本只支持事件冒泡，所以可想而知这个方法添加的事件处理程序都只能在冒泡阶段才会被调用，addEventListener()和attachEvent()还有一个区别就是第一个参数——事件类型，attachEvent()的事件类型都是前面带'on'的，比如点击事件 click ，addEventListener()可以传入 "click"，而 attachEvent() 却要传入 'onclick'；

相关文章