js事件
2026-05-02 12:25:24
216
分类：javascript归档
一、js事件
js事件参考文档：http://www.runoob.com/jsref/dom-obj-event.html
二、js监听事件的绑定与移除
addEventListener语法
element.addEventListener(type，handler，false/true)
type:事件类型
handler:事件执行触发的函数
false/true:false为冒泡/ture为捕获，参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
事件捕获：父级元素先触发，子集元素后触发；
事件冒泡：子集元素先触发，父级元素后触发；
一般的绑定事件，都是采用冒泡方式，也就是使用false
removeEventListener语法
element.removeEventListener(type，handler，false/true)
参数值含义和上述一样。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="test1" id="btn1">
<input type="button" value="test2" id="btn2">
<script>
var btn1 = document.getElementById("btn1");
// 实名函数
var count = 0;
var handle1 = function () {
alert(count++);
if (count == 3) {
alert("事件结束")
btn1.removeEventListener("click", handle1, false);
}
}
btn1.addEventListener('click', handle1, false);
// 匿名函数
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click", function (e) {
alert(123);
// 在匿名函数中移除事件
btn2.removeEventListener(e.type, arguments.callee, false);
}, false)
</script>
</body>
</html>三、问题：js一个元素从DOM中被删除后，他所绑定的事件浏览器是如何处理的？
问答：https://segmentfault.com/q/1010000008962585
四、js冒泡事件
原文地址：https://www.cnblogs.com/jsanntq/p/7681942.html
例
<!DOCTYPE html>
<html onclick="alert('html')">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<title>js事件冒泡</title>
</head>
<body onclick="alert('body')">
<div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">
<div id="div2" style="width:300px; height:300px; background:palevioletred">
<div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">
<div id="div1" style="width:100px; height:100px; background:palegreen">
<a id="aaa" href="http://www.baidu.com">aaa</a>
</div>
</div>
</div>
</div>
<script>
// 此jquery既阻止默认行为又停止冒泡
// $("#div1").on('click',function(){
// return false;
// });
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onclick = function (ev) {
var oEvent = ev || event;
alert("this is div1");
// js阻止事件冒泡
// oEvent.cancelBubble = true;
// oEvent.stopPropagation();
// js阻止链接默认行为，没有停止冒泡
// oEvent.preventDefault();
// return false;
}
oDiv2.onclick = function (ev) {
var oEvent = ev || event;
alert("this is div2");
oEvent.cancelBubble = true;
}
}
</script>
</body>
</html>