事件处理技巧-优快云博客

<body>
<buttonid="mybtn"value="hi"></button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.onclick=function(){alert(this.id);}
</script>

btn.onclick=null; //删除事件处理程序，再点击按钮不会有任何动作发生

addEventListener()

<body>
<buttonid="mybtn"value="hi">fvfvfv</button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){alert(this.id);},false);
btn.addEventListener("click",function(){alert("hello");},false);
 //这两个事件处理程序会按照添加它们的顺序触发，，因此首先显示元
素的ID，其次会显示“hello”的消息。

<body>
<buttonid="mybtn"value="hi">fvfvfv</button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){alert(this.id);},false);
btn.addEventListener("click",function(){alert("hello");},false);

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除

btn.removeEventListener("click",function(){alert(this.id);},false);//由于第二个参数是匿名函数，所以第二个参数删除无效。

<body>
<buttonid="mybtn"value="hi">fvfvfv</button>
</body>
<script>
var btn=document.getElementById("mybtn");
var handler=function(){alert(this.id);}
btn.addEventListener("click",handler,false); //有效

attachEvent()与DOM0级方法的区别：

1.作用域。前者作用域会在全局作用域中运行，后者作用域会在其所属元素的作用域内运行。

2.执行顺序。前者是以相反的顺序被触发，后者是以添加它们的顺序执行。

3.前者第一个参数click,后者第一个参数onclick.

4.前者2个参数，默认是false(冒泡)，后者三个参数。

<body>
<buttonid="mybtn"value="hi">fvfvfv</button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(){alert(this===window);});
btn.attachEvent("onclick",function(){alert("hello");});
 //这两个事件处理程序会按照添加它们的顺序相反顺序触发，，因此首先显示“hello”，其次会显示this===window。
btn.detachEvent("onclick",function(){alert("hello");});

</script>

detachEvent()移除attachEvent().

var hanlder=function(){alert("hello");}
btn.detachEvent("onclick",hanlder);

跨浏览器的的事件处理程序

<body>
<buttonid="mybtn1"value="hi">11111</button>
<buttonid="mybtn2"value="hi">2222</button>
<buttonid="mybtn3"value="hi">3333</button>

</body>
<script>
function handler(){
alert("wudagou");
}
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; }

}
}
var btn1 =document.getElementById("mybtn1");
var btn2 =document.getElementById("mybtn2");

var btn3 =document.getElementById("mybtn3");
btn2.onclick =function () {EventUtil.addHandler(btn1,"click",handler);
 }

btn3.onclick=function(){EventUtil.removeHandler(btn1,"click",handler);}

</script>

事件类型

<script>
var issupport=document.implementation.hasFeature("HTMLEvents","2.0");
alert(issupport); //返回true 确定浏览器是否支持DOM2级事件规定的HTML事件
</script>

<script>
var issupport=document.implementation.hasFeature("UIEvent","3.0");
alert(issupport);//返回true 确定浏览器是否支持DOM3级事件规定的HTML事件
</script>

scroll事件(会在文档滚动期间重复被触动，所以有必要尽量保持事件处理代码的简单)

<script>
EventUtil.addHandler(window,"scroll",function(event){
if(document.compatMode=="CSS1Compat")
{
alert(document.documentElement.scrollTop);
}
else
{
alert(document.body.scrollTop); //safari3.1

};
});
</script>

确定浏览器是否支持：获得焦点focus和失去焦点blur事件

<script>
var isSupported=document.implementation.hasFeature("focusEvent","3.0");
</script>

鼠标与滚轮事件

click单击

dbclick双击

mousedown按下鼠标按钮时触发

mouseup释放鼠标按钮时触发

mouseenter 鼠标光标首次移入到一个元素范围内时触发

mouseleave 鼠标光标首次移出一个元素范围外时触发

mousemove鼠标移动到一个元素上方时触发

mouseout 鼠标光标移动到一个元素上方，然后用户将其移入另一个元素（可能是前一个元素的外部也可能是这个元素的子元素）时触发

<script>
var isSupported=document.implementation.hasFeature("MouseEvent","2.0");//检验浏览器是否支持上面鼠标事件（除
dbclick/mouseenter/mouseleave外）
</script>

<script>
var isSupported=document.implementation.hasFeature("MouseEvent","3.0");
 //检验浏览器是否支持上面所有鼠标事件
</script>

一个函数处理多个事件，可以使用type属性，通过检测event.type属性，让函数能够确定发生了什么事件

<body>
<buttonid="mybtn">vvvv</button>
</body>
<script>
var btn=document.getElementById("mybtn");
var handler=function(event){
switch(event.type){
case "click":
alert("clicked");
break;
case "mouseover":
event.target.style.backgroundColor="red";
break;
case "mouseout":
event.target.style.backgroundColor="";
break;

}
}
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
</script>

DOM阻止事件的默认行为：preventDefault()或cancelable=true

<body>
<link 
rel="stylesheet" 
href="http://www.baidu.com" 
id="mylink">
</body>
<script>
var link=document.getElementById("mylink");
link.onclick=function(event){
event.preventDefault();
}
</script>

stopPropagation()立即停止事件在dom层次中的传播

<body>
<buttonid="mybtn"></button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.onclick=function(event){
alert("clicked");
event.stopPropagation(); //弹出
};
document.body.onclick=function(){
alert("body clicked"); //不弹出
}
</script>

事件对象的eventPhase属性，用来确定事件当前位于事件流的哪个阶段。

<body>
<buttonid="mybtn"></button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.onclick=function(event){
alert(event.eventphase);//2
};
btn.addEventListener("click",function(){
alert(event.eventphase);//1
},true);
document.body.onclick=function(){
alert(event.eventphase);//3
}
</script>

DOM0中，event对象作为window对象的一个属性存在。

<body>
<buttonid="mybtn"></button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.onclick=function(){
var event=window.event;
alert(event.type);//"click"
}
</script>

IE中使用attachEvent（）添加的，那么event对象作为参数被传入事件

<body>
<buttonid="mybtn"></button>
</body>
<script>
var btn=document.getElementById("mybtn");
btn.attachEvent("onclick",function(event){
alert(event.type);//"click"
});
</script>

IE阻止默认行为returnvalue=false

<script>
var link=document.getElementById("mylink");
link.onclick=function(){
event.returnValue=false);
}
</script>

<script>
var EventUtil={
addHandler:function(element,type,handler){
//省略
},
getEvent:function(){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}},
removeHandler:function(element,type,handler){
//省略的代码
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.canceclBubble=true;
}

}
}
</script>

<body>
<button
id="mybtn">dd</button>
</body>
<script>
btn.onclick=function(){
event=EventUtil.getEvent(event);
var target=
EventUtil.getTarget(event);
}
</script>

<script>
link.onclick=function(){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
}
</script>

<body>
<button
id="mybtn">dd</button>
</body>
<script>
btn.onclick=function(){
alert("gg");
event=EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
}
document.body.onclick=function(event){
alet("bbbb");
}
</script>