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);

}

绑定和解除事件

巴特西

js操作DOM动态添加和移除事件

最新文章

热门文章