JavaScript学习--Item35 事件流与事件处理
1. 事件处理
1.1. 绑定事件方式
（1）行内绑定
语法： //最常用的使用方式
<元素 事件=”事件处理程序”>
（2）动态绑定
//结构+样式+行为分离的页面（html+css+js事件）
语法：
对象.事件=事件处理程序
行内绑定和动态绑定的重要区别：
以上程序是不可用的，点击div时，执行test函数，这时，test中的this表示window对象
因为：
我们定义test函数，实际上相应于在window对象下定义了test属性
test(); —> 相当于 window.test();
所以test函数在执行时，里面的this指向window“谁”调用了函数，this指向“谁”
<html>
<head>
<script>
window.onload=function(){
document.getElementById('btnok').onclick=function(){
alert('hello');
};
//2、动态绑定
document.getElementById('div1').onclick=test;
};
</script>
</head>
<body>
<input type='button' id='btnok' value='确定'>
<script>
function test(){
this.style.color='red';
}
</script>
<div id='div1'>javascript</div>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
以上程序是可用的，对象.onclick 在执行test函数时，test函数指向div1元素
1.2 事件监听
我们能不能为一个dom对象的同一个事件指定多个事件处理程序？
例1：通过这题，我们发现，如果为一个对象的同一个事件指定多个事件处理程序，那么，后面指定的程序会覆盖前面的。
<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').onclick=fn1;
document.getElementById('div1').onclick=fn2;
};
</script>
<div id='div1'>test</div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
如果我们想为一个对象的某个事件指定多个事件处理，可以考虑使用事件监听。
事件监听语法：
IE：
attachEvent(type,callback)
type：事件名 如：onclick、onsubmit、onchange等
callback：事件处理程序
基于W3C模型：
addEventListener(type,callback,capture)
Type：事件名 ，没有“on”前缀 如：click、submit、change
Callback：事件处理程序
Capture：事件模型 （可选参数） （冒泡模型、捕捉模型） true：捕捉模型
false：冒泡模型 （默认值）
代码示例：
<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').attachEvent('onclick',fn1);
document.getElementById('div1').attachEvent('onclick',fn2);
};
</script>
<div id='div1'>test</div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
W3c：
<body>
<script>
function fn1(){
alert('first');
}
function fn2(){
alert('second');
}
window.onload=function(){
document.getElementById('div1').addEventListener('click',fn1);
document.getElementById('div1').addEventListener('click',fn2);
};
</script>
<div id='div1'>test</div>
</body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
总结：
IE和W3C事件监听的不同：
-
监听方法不同：IE attachEvent 、W3C addEventListener
-
监听参数不同：IE 没有模型参数、W3C有模型参数 ，默认flase,为事件冒泡。
-
触发顺序：IE 8及以下的浏览器触发时是先绑定、后触发 W3C浏览器是先绑定、先触发
-
事件名称不同：IE事件需要”on”前缀，W3C不需要’on’前缀
解决事件监听的兼容性问题：
2. 事件流
2.1 事件模型
事件模型（事件的触发顺序）分为两种：Body嵌套div1，div1嵌套div2，div2嵌套div3
1）冒泡模型
2）捕捉模型
目前，IE只支持冒泡模型
2.2 事件冒泡
事件冒泡是指事件响应时会上水冒一样上升至最顶级元素。
简单点说。冒泡就是从下往上，像鱼吐泡，泡泡是从下往上升的，也就是DOM元素被触法事件时(此时的dom元素为目标元素)，目标元素事件执行后，它的祖先元素所绑定的事件会向上顺序执行。
如下代码，有四个div嵌套元素，均绑定了click事件，addEventListener函数的第三个参数设置为false说明不为捕获事件，即为冒泡事件。该代码执行结果如下：
<div id="one" style="height: 100px;background: black;">
<div id="two" style="height: 50px;background: blue;">
<div id="three" style="height: 30px;background: green;">
<div id="four" style="height: 10px;background: red;">
</div>
</div>
</div>
</div>
<script type='text/javascript'>
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
var four=document.getElementById('four');
one.addEventListener('click',function(){
alert('one');
},false);
two.addEventListener('click',function(){
alert('two');
},false);
three.addEventListener('click',function(){
alert('three');
},false);
four.addEventListener('click',function