首页 > 代码库 > javascript-事件处理
javascript-事件处理
前言：
click,load,mouseover都是事件的名字
而onclick,onload,onmouseover则是响应事件的事件处理程序
javascript事件处理有以下几种处理方式
1.HTML事件处理程序
<input type=‘button‘ value=http://www.mamicode.com/‘点击我‘ onclick=‘alert(‘啊！被你击中了‘)‘/>
2.Dom0级事件处理程序
<input type=‘button‘ value=http://www.mamicode.com/‘点击我‘ id=‘myBtn‘/>
var btn =document.getElementById(‘myBtn‘);
btn.onclick=function(){
alert(‘啊！再次被击中了，这次是Dom0事件‘);
}
3.Dom1级事件处理程序
没有！！！直接就是Dom2,鬼知道为什么。
3（真正的第3种）Dom2级事件处理程序
<input type=‘button‘ value=http://www.mamicode.com/‘点击我‘ id=‘myBtn‘/>
var btn =document.getElementById(‘myBtn‘);
btn.addEventListener(‘click‘,function(){
alert(‘第三次被击中，Dom2放学别走‘)；
},false)；
false:代表将事件处理程序添加到事件流的冒泡阶段，可以最大程度的兼容浏览器。
如果要删除该事件处理程序，则调用
btn.removeEventListener(‘click‘,function(){
alert(‘第三次被击中，Dom2放学别走‘)；
},false)；
上面的addEventListener()和removeEventListener()函数，第二个参数看似一样，实则是两个不同的匿名函数。要解决这个问题，则需要
var handler=function(){
alert(‘第三次被击中，Dom2放学别走‘)；
}
btn.addEventListener(‘click‘,handler,false);
btn.removeEventListener(‘click‘,handler,false);
4.IE事件处理程序
由于我们IE浏览器逆天的不兼容性，IE自己造了两个事件处理程序函数。
<input type=‘button‘ value=http://www.mamicode.com/‘点击我‘ id=‘myBtn‘/>
var btn =document.getElementById(‘myBtn‘);
var handler=function(){
alert(‘第三次被击中，Dom2放学别走‘)；
}
btn.attachEvent(‘oncick‘,handler);
删除事件操作
btn.detachEvent(‘onclick‘,handler);
5.前方高能，大Boss来袭..
为了解决跨浏览器的问题，而不是在项目里面一下子使用DOM事件处理程序，一下子是IE事件处理程序
我们写一个对象 EventUtil,对象字面量法为其添加属性，写完它之后，跨浏览器就可以一劳永逸。
var EventUtil = {
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent(‘on‘+type,handler);
}else{
element[‘on‘+type]=handler;
}
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent(‘on‘+type,handler);
}else{
element[‘on‘+type]=null;
}
}
6.跨浏览器的事件对象
前面介绍的是跨浏览器事件处理程序
接下来要介绍的跨浏览器事件对象，IE中event对象的全部信息和方法Dom对象中都有,但是实现方式不一样。
还是刚才的那个对象EventUtil
var EventUtil={
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=http://www.mamicode.com/false;
}
}
javascript-事件处理