JavaScript事件，函数封装

       我们知道在JavaScript中，为元素添加事件，有三种方法，为了更好的让各种浏览器兼容，我们就可以把这些方法封 装成一个函数，方便使用。首先我们看一下这三种添加事件的方法：

　　　　

　　　　　　　　　　　　　　　　　elem.onxxx = function(){} // this指向dom元素本身
　　　　　　　　　　　　　　obj.addEventListerner(type,fn,false); // this指向dom元素本身
　　　　　　　　　　　　　　obj.attachEvent("on" + type ,fn); // this指向window

　　其中：

　　　　　(1):elem.onxxx = function(){};这是DOM0级别的事件处理程序，由于this指向dom元素本身，所以在这个事件处理程序中通过this      　　　　　　可以访问元素的任何属性和方法

　　　　　(2):obj.addEventListerner(type,fn,false);这是DOM2级事件处理程序，参数“type”为事件类型（如"click"），fn为作为事件处理程序

　　　　　　  的一个函数，最后的一个参数为布尔值，若为true,表示在捕获阶段调用事件处理程序；如果为false，表示在冒泡阶段调用事件 　　　　　　  处理程序；通过addEventListerner()添加的事件处理程序只能使用removeEventListerner()来移除

　　　　　　var btn = document.getElementById("mybtn");

　　　　　　var handler = function(){

　　　　　　　　alert("Hello");

　　　　　　}

　　　　　　btn.addEventListerner("click",handler,false)；

　　　　　　btn.removeEventListerner("click",handler,false);

　　这也意味着添加的匿名函数将不能被移除

　　　　(3):IE处理事件；obj.attachEvent("on "+ eventType,fn);使用attachEvent()添加的事件也可以通过detachEvent()来移除；这也意味着添加的匿名函数不能被移除

 

接下来我们就可以使用这些事件处理程序来封装符合各种浏览器兼容性的函数了

/*封装addEvent函数，实现兼容性更好的事件绑定方法
handle为事件处理函数，type为事件类型*/

function addEvent(elem,type,handle){
if(elem.addEventListener){
　　　　　　　　　　　　elem.addEventListener(type,handke,false);
}else if(elem.attachEvent){
　　　　　　　　elem.attachEvent("on" + type,function(){
　　　　　　　　　　　　handle.call(elem);
})
}else{
　　　　　　　　　　　　　　　　elem["on" + type] = handle;
}
}

/*封装一个取消冒泡的函数 stopBubble(event)
更好的实现浏览器兼容
*/

function stopBubble(event)
{
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}

/*
封装阻止默认事件的函数 cancleHandler
*/

function cancleHandler(event)
{
if(event.preventDefault)
{
event.preventDefault();
}else{
event.returnValue = false;
}
}

　　

转载于:https://www.cnblogs.com/wxc-cs-97/p/9519760.html