javascript事件流是什么?有哪些事件流?
常用的事件主要有:
(1)单击事件:onclick。用户单击鼠标按键时产生的事件,同时。nclick指定的事件处理程序或代码将被调用执行.
(2)改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。
(3)选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:
<ipnut type="text" value="默认信息”onselect=alert(”您选中T文本框中的文字”)>
(4)获得焦点事件:onfocus。用户单击text或textarea以及select对象,即光标落在文本框或选择框时会产生该事件。如:
<select name= "zhengjian" onfocus=alert(”我成为焦点”)>
(5)失去焦点事件:onblur.失去焦点事件正好与获得焦点事件相对,当text或textarea以及select对象不再拥有焦点而退出后台时,引发该事件。
(6)载人文件事件:onload,’当页面文件载人时产生该事件。onload的一个作用就是在首次载人一个页面文件时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用,本事件是window的事件,但是在HTML中指定事件处理程序时,一般把它写在<body>标记中。如:
<body onload=alert(”正在加载页面,请等待一”)>
(7)卸载文件事件:onunload。与载人文件事件。nload正好相反,当Web页面退出时引发的事件,并可更新。ookie的状态。如:
<body onunload=confirm(”你确定要离开本页?”)>
(8)鼠标镇盖事件:onmouseover, onmouseover是当鼠标位于元素上方时所引发的事件。如:
<input type= "boutton" value=”按钮”onmouseover= "window. status=‘请您注意下面的状态栏·;return true">
(9)鼠标离开事件:onmouseout, onmouseout是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用,可以创建动态按钮的效果。
(10)一般事件。
ondbclick:鼠标双击事件。
onkeypress:当键盘上的某个键被按下并且释放时触发的事件,要求页面内必须有激活的对象。
onkeydown:当键盘上某个键被按下时触发的事件,要求页面内必须有激活的对象。
onkeyup:当键盘上某个键被放开时触发的事件,要求页面内必须有激活的对象。
(11)页面相关事件。
onabort:图片在下载时被用户中断时触发的事件。
onbeforeunload:当前页面的内容将要被改变时触发的事件。
JavaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为:
冒泡型事件,而FF下称之为:捕获型事件。顾名思义冒泡型事件是从低而上的触发机制,而捕获型事件则是从上到下的触发机制。《JavaScript高级程序设计》一书提到:
DOM事件流同时支持两种事件触发机制,但是捕获型事件先发生。注意因为事件的目标(也就是DOM树最深的节点)是最精确的元素,实际上它会连续接收两次事件,一次是在捕获过程中,一次是在冒泡过程中。事情到底是不是这样呢?观察下面的程序:
<html onclick=" clickHandle('html'); ">
<head>
<title>JAVASCRIPT事件流</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<script type="text/javascript">
function clickHandle(ele){
alert(ele);
}
</script>
</head>
<body onclick=" clickHandle('body'); ">
<div style="bgcolor:red" onclick=" clickHandle('div'); ">click me!</div>
</body>
</html>
IE:点击 click me 运行顺序为:DIV-->BODY-->HTML 点击页面其他部分:BODY-->HTML
FF: 点击 click me 运行顺序为:DIV-->HTML-->BODY 点击页面其他部分:HTML-->BODY
JavaScript为我们提供了三种事件处理函数的分配方式,第一种就像上面的程序一样,是在HTML代码中分配事件处理函数。
第二种方法是在JavaScript中分配事件处理函数,这种方法首先必须得获得要分配事件处理函数的元素的引用,参考以下程序:
1 window.onload = function(){
2 var oDiv = document.getElementById("contentDiv");
3 oDiv.onclick = function(){
4 alert(oDiv.innerHTML);
5 }
6 }
就像上面提到的,该方法在分配事件处理函数时必须保证已经获得对该元素的引用,所以这个程序才把oDiv的onclick事件放在了onload事件的内部,否则会报oDiv未被定义。
还有一个需要注意的地方是使用这种事件处理函数的分配方式时只能为某个特定的事件分配一个函数且事件函数的签名必须小写,否则前面分配的函数会被后面的函数所覆盖。
如果想为同一个事件分配两个以上的处理函数,需要采用第三种事件处理函数分配方式。
在IE中我们使用obj.attachEvent()方法为某个元素分配函数,使用obj.detachEvent()方法为某个元素分离事件处理函数,而在DOM(以FireFox为例)中我们使用addEventListener()方法分配函数,使用removeEventListener()方法分离函数。
参考一下代码:
1 window.onload = function(){
2 var oDiv = document.getElementById("contentDiv");
3 var func1 = function(){
4 alert(oDiv.innerHTML);
5 }
6 var func2 = function(){
7 alert("also " + oDiv.innerHTML);
8 }
9 //IE
10 if(oDiv.attachEvent){
11 oDiv.attachEvent("onclick",func1);
12 oDiv.attachEvent("onclick",func2);
13 //oDiv.detachEvent("onclick",func1);
14 } else if(oDiv.addEventListener){
15 //FireFox
16 oDiv.addEventListener("click",func1,true);
17 oDiv.addEventListener("click",func2,true);
18 //oDiv.removeEventListener("click",func1,true);
19 }
20
21 }
我们来说明一下IE下与FireFox下这种事件处理函数的不同点:
1、在函数的第一个参数中,IE下必须有"on"做为前缀,而FF下不用,两种情况下处理函数签名必须小写。
2、FireFox下的addEventListener()函数的第三个参数表示的是:true表示在捕获阶段增加事件处理函数,false表示在冒泡阶段增加事件处理函数,但是由于FireFox不支持冒泡事件流,所以这里我们设成True或者Flase好像没什么区别。
但是要注意的一点就是,如果在 addEventListener()中第三个参数设为true,那么在removeEventListener()方法中的第三个参数一定也要设为相同的值,否则方法失效。
3、在运行时阶段,IE首先执行的是最后边一个被增加的事件处理函数然后才是倒数第二个以此类推,但是在FireFox下与IE相反,他会按照事件处理函数的添加顺序执行。
具体的有事件冒泡事件捕获DOM事件流。
1、事件冒泡又叫IE的事件流,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
2、事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。
3、DOM2级事件流规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应。