一.基本概念:事件流是什么?有哪些事件流?
事件流
是描述
页面接收事件的顺序
具体的有
事件冒泡
事件捕获
DOM事件流
事件冒泡
又叫IE的事件流,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
事件捕获
的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。
DOM2级事件流
规定的事件流包括三个阶段
:事件捕获阶段
、处于目标阶段
和冒泡阶段
。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应。以简单的HTML页面为例,单击
<
div>元素会按照下图顺序触发事件
二.浏览器支持的情况
IE8及更早的版本不支持DOM事件流
三.事件和事件处理程序的区别?
事件
是用户或浏览器执行的动作,如 click
事件处理程序
是响应某个事件的函数:如 onclick();
也称为事件侦听器
四.事件处理程序分为哪几类?
1.html事件处理程序
2.DOM0级事件处理程序
3.DOM2级事件处理程序
4.IE事件处理程序
5.跨浏览器事件处理程序
html事件处理程序优点
:简单,方便缺点
:javascript和html紧密耦合,不方便维护和修改DOM0级事件处理程序
:函数式编程,支持IE8以下
DOM2级事件处理程序
:用addEventListener()
可以添加多个事件处理函数,即多个hander()
<body>
<button onclick="html_event();">html event处理程序</button>
<button id="btn_dom0">DOM0 events</button>
<button id="btn_dom2">DOM2 events</button>
<script type="text/javascript">
//html event处理程序
function html_event(){
alert("this a html event处理程序");
}
function g(id){
return document.getElementById(id);
}
//DOM0 events处理程序
var btn_dom0=g("btn_dom0");
btn_dom0.onclick= function(){
alert("DOM0 events处理程序!");
}
//this is a DOM2 event!
var btn_dom2=g("btn_dom2");
function hander(){
alert("this is a DOM2 event!");
}
btn_dom2.addEventListener("click",hander,false);
//三个参数分别是,
//事件:click,
//处理函数hander(),
//false表示在事件冒泡中调用处理hander()函数,ture表示在事件捕获阶段调用
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。