您的位置：首页 > 其它

Dom对象事件注册和取消(addEventListener/attachEvent)

2016-06-16 14:18 567 查看
addEventListener的参数一共有三个，语法为：

element.addEventListener(type,listener,useCapture)

下面是详解
其中element是要绑定函数的对象。
type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
listener当然就是绑定的函数了，记住不要跟括号
最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。

userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。

1.兼容性判断和简单事件注册实例：
        //对于IE浏览器不支持addEventListener
if (window.addEventListener) {
alert("支持addEventListener");
} else {
alert("不支持addEventListener");
}

//对于Google浏览器不支持attachEvent
if (window.attachEvent) {
alert("支持attachEvent");
} else {
alert("不支持attachEvent");
}

    //IE下注册onLoad事件(先注册后触发)
window.attachEvent("onload", funcOne);
window.attachEvent("onload", funcTwo);

       //Google浏览器下注册onload事件（先注册先触发）
window.addEventListener('load', funcOne, false);
window.addEventListener('load', funcTwo, false);

function funcOne() {
alert("funcOne");
}
function funcTwo() {
alert("funcTwo");
}
2.事件队列注册和取消：

    <script type="text/javascript">
window.onload = function () {
var btnOne = document.getElementById("btnOne");
//IE下注册事件，先注册后触发
//btnOne.attachEvent("onclick", funcOne);
//btnOne.attachEvent("onclick", funcTwo);

//Goole下注册事件,(先注册先触发)
btnOne.addEventListener('click', funcOne, false);
btnOne.addEventListener('click', funcTwo, false);
}
function revmoeClick() {
var btnOne = document.getElementById("btnOne");
//IE下取消注册
//btnOne.detachEvent("onclick", funcOne);
//btnOne.detachEvent("onclick", funcTwo);

//Goole下取消注册事件
btnOne.removeEventListener('click', funcOne, false);
btnOne.removeEventListener('click', funcTwo, false);
}

function funcOne() {
alert("funcOne");
}
function funcTwo() {
alert("funcTwo");
}
</script>
</head>
<body>
<input  type="button" id="btnTwo" value="取消注册事件" onclick="revmoeClick()"/>
<hr />
<input  type="button" id="btnOne" value="事件按钮"/>
</body>
</html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航