js操作DOM動態添加和移除事件


非IE下,注意事件名不帶on,如onclick為click

添加事件:DOM對象.addEventListener('事件名',函數名,true/false);

刪除事件:DOM對象.removeEventListener('事件名',函數名,true/false);

第三個參數是useCapture,如果為true,瀏覽器采用capture截獲處理事件順序;如果為false,瀏覽器采用bubbing冒泡方式處理事件順序

一般為false

給個例子,可以自己修改true或false來看效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="div_test">div_test
    <input type="button" id="btn_test" value="btn_test"/>
</div>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("div_test").addEventListener("click", test1, false);
        document.getElementById("btn_test").addEventListener("click", test2, false);
    }
    function test1() {
        alert("外層div觸發")
    }
    function test2() {
        alert("內層input觸發")
    }
</script>
</body>
</html>
例子

IE下,事件名不能去on了,正常寫

添加事件:DOM對象.attachEvent('事件名',函數名);

刪除事件:DOM對象.detachEvent('事件名',函數名);

注意,綁定事件和刪除事件的函數名必須一致,而且不能使用匿名函數,匿名函數不能指定函數名

常用代碼如下:

//綁定事件
if (typeof document.addEventListener != "undefined") { 
document.addEventListener("mousedown",_lhlclick,true); 
} else { 
document.attachEvent("onmousedown",_lhlclick); 
} 

//解除綁定事件
if (typeof document.addEventListener != "undefined") { 
document.removeEventListener("mousedown",_lhlclick,true); 
} else { 
document.detachEvent("onmousedown",_lhlclick); 
} 
綁定和解除事件

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM