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();来阻止默认的打开网页链接的行为，后边写上自己想要的行为即可。