由于我们在前端开发的过程中经常遇到在业务逻辑中想要某些html组件获得失去某些事件的作用或者为某些html组件新增一个事件的监听，但是由于目前的浏览器支持的语句普遍分为两种标准，一种是W3C标准：适用者为IE；一种是非W3C标准，适用者为chrome和firefox。

正是由于现行的这两种不同的标准所支持的代码的不同，造成了我们码农编写代码的复杂性和浏览器支持性，而本文所要讲的使用js来实现为HTML组件添加事件监听和移除事件监听也是由于这个原因而需要增加一些逻辑判断，包括当前浏览器的类型。

因此，本文将讲述如何让js为HTML组件添加事件监听和移除事件监听，并且适用于不同的浏览器。

下面的代码就可以完整的兼容IE，chrome，firefox等主流的浏览器，并且已经实现了js为html组件添加时间监听和移除事件监听。

<html>
<head>
    <title>addEventListener方法使用实例</title>
    <meta charset="UTF-8">
</head>
<body>
<h4>测试是否绑定或解除事件</h4>
<input  type="button" value="没有事件" /><br/>
<h4>绑定事件</h4>
<input  type="button" value="绑定事件" onclick="add_Event()" /><br/>
<h4>解除绑定事件</h4>
<input  type="button" value="解除事件" onclick="delete_Event()" /><br/>
<script language="javascript">
    function add_Event(){
        var a = document.getElementById("testAction");
        a.value="有事件";
        if (document.all) {
            //IE
            a.attachEvent("onmouseover", Hello_ok);
        }else{
            //chrome or firefox
            a.addEventListener("mouseover", Hello_ok, false);
        }
    }
    function delete_Event(){
        var a = document.getElementById("testAction");
        a.value="没有事件";
        if (document.all) {
               //IE
            a.detachEvent("onmouseover", Hello_ok);
        }else {
            a.removeEventListener("mouseover", Hello_ok, false);
        }
    }

    function Hello_ok(){
        alert("Hello ,this is a onclick event!");
    }
</script>
</body>
</html>

通过上述代码，我们可以看到，这个添加或移除的事件监听为当鼠标滑过按钮时触发，当然，我们还可以将这个事件设置为

IE : onblur/onfocus ,onclick等等

chrome，firefox： blur/focus,click等等