事件处理模型–事件冒泡、捕获
不论是冒泡还是捕获都是在说事件发生的顺序。
事件冒泡:
- 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(子元素先执行,父元素再执行)
事件捕获:
- 结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素。(父元素的功能先执行,子元素再执行)
IE没有捕获事件
触发顺序:先捕获,后冒泡
focus,blur,change,submit,reset,select等事件不冒泡。
有时候我们不需要事件冒泡或者是它影响了我们的话,我们可以取消它。
取消冒泡和阻止默认事件
取消冒泡:
- W3C标准event.stopPropagation();但不支持ie9以下版本
- IE独有event.cancelBubble = true;
- 封装取消冒泡函数stopBubble(event)
<body>
<div style = "width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
function stopBubble(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
</script>
</body>
阻止默认事件:
- 默认事件–表单提交,a标签跳转,右键菜单等
- 1.return false;以对象属性的方式注册的事件才生效
- 2.event.preventDefault();W3C标注,IE9以下不兼容
- 3.event.returnValue = false;兼容IE
- 封装阻止默认事件的函数cancelHandler(event);
<body>
<div style = "width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
function cancelHandle(event) {
if(event.preventDefault) {
event.preventDefault();
}else{
event.retrunValue = false;
}
}
</script>
</body>
事件对象
event||window.event用于IE
事件源对象(指当前触发的函数,例如当前点击的函数):
- event.target 火狐只有这个
- event.srcElement IE只有这个
- 这两个chrome都有
兼容性写法:
<body>
<div style = "width:100px;height:100px;background-color:red;"></div>
<script type="text/javascript">
wrapper.onclick = function(e) {
var event = e || window.event; //事件对象
var target = event.target || event.srcElement; //事件源对象
</script>
</body>
事件委托
事件委托就好比一种方法,来帮助我们简化效率,大多数用于“在我们需要绑定所有子元素时,一个一个绑定效率太低且不利于后来的灵活变化,所以我们利用事件冒泡的属性,来建立一种事件委托的方法。”
利用事件冒泡,和事件源对象进行处理
优点:
1.性能好:不需要循环所有的元素一个个绑定事件
2.灵活:当有新的子元素时不需要重新绑定事件
例题:
设计一个程序,点击li能打印相应的序号。
<body>
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
<li>4<li>
<li>5<li>
<li>6<li>
<li>7<li>
<li>8<li>
</ul>
<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e) {
var event = e || window.event; //事件对象
var target = event.target || event.srcElement; //事件源对象
cosnole.log(target.innerText); //(target:事件源对象)每次执行时,都打印的是它的事件源对象(表示当前所点击的对象)
}
</script>
</body>
我们并未给li添加任何事件,但是当我们点击li(事件源对象)时,会触发事件冒泡,使得ul的事件得以执行,这样不必为li一个一个添加事件,用事件冒泡的方法,显得很灵巧又高效,这就是事件委托。