JavaScript笔记事件.docx
- 文档编号：9166569
- 上传时间：2023-05-17
- 格式：DOCX
- 页数：29
- 大小：25.28KB
JavaScript笔记事件.docx
《JavaScript笔记事件.docx》由会员分享，可在线阅读，更多相关《JavaScript笔记事件.docx（29页珍藏版）》请在冰点文库上搜索。
JavaScript笔记事件
JavaScript笔记：
事件
JavaScript和HTML之间的交互是通过事件实现的。
事件，就是文档或者浏览器窗口中发生一些特定的交互瞬间。
可以使用侦听器来预定时间，以便事件发生的时候，执行相应的代码。
1、事件流
首先要明确的概念：
当你点击了一个按钮，那么，点击事件将不止发生在按钮上，同时也发生在按钮的所有父级元素上。
事件流，描述的是从页面中接受时间的顺序。
1、事件冒泡
即事件由最具体的元素接受，然后逐级向上传递。
例如下面这样的页面结构：
DOCTYPEhtml>
如果你点击了div，那么事件就会从div开始，div》body》html》document这样传递上去。
所有的现代浏览器都支持事件冒泡。
2、事件捕获
事件捕获的事件顺序和事件冒泡正好相反，最父级的元素将最先接收到事件，然后依次向下传递。
大多数浏览器也都支持事件捕获。
3、DOM事件流
DOM2级事件规定的事件流包括三个阶段：
事件捕获阶段，处于目标阶段和事件冒泡阶段。
首先发生的是事件捕获阶段，为截获事件提供了机会，然后是实际目标接受到事件，最后是事件冒泡阶段，可以在这个阶段对事件作出相应。
还以前面的html页面为例，单击div会按照如下的顺序触发事件：
document–html–body–div–body–html–document。
在DOM事件流中，实际的目标div在捕获阶段不会接收到事件。
即使DOM2级事件规范明确要求在捕获阶段时不会涉及到事件目标，但是IE9、Safari、Chrome、Firefox一季Opera9.5和更高版本都会在捕获阶段触发事件对象上的事件。
结果，就是有两个机会在目标对象上面操作事件。
2、事件处理程序
事件，就是用户或者浏览器执行的某种动作。
例如：
click、load、mouseover等都是事件的名字。
而响应某个事件的函数就叫做事件处理程序。
1、HTML事件处理程序
某个元素支持的每种事件，都可以用和事件处理程序同名的HTML性质确定，这个特性的值应该是可以执行的JS代码：
1
或者，函数可以单独写在JS代码片中：
functionshowMessage（）{
alert（"Helloworld!
"）;
}
这样指定事件处理程序有一些独到之处。
首先，这样会创建一个封装着元素属性值的函数。
这个函数中有一个局部变量event，也就是事件对象。
//输出click
1
2
同时，在函数内部this指针等于事件的目标函数：
--"ClickMe"-->
上面这段代码可以化简为如下所示：
--"ClickMe"-->
另外，如果当前元素是一个表单输入元素，它还可以访问其他表单字段：
不过，在HTML中指定事件处理程序存在缺点：
存在一个时差的问题。
因为用户可能在HTML元素一出现就点击，触发事件，但是事件处理函数可能是在页面底端写的，那么此时，就会出现错误。
为此，很多HTML事件处理程序都被放在try-catch块中，不让错误浮出水面：
1
2、DOM0级事件处理程序
通过JS指定事件处理程序的传统方式：
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（）{
alert（"Clicked"）;
};
需要注意，在这段代码执行前，事件处理程序不会被指定。
因此若代码在页面中位于按钮的后面，可能在有一段时间内，点击按钮无法实现功能。
使用DOM0级的事件处理程序被认为是元素的方法，因此，这时候事件处理方法是在元素的作用域内执行，可以使用this来访问元素。
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（）{
alert（this.id）;//"myBtn"
};
另外，事件处理程序也可以被删除：
btn.onclick=null;
1
2、DOM2级事件处理程序
DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：
addEventListener（）和removeEventListener（）。
所有的DOM节点中都包含着两个方法，并且该方法接受三个参数：
要处理的事件名，作为事件的处理程序，和一个布尔值。
布尔值是真表示：
在捕获阶段调用程序；是假则表示，在冒泡阶段调用程序。
并且事件可以添加多个。
代码示例：
varbtn=document.getElementById（"myBtn"）;
btn.addEventListener（"click",function（）{
alert（this.id）;
},false）;
btn.addEventListener（"click",function（）{
alert（"Helloworld!
"）;
},false）;
通过addEventListener添加的函数可以通过removeEventListener函数移除，移除时传入的参数和添加的方法相同。
但是需要注意的是，想上面那样添加的匿名函数是无法移除的。
如果想要移除，需要这样定义：
varbtn=document.getElementById（"myBtn"）;
varhandler=function（）{
alert（this.id）;
};
btn.addEventListener（"click",handler,false）;
//一些其他的操作
btn.removeEventListener（"click",handler,false）;
注意，一般都把事件添加在冒泡阶段，这样可以最大限度的兼容浏览器。
4、IE事件处理程序
IE中实现了两个与DOM类似的方法：
attachEvent（）和detachEvent（）。
这两个方法接受相同的两个参数，事件处理名称和事件处理函数。
由于IE8以前只接受冒泡，所以通过attachEvent添加的函数都是在冒泡阶段被执行。
varbtn=document.getElementById（"myBtn"）;
btn.attachEvent（"onclick",function（）{
alert（"Clicked"）;
}）;
attachEvent方法和addEventListener方法的主要区别在于事件处理函数的作用域不同，前者的作用域是全局作用域，也就是说，在函数中使用this是window。
varbtn=document.getElementById（"myBtn"）;
btn.attachEvent（"onclick",function（）{
alert（this===window）;//true
}）;
在跨浏览器编写代码时，这一点非常重要。
使用attachEvent方法也可以为事件添加多个函数：
varbtn=document.getElementById（"myBtn"）;
btn.attachEvent（"onclick",function（）{
alert（"Clicked"）;
}）;
btn.attachEvent（"onclick",function（）{
alert（"Helloworld!
"）;
}）;
不过，与DOM程序不同的是，函数出发的次序是后绑定的先触发。
使用attachEvent添加的方法可以通过detachEvent函数移除。
同样的，匿名函数添加了就无法移除。
varbtn=document.getElementById（"myBtn"）;
varhandler=function（）{
alert（"Clicked"）;
};
btn.attachEvent（"onclick",handler）;
//其他功能代码
btn.detachEvent（"onclick",handler）;
5、跨浏览器的事件处理函数
为了以跨浏览器的方式处理事件，不少开发人员会使用隔离浏览器差异的JS库，还有一些人会自己开发最适合的浏览器处理方法。
其实跨浏览器只要适当的使用能力检测即可。
要保证处理的事件在大部分浏览器中能正常运行，只需关注冒泡阶段。
一段跨浏览器的实例代码：
varEventUtil={
addHandler:
function（element,type,handler）{
if（element.addEventListener）{
element.addEventListener（type,handler,false）;
}elseif（element.attachEvent）{
element.attachEvent（"on"+type,handler）;
}else{
element["on"+type]=handler;
}
},
removeHandler:
function（element,type,handler）{
if（element.removeEventListener）{
element.removeEventListener（type,handler,false）;
}elseif（element.detachEvent）{
element.detachEvent（"on"+type,handler）;
}else{
element["on"+type]=null;
}
}
};
//使用方法
varbtn=document.getElementById（"myBtn"）;
varhandler=function（）{
alert（"Clicked"）;
};
EventUtil.addHandler（btn,"click",handler）;
//其他代码
EventUtil.removeHandler（btn,"click",handler）;
3、事件对象
在触发DOM某个事件的时候，会产生一个事件对象event，这个对象包含着与事件有关的全部信息。
包括导致事件的信息，事件的类型等等。
例如，鼠标点击事件的事件对象包含着鼠标点击的位置，而键盘导致的事件产生的事件对象则包括按键的信息。
所有浏览器都支持event对象，只是，支持方式不同。
1、DOM中的事件对象
兼容DOM的浏览器，会将一个event对象传入到事件处理程序中，无论指定事件处理程序时使用的什么方法，都会存在event对象。
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（event）{
alert（event.type）;//"click"
};
btn.addEventListener（"click",function（event）{
alert（event.type）;//"click"
},false）;
在通过html特性指定处理程序时，变量event中保存着event对象。
1
在需要一个函数处理多个事件的时候，可以使用event.type属性：
varbtn=document.getElementById（"myBtn"）;
varhandler=function（event）{
switch（event.type）{
case"click":
alert（"Clicked"）;
break;
case"mouseover":
event.target.style.backgroundColor="red";
break;
case"mouseout":
event.target.style.backgroundColor="";
break;
}};
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
要阻止特定事件的默认行为，可以使用preventDefault方法。
例如，如下代码可以阻止导航链接：
varlink=document.getElementById（"myLink"）;
link.onclick=function（event）{
event.preventDefault（）;
};
另外，stopPropagation方法用于阻止事件在DOM中的传播。
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（event）{
alert（"Clicked"）;
event.stopPropagation（）;
};
document.body.onclick=function（event）{
alert（"Bodyclicked"）;
};
事件对象的eventPhase属性，可以用来确定事件目前处于事件流的哪个阶段。
如果是捕获阶段，则该值为1；如果在冒泡阶段，该值为3；如果事件正位于目标上，则该值为2。
来看例子：
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（event）{
alert（event.eventPhase）;//2
};
document.body.addEventListener（"click",function（event）{
alert（event.eventPhase）;//1
},true）;
document.body.onclick=function（event）{
alert（event.eventPhase）;//3
};
注意，只有在程序处理过程中，event对象才存在，当事件之行完毕，event对象就会被销毁。
2、IE中的事件对象
与访问DOM中的event不同，要访问IE中的event有几种不同的方式，取决于指定事件处理程序的方法。
在使用DOM0级方法添加事件时，event对象作为window的一个属性存在。
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（）{
varevent=window.event;
alert（event.type）;//"click"
};
可是，如果事件是用attachEvent添加的，那么，就会有一个event对象作为参数被传入事件处理程序中。
varbtn=document.getElementById（"myBtn"）;
btn.attachEvent（"onclick",function（event）{
alert（event.type）;//"click"
}）;
在使用attachEvent的情况下，其实也可以使用window.event来访问事件对象。
如果是实用html特性指定的事件处理程序，那么，同在DOM中的事件模型相同，也可以通过变量event来访问事件对象：
1
IE的event事件同样也包括与创建它的事件相关的属性和方法：
event.srcElement：
事件的目标（等于DOM中的target）
这里，需要注意作用域和this指向谁的问题：
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（）{
alert（window.event.srcElement===this）;//true
};
btn.attachEvent（"onclick",function（event）{
alert（event.srcElement===this）;//false
}）;
returnValue：
默认为true，但是设置成false就可以取消事件的默认行为。
与DOM中的preventDefault方法相同。
varlink=document.getElementById（"myLink"）;
link.onclick=function（）{
window.event.returnValue=false;//阻止链接默认行为
};
cancelBubble：
与DOM中的stopPropagation相同。
varbtn=document.getElementById（"myBtn"）;
btn.onclick=function（）{
alert（"Clicked"）;
window.event.cancelBubble=true;
};
document.body.onclick=function（）{
alert（"Bodyclicked"）;
};
4、跨浏览器的事件对象实例代码：
varEventUtil={
addHandler:
function（element,type,handler）{
//省略的代码
},
getEvent:
function（event）{
returnevent?
event:
window.event;
},
getTarget:
function（event）{
returnevent.target||event.srcElement;
},
preventDefault:
function（event）{
if（event.preventDefault）{
event.preventDefault（）;
}else{
event.returnValue=false;
}
},
removeHandler:
function（element,type,handler）{
//省略的代码
},
stopPropagation:
function（event）{
if（event.stopPropagation）{
event.stopPropagation（）;
}else{
event.cancelBubble=true;
}
}
};
4、事件类型
事件汇总：
UI事件
焦点事件
鼠标事件
滚轮事件
文本事件
键盘事件
合成事件
变动事件
1、UI事件
ui事件汇总：
load，unload，abort，error，select，resize，scroll
这些事件都被DOM2规定为HTML事件，要确定浏览器是否支持DOM2级规定的HTML事件，可以用如下代码：
varisSupported=document.implementation.hasFeature（"HTMLEvents","2.0"）;
1
注意，只有根据DOM2级事件实现这些事件的浏览器才会返回true。
load事件：
方法1:
window.onload=function（event）{
alert（"嗨"）;
};
方法2:
DOCTYPEhtml>
'）">