跨浏览器的事件处理程序

我们第一个要创建的方法是addHandler() 它的职责是视情况分别使用DOM0级方法、DOM2级方法或者IE方法来添加事件。这个方法属于一个名叫EventUtil的对象。addHandler() 方法接收三个参数：要操作的元素、事件名称、事件处理程序函数。

addHandler() 对应的方法是removeHandler，他也接收相同的参数。这个方法的职责是移除之前添加的事件处理程序—-无论事件处理程序是采用什么方法添加进去的，如果其他方法无效则采用DOM0级方法。

var EventUtil={addHander:function(element,type,func){if (element.addEventListener) {element.addEventListener(type,func,false)}else if (element.attachEvent) {element.attachEvent("on"+type,func)}else{element["on"+type]=func;}},removeHandler:function(element,type,func){if (element.removeEventListener) {element.removeEventListener(type,func,false)}else if(element.detachEvent){element.detachEvent("on"+type,func);}else{element["on"+type]=null;}}
}

事件对象

当我们注册事件处理程序的时候，我们会产生一个事件对象event，所有浏览器都支持这个event对象，但是支持方式不同。兼容DOM的浏览器会将一个event对象出传入事件处理程序中。

var btn=document.getElementById("btn");
btn.onclick=function(){alert(event.type)
}
btn.addEventListener("click",function(){alert(event.type)
},false)

属性

bubles：表示事件是否冒泡
cancelable：表示是否可以取消事件的默认行为
currentTarget：表示其事件处理程序当前正在处理的那个元素
defaultPrevented：表示是否调用了preventDefault
detail：与事件相关的细节
eventPhase：调用事件处理程序的阶段：1表示捕获阶段，2表示正在目标阶段，3表示冒泡阶段
target：事件的目标
trusted：为true表示是浏览器生成的。为false表示事件由开发人员创建的
type：事件类型
view：与事件相关的抽象视图，等同于发生事情的window。

方法

preventeDefault()：取消事件的默认行为。如果cancelable是true则可以调用这个方法
stopImmediatePropagation()：取消事件的进一步捕获或者冒泡，同时组织任何事件处理程序被调用
stopPropagation()：取消事件的进一步冒泡，如果bubles为true，则可以使用这个方法

一个函数处理多个程序

var btn=document.getElementById("btn");
function handler(){switch(event.type){case "click":alert("hello,click");break;case 'mouseover':event.target.style.border="solid 1px gray";break;case "mouseout":// alert("hello,facus");event.target.style.border="";break;}
}
btn.onclick=handler;
btn.onmouseout=handler;
btn.onmouseover=handler;

很多时候我们会用到a元素，点击触发事件。但是a还有自己的默认行为就是超链接，那我们怎么组织特定事件的默认行为呢？我们可以使用事件的preventDefault()方法。

var asign=document.getElementById("Ahref");
asign.onclick=function(){asign.style.display="inline-block"asign.style.width="100px";asign.style.height="100px";asign.style.backgroundColor="red";event.preventDefault();alert("ok")
}

当我们要知道事件发生在哪个阶段的时候，我们课哟通过eventPhase属性来判断是处在捕获阶段还是处在冒泡阶段，还是处在目标阶段。

var btn=document.getElementById("btn");
btn.onclick=function(){alert(event.eventPhase);//1表示在捕获阶段，2表示处在目标阶段，3表示处在目标阶段
}

在IE中，event对象就有所不同，在使用DOM0级方法添加事件处理程序的时候，event对象作为window对象的一个属性存在

var btn=document.getElementById("btn");
btn.onclick=function(){var event=window.event;alert(event.type);
}

在IE中event有不同的属性和方法

cancelBubble：默认值为false，但是设置为true则可以取消事件冒泡
returnValue：默认值为true，设置值为false可以取消元素的默认事件
srcElement：事件的目标值
type：事件类型

<a href="http://www.burningay.top" id="Ahref">666</a>
var asign=document.getElementById("Ahref");
asign.onclick=function(){alert("hello");alert(window.event.srcElement);//http://www.burningay.topevent.returnValue=false//阻止默认事件
}

我们为了解决这种方法，可以指定一个跨浏览器对象，就像之前的EventUtil对象

var EventUtil={addHandler:function(element,func,type){if (element.addEventListener) {element.addEventListener(type,func,false)}else if(element.attachEvent){element.attachEvent("on"+type,func)}else{element["on"+type]=func}},removeHandler:function(element,func,type){if (element.removeEventListener) {element.removeEventListener(type,func,false)}else if (element.detachEvent) {element.detachEvent("on"+type,func)}else{element["on"+type]=null;}},getEvent:function(){return event?event:window.event;},getTarget:function(){return event.target||event.srcElement;},preventDefault:function(){if (event.preventDefault) {event.preventDefault();}else{event.returnValue=false;}},stopPropagation:function(){if (event.stopPropagation) {event.stopPropagation()}else{event.cancelBubble=true;}}
}

跨浏览器的事件处理程序相关推荐

原生JS实现跨浏览器的事件处理程序
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
javascript --- DOM0级、DOM2级、跨浏览器的事件处理程序
DOM0级事件处理程序: // 使用DOM0级方法指定的事件处理程序被认为是元素的方法 // 这个时候的事件处理程序是在元素的作用域中运行: <div id = "myBtn" ...
JavaScript --- 跨浏览器的事件处理程序
var EventUtil = {addHandler: function(element, type, handler) { // 添加事件处理程序if (element.addEventListe ...
addevent()实现跨浏览器绑定事件
绑定事件一般有三种方式:传统绑定事件,IE绑定事件,W3C绑定事件.传统绑定存在可读性问题,this问题,覆盖问题.为实现跨浏览器绑定事件,我们采用自定义方法addEvent().代码如下: //跨浏 ...
一些js代码，自己备用的。高手不要笑话我。。（跨浏览器基础事件，浏览器检测，判断浏览器的名称、版本号、操作系统）...
跨浏览器基础事件 View Code 1 //跨浏览器添加事件 2 function addEvent(obj, type, fn) { 3 if (obj.addEventListener) { 4 ...
IFE-16 addEventHandler跨浏览器实现事件绑定
/** * addEventHandler方法 * 跨浏览器实现事件绑定 */ function addEventHandler(ele, event, hanlder) {if (ele.addEv ...
JavaScript --- 跨浏览器的事件对象
var EventUtil={addHandler: function(element, type, handler){ // 添加事件方法if (element.addEventListener){ ...
跨浏览器resize事件分析
resize事件原生事件分析 window一次resize事件: IE7 触发3次, IE8 触发2次, IE9 触发1次, IE10 触发1次 Chrome 触发1次 FF 触发2次 Opera ...
dean edward大神的跨浏览器addEvent事件
2019独角兽企业重金招聘Python工程师标准>>> function addEvent(element, type, handler) {// assign each event ...

跨浏览器的事件处理程序

事件对象

跨浏览器的事件处理程序相关推荐

最新文章

热门文章