19event-listener.html
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<script src="../../01-ES/code/tool.js"></script>
<script>
var btn = document.getElementById("btn");
// 注册事件
/* 第一种
无法给同一个对象注册多个事件处理函数
btn.onclick = function() {
alert(123);
}
btn.onclick = function() {
alert(456);
// 移除事件
btn.onclick = null;
}
*/
function fn() {
alert(123);
// 移除事件
//btn.removeEventListener("click",fn);
removeEventListener(btn,"click",fn);
}
btn.addEventListener("click",fn);
/* 第二种 兼容Ie9+
btn.addEventListener("click",function() {
alert(123);
});
btn.addEventListener("click",function() {
alert(456);
});
//第三种 attachEvent ie6-10 第一个参数 表示事件名称需要加on
btn.attachEvent("onclick",function() {
alert(456);
});
*/
// 封装一个函数 对元素注册事件
function addEventListener(ele,eventName,fn) {
// 能力检测
if(ele.addEventListener) {
ele.addEventListener(eventName,fn);
} else if(ele.attachEvent) {
ele.attachEvent("on"+eventName,fn);
} else {
ele["on"+eventName] = fn;
}
}
/*addEventListener(btn,"click",function() {
alert(123);
});
addEventListener(btn,"click",function() {
alert(456);
});
*/
function fn2() {
alert(456);
btn.detachEvent("onclick",fn2);
}
//btn.attachEvent("onclick",fn2);
</script>
</body>
</html>
20event-bubble.html
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div>p {
height: 50px;
background: #00f;
}
</style>
</head>
<body>
<div>
<p>123456</p>
</div>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>杭州</li>
<li>广州</li>
</ul>
<script>
/*
var oDiv = document.querySelector("div");
var oP = document.querySelector("p");
// // 第三个参数为false表示冒泡
oDiv.addEventListener("click",function() {
console.log("div ");
},false);
oP.addEventListener("click",function() {
console.log("p");
},false);
document.addEventListener("click",function() {
console.log("document ");
},false);
window.addEventListener("click",function() {
console.log("window ");
},false);*/
/* 第三个参数为true表示捕获
oDiv.addEventListener("click",function() {
console.log("div2 ");
},true);
document.addEventListener("click",function() {
console.log("document2 ");
},true);
window.addEventListener("click",function() {
console.log("window2 ");
},true);
*/
// 事件分为三个阶段
/*
1 捕获阶段 一般没什么意义
2 执行当前点击的元素
3 冒泡阶段 **
*/
/*
window window
| |
document document
| |
div div
| |
P
*/
// 事件委托 原理利用事件冒泡
document.getElementsByTagName("ul")[0].onclick = function(e) {
//console.log(e.target);// 真正触发事件的对象
e.target.style.background = "green";
}
/*
window window
|
document document
| |
body body
| |
ul ul
|
li
*/
</script>
</body>
</html>
21preventDefault.html
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
#box2 {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" id="link">去百度</a>
<div id="box1">
<div id="box2">
</div>
</div>
<script>
var link = document.getElementById("link");
link.onclick = function(e) {
alert(123);
var e = e || event;
/*
e.preventDefault(); // 取消默认行为 标准dom方法
e.returnValue = false;// IE低版本
*/
return false;
}
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var arr = [box1,box2];
// onclick注册事件 只有冒泡 attachEvent 只有冒泡
for(var i=0; i<arr.length; i++) {
arr[i].onclick = function(e) {
console.log(this.id);
e.stopPropagation(); // 标准dom
e.cancelBubble = true; //ie低版本
}
}
</script>
</body>
</html>