JavaScript 事件绑定和深入
本节课所讲内容：
1.事件冒泡
2.事件绑定问题
3.事件处理函数
主讲教师：Head老师
一．事件冒泡
事件流
事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。
事件冒泡，是从里往外逐个触发。事件捕获，是从外往里逐个触发。那么现代的浏览器默认情况下都是冒泡模型，而捕获模式则是早期的Netscape默认情况。而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。
<!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>事件冒泡</title>
<style>
#ad{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="ad">
<input type="button" id="ae" value="点击">
</div>
<script>
var ad = document.getElementById("ad");
var ae = document.getElementById("ae");
ae.onclick=function(evt){
alert(1);
stopPro(evt);
}
ad.onclick=function(evt){
alert(2);
stopPro(evt);
}
//w3c 和 IE 阻止事件冒泡
function stopPro(evt){
var e = evt || window.event;
window.event?e.cancelBubble = true : e.stopPropagation();
}
</script>
</body>
</html>此时，点击按钮弹出1，不在弹出2
二.事件绑定问题
传统事件绑定有内联模型和脚本模型，内联模型我们不做讨论，基本很少去用。先来看一下脚本模型，脚本模型将一个函数赋值给一个事件处理函数。
<!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>事件绑定</title>
<style>
#ad{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="ad">
<input id="ae"type="button" value="按钮">
</div>
<script>
//问题
window.onload=function(){
alert('ad');
}
window.onload=function(){
alert('ae');
}
//后面的事件会覆盖前面的事件 只会弹出ae
//解决方法
window.onload=function(){
alert('ad');
}
if(typeof window.onload=='function'){
var saved = null;
saved=window.onload;
}
window.onload=function(){
alert('ae');
}
//此时，会分别弹出ad, ae
</script>
</body>
</html>三．事件处理函数
W3C事件处理函数
“DOM2级事件”定义了两个方法，用于添加事件和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数；事件名、函数、冒泡或捕获的布尔值(true表示捕获，false表示冒泡)。
window.addEventListener('load', function () {
alert('Lee');
}, false);
window.addEventListener('load', function () {
alert('Mr.Lee');
}, false);
IE事件处理函数
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的参数：事件名称和函数。
window.attachEvent('onload', function () {
var box = document.getElementById('box');
box.attachEvent('onclick', toBlue);
});
function toBlue() {
var that = window.event.srcElement;
that.className = 'blue';
that.detachEvent('onclick', toBlue);
that.attachEvent('onclick', toRed);
}
为了让IE和W3C可以兼容这个事件切换器，我们可以写成如下方式：
function addEvent(obj, type, fn) { //添加事件兼容
if (obj.addEventListener) {
obj.addEventListener(type, fn);
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, fn);
}
}