javascript使用eventutil绑定事件

我们都知道在使用dom绑定事件的时候，分为以下三种方式：

<!--直接在标签中指定事件-->
<button onclick="javascript:alert('first onclick')">first button</button>

<!--首先得到便签元素，然后为标签指定特定事件-->
<button id="second">second button</button>
var second = document.getElementById("second");
second.onclick = function() {
alert("second click");
}

<!--首先得到便签元素，然后为通过addEventListener或者attachEvent来指定特定事件-->
<button id="third">third button</button>
var third = document.getElementById("third");
third.addEventListener("click",function(e){
alert("third click");
},false);
<button id="forth">forth button</button>
var forth = document.getElementById("forth");
forth.attachEvent("onclick",function(e){
alert("forth click");
},false);

对于第三种事件绑定方式是目前大部分网站所采用的，不同的浏览器添加事件的方式可能会不同，目前分为上面这两种：

标签.attachEvent("onclick",处理方法，该事件是否继续传递)
标签.addEventListener("click",处理方法，该事件是否继续传递)

那么如何才能使我们添加的事件在不同的浏览器上都可以执行呢？？此时我们可以封装一个eventutil对象，来屏蔽浏览器的区别。

eventutil对象的使用

<input type="button" id="myBtn1" value="look"/>
<script type="text/javascript">
window.onload = function() {
var EventUtil = {
addHandler: function(element, type, handler){
//若浏览器支持addEventListener，则使用addEventListener来添加事件
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 handler = function(){
alert("hello handler");
}
EventUtil.addHandler(btn1, "click", handler);

}

简单说明一下，我定义了一个eventutil对象，在该对象中有addHandler和removeHandler两个方法，分别用来添加和移除事件的。此时只需要这样调用就可以了。、

EventUtil.addHandler(需要绑定事件的标签, "需要绑定的事件", "绑定事件的处理方法");

EventUtil.removeHandler(需要删除事件的标签, "需要删除的事件", "绑定事件的处理方法");

此时，使用eventutil绑定的事件在各个浏览器上都是可以运行的了。

使用preventDefault()屏蔽浏览器默认行为

同时我们还可以使用preventDefault()方法来屏蔽浏览器默认的行为。并且添加自己想要的行为。

<a href="http://www.baidu.com" id="stop">stop default</a>

<script type="text/javascript">
window.onload = function() {
var stop = document.getElementById("stop");
stop.onclick = function(e) {
e.preventDefault();
alert("it has stop the default behavior");
}
}
</script>

可以看到，这里我给a标签设置了click方法，并且在该方法的第一行，就调用了e.preventDefault();来阻止默认的打开网页链接的行为，后边写上自己想要的行为即可。