目标：能够了解javascript事件处理方式，
或得到事件兼容个浏览器的类。
实现方式：代码及相关文字解释。
最后面有兼容所有浏览器支持的共用类。如果你急需用共用类，可先直接拿到该类用，等事后再看这篇文章，来了解各浏览器的兼容性原理。明白原理了完全可以自己写了。
首先拿出拿出来我们的实例html，以下所有javascript操作的都是这个html
dom0级
以这种处理方式是在事件的冒泡阶段被响应的。那什么是冒泡？
冒泡：就是当我们点击一个按钮时候，会从按钮的dom开始响应click事件直到document最外层dom。这个阶段是冒泡。这就好比我们在一张纸上画3个大小不同的同心圆，当我们拿手点最里面一个的圆心的时候，同时也点中了其他圆的圆心。这里冒泡的先后顺序就是从里到外。
捕获:这个跟冒泡相反，是从外到里的。也就是从document一层一层的找到最里面点击的dom。ie只支持冒泡，其他的浏览器同时支持两种，为什么讲这个？因为下面会涉及到这些基础知识。
事件监听器(dom2级事件处理)
好处，可以将事件注册在dom上，当触发时可以相应多个相同事件。这个有是兼容问题的，先讲讲标准，那就是非ie浏览器。addEventListener(); 和 removeEventListener();。
事件对象
按惯例，我们还是先看标准的浏览器的事件对象（非ie）。上面我们遗留了一个问题关于this的，这里我们换种思路一样都可以解决。
stopPropagation()可以阻止冒泡或者捕获事件在接下来的事件执行。比冒泡事件中我们点击页面上的btn，btn上注册的事件会执行，如果我们外层的document上一样的有相同事件注册，那么接着会触发document上的事件。用这个可以阻止掉。
首先看看event
下面我们继续完善我们的兼容性时间注册类。
最后面有兼容所有浏览器支持的共用类。如果你急需用共用类，可先直接拿到该类用，等事后再看这篇文章，来了解各浏览器的兼容性原理。明白原理了完全可以自己写了。
首先拿出拿出来我们的实例html，以下所有javascript操作的都是这个html
<!DOCTYPE html>
<html>
<head>
<title>dom</title>
</head>
<body>
<input id="clickBtn" type="button" value="Click Me" />
<a id="link" href="www.google.com.hk">google</a>
</body>
<script type="text/javascript">
//这里面是我们放javascript代码的地方
</script>
</html><input id="clickBtn" type="button" value="Click Me" οnclick="javascript:try{调用的方法}catch(e){}"/>dom0级
var btn = document.getElementById("clickBtn");
btn.onclick = function(){
alert(this.value);
}
btn.onclick = function(){
alert(this.value+'2');
}
// Click Me2
以这种处理方式是在事件的冒泡阶段被响应的。那什么是冒泡？
冒泡：就是当我们点击一个按钮时候，会从按钮的dom开始响应click事件直到document最外层dom。这个阶段是冒泡。这就好比我们在一张纸上画3个大小不同的同心圆，当我们拿手点最里面一个的圆心的时候，同时也点中了其他圆的圆心。这里冒泡的先后顺序就是从里到外。
捕获:这个跟冒泡相反，是从外到里的。也就是从document一层一层的找到最里面点击的dom。ie只支持冒泡，其他的浏览器同时支持两种，为什么讲这个？因为下面会涉及到这些基础知识。
事件监听器(dom2级事件处理)
好处，可以将事件注册在dom上，当触发时可以相应多个相同事件。这个有是兼容问题的，先讲讲标准，那就是非ie浏览器。addEventListener(); 和 removeEventListener();。
var btn = document.getElementById("clickBtn");
function handle(){
alert(this.value);
}
function handle2(){
alert(this.value+'2');
}
btn.addEventListener('click',handle,false);
btn.addEventListener('click',handle2,false);
btn.removeEventListener('click',handle,false);var btn = document.getElementById("clickBtn");
function handle(){
alert(this.value);
}
function handle2(){
alert(this.value+'2');
}
btn.attachEvent('onclick',handle);
btn.attachEvent('onclick',handle2);
btn.detachEvent('onclick',handle2);
//undefined
var btn = document.getElementById("clickBtn");
function handle(){
alert(this === window);//true
}
btn.attachEvent('onclick',handle);var EventUtil = {
addHandler:function(element,event,handler){
if(element.addEventListener){
element.addEventListener(event,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+event,handler);
}else{
element['on'+event] = handler;
}
},
removeHadler:function(element,event,handler){
if(element.removeEventListener){
element.removeEventListener(event,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+event,handler);
}else{
element['on'+event] = null;
}
}
}事件对象
按惯例，我们还是先看标准的浏览器的事件对象（非ie）。上面我们遗留了一个问题关于this的，这里我们换种思路一样都可以解决。
var btn = document.getElementById("clickBtn");
function handler(event){
alert(event.type);//click
alert(this === event.target);//true
alert(this === event.currentTarget);//true
}
EventUtil.addHandler(btn,'click',handler);var btn = document.getElementById("clickBtn");
function handler(event){
alert(this === event.target);//false
alert(this === event.currentTarget);//true
}
EventUtil.addHandler(document,'click',handler);var link = document.getElementById("link");
function prevent(event){
event.preventDefault();
}
EventUtil.addHandler(document,'click',prevent);stopPropagation()可以阻止冒泡或者捕获事件在接下来的事件执行。比冒泡事件中我们点击页面上的btn，btn上注册的事件会执行，如果我们外层的document上一样的有相同事件注册，那么接着会触发document上的事件。用这个可以阻止掉。
var btn = document.getElementById("clickBtn");
function prevent(event){
alert('prevent');
event.stopPropagation();//去掉这一句就会冒泡到document
}
function handler(event){
alert('handler');
}
EventUtil.addHandler(btn,'click',prevent);
EventUtil.addHandler(document,'click',handler);首先看看event
var link = document.getElementById("link");
function handler(){
alert(window.event);//object event
}
EventUtil.addHandler(document,'click',handler);var link = document.getElementById("link");
function prevent(){
window.event.returnValue = false;
}
EventUtil.addHandler(link,'click',prevent);下面我们继续完善我们的兼容性时间注册类。
var EventUtil = {
addHandler:function(element,event,handler){
if(element.addEventListener){
element.addEventListener(event,handler,false);
}else if(element.attachEvent){
element.attachEvent('on'+event,handler);
}else{
element['on'+event] = handler;
}
},
removeHadler:function(element,event,handler){
if(element.removeEventListener){
element.removeEventListener(event,handler,false);
}else if(element.detachEvent){
element.detachEvent('on'+event,handler);
}else{
element['on'+event] = null;
}
},
getEvent:function(event){
return event ? event : window.event;
},
getTarget:function(event){
return event.target ? event.target : event.srcElement;
},
preventDfault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;//注意这里是true
}
},
getRelatedTarget:function(event){
if(event.relatedTaget){
return event.relatedTaget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
}
5574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
