JavaScript笔记事件.docx

1、JavaScript笔记事件JavaScript笔记：事件JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或者浏览器窗口中发生一些特定的交互瞬间。可以使用侦听器来预定时间，以便事件发生的时候，执行相应的代码。1、事件流首先要明确的概念：当你点击了一个按钮，那么，点击事件将不止发生在按钮上，同时也发生在按钮的所有父级元素上。事件流，描述的是从页面中接受时间的顺序。1、事件冒泡即事件由最具体的元素接受，然后逐级向上传递。 例如下面这样的页面结构： Event Bubbling Example Click Me如果你点击了div，那么事件就会从div开始，div body h

2、tml document这样传递上去。所有的现代浏览器都支持事件冒泡。2、事件捕获事件捕获的事件顺序和事件冒泡正好相反，最父级的元素将最先接收到事件，然后依次向下传递。大多数浏览器也都支持事件捕获。3、DOM事件流DOM2级事件规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会，然后是实际目标接受到事件，最后是事件冒泡阶段，可以在这个阶段对事件作出相应。还以前面的html页面为例，单击div会按照如下的顺序触发事件：documenthtmlbodydivbodyhtmldocument。 在DOM事件流中，实际的目标div在捕获阶

3、段不会接收到事件。 即使DOM2级事件规范明确要求在捕获阶段时不会涉及到事件目标，但是IE9、Safari、Chrome、Firefox一季Opera 9.5和更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。2、事件处理程序事件，就是用户或者浏览器执行的某种动作。例如：click、load、mouseover等都是事件的名字。而响应某个事件的函数就叫做事件处理程序。1、HTML事件处理程序某个元素支持的每种事件，都可以用和事件处理程序同名的HTML性质确定，这个特性的值应该是可以执行的JS代码：1或者，函数可以单独写在JS代码片中： function s

4、howMessage() alert(Hello world!); 这样指定事件处理程序有一些独到之处。首先，这样会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象。/ 输出click12同时，在函数内部this指针等于事件的目标函数：上面这段代码可以化简为如下所示：另外，如果当前元素是一个表单输入元素，它还可以访问其他表单字段： 不过，在HTML中指定事件处理程序存在缺点：存在一个时差的问题。因为用户可能在HTML元素一出现就点击，触发事件，但是事件处理函数可能是在页面底端写的，那么此时，就会出现错误。为此，很多HTML事件处理程序都被放在try-catch

5、块中，不让错误浮出水面：12、DOM0级事件处理程序通过JS指定事件处理程序的传统方式：var btn = document.getElementById(myBtn);btn.onclick = function() alert(Clicked);需要注意，在这段代码执行前，事件处理程序不会被指定。因此若代码在页面中位于按钮的后面，可能在有一段时间内，点击按钮无法实现功能。使用DOM0级的事件处理程序被认为是元素的方法，因此，这时候事件处理方法是在元素的作用域内执行，可以使用this来访问元素。var btn = document.getElementById(myBtn);btn.oncl

6、ick = function() alert(this.id); /myBtn;另外，事件处理程序也可以被删除：btn.onclick = null; 12、DOM2级事件处理程序DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有的DOM节点中都包含着两个方法，并且该方法接受三个参数：要处理的事件名，作为事件的处理程序，和一个布尔值。布尔值是真表示：在捕获阶段调用程序；是假则表示，在冒泡阶段调用程序。并且事件可以添加多个。代码示例：var btn = document.getElementB

7、yId(myBtn);btn.addEventListener(click, function() alert(this.id);, false);btn.addEventListener(click, function() alert(Hello world!);, false);通过addEventListener添加的函数可以通过removeEventListener函数移除，移除时传入的参数和添加的方法相同。但是需要注意的是，想上面那样添加的匿名函数是无法移除的。 如果想要移除，需要这样定义：var btn = document.getElementById(myBtn);var ha

8、ndler = function() alert(this.id);btn.addEventListener(click, handler, false);/一些其他的操作btn.removeEventListener(click, handler, false);注意，一般都把事件添加在冒泡阶段，这样可以最大限度的兼容浏览器。4、IE事件处理程序IE中实现了两个与DOM类似的方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数，事件处理名称和事件处理函数。由于IE8以前只接受冒泡，所以通过attachEvent添加的函数都是在冒泡阶段被执行。var bt

9、n = document.getElementById(myBtn);btn.attachEvent(onclick, function() alert(Clicked););attachEvent方法和addEventListener方法的主要区别在于事件处理函数的作用域不同，前者的作用域是全局作用域，也就是说，在函数中使用this是window。var btn = document.getElementById(myBtn);btn.attachEvent(onclick, function() alert(this = window); /true);在跨浏览器编写代码时，这一点非常重要

10、。 使用attachEvent方法也可以为事件添加多个函数：var btn = document.getElementById(myBtn);btn.attachEvent(onclick, function() alert(Clicked););btn.attachEvent(onclick, function() alert(Hello world!););不过，与DOM程序不同的是，函数出发的次序是后绑定的先触发。 使用attachEvent添加的方法可以通过detachEvent函数移除。同样的，匿名函数添加了就无法移除。var btn = document.getElementByI

11、d(myBtn);var handler = function() alert(Clicked);btn.attachEvent(onclick, handler);/ 其他功能代码btn.detachEvent(onclick, handler);5、跨浏览器的事件处理函数为了以跨浏览器的方式处理事件，不少开发人员会使用隔离浏览器差异的JS库，还有一些人会自己开发最适合的浏览器处理方法。其实跨浏览器只要适当的使用能力检测即可。要保证处理的事件在大部分浏览器中能正常运行，只需关注冒泡阶段。 一段跨浏览器的实例代码：var EventUtil = addHandler: function(ele

12、ment, type, handler) if (element.addEventListener) element.addEventListener(type, handler, false); else if (element.attachEvent) element.attachEvent(on + type, handler); else elementon + type = handler; , removeHandler: function(element, type, handler) if (element.removeEventListener) element.remove

13、EventListener(type, handler, false); else if (element.detachEvent) element.detachEvent(on + type, handler); else elementon + type = null; ;/ 使用方法var btn = document.getElementById(myBtn);var handler = function() alert(Clicked);EventUtil.addHandler(btn, click, handler); /其他代码EventUtil.removeHandler(bt

14、n, click, handler);3、事件对象在触发DOM某个事件的时候，会产生一个事件对象event，这个对象包含着与事件有关的全部信息。包括导致事件的信息，事件的类型等等。例如，鼠标点击事件的事件对象包含着鼠标点击的位置，而键盘导致的事件产生的事件对象则包括按键的信息。所有浏览器都支持event对象，只是，支持方式不同。1、DOM中的事件对象兼容DOM的浏览器，会将一个event对象传入到事件处理程序中，无论指定事件处理程序时使用的什么方法，都会存在event对象。var btn = document.getElementById(myBtn);btn.onclick = functi

15、on(event) alert(event.type); /click;btn.addEventListener(click, function(event) alert(event.type); /click , false);在通过html特性指定处理程序时，变量event中保存着event对象。1在需要一个函数处理多个事件的时候，可以使用event.type属性：var btn = document.getElementById(myBtn);var handler = function(event) switch(event.type) case click: alert(Clicke

16、d); 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方法。 例如，如下代码可以阻止导航链接：var link = document.getElementById(myL

17、ink);link.onclick = function(event) event.preventDefault();另外，stopPropagation方法用于阻止事件在DOM中的传播。var btn = document.getElementById(myBtn);btn.onclick = function(event) alert(Clicked); event.stopPropagation();document.body.onclick = function(event) alert(Body clicked);事件对象的eventPhase属性，可以用来确定事件目前处于事件流的哪

18、个阶段。如果是捕获阶段，则该值为1；如果在冒泡阶段，该值为3；如果事件正位于目标上，则该值为2。来看例子：var btn = 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.eventPh

19、ase); /3;注意，只有在程序处理过程中，event对象才存在，当事件之行完毕，event对象就会被销毁。2、IE中的事件对象与访问DOM中的event不同，要访问IE中的event有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件时，event对象作为window的一个属性存在。var btn = document.getElementById(myBtn);btn.onclick = function() var event = window.event; alert(event.type); /click;可是，如果事件是用attachEvent添加的，那么

20、，就会有一个event对象作为参数被传入事件处理程序中。var btn = document.getElementById(myBtn);btn.attachEvent(onclick, function(event) alert(event.type); /click);在使用attachEvent的情况下，其实也可以使用window.event来访问事件对象。如果是实用html特性指定的事件处理程序，那么，同在DOM中的事件模型相同，也可以通过变量event来访问事件对象：1IE的event事件同样也包括与创建它的事件相关的属性和方法：event.srcElement：事件的目标（等于DO

21、M中的target） 这里，需要注意作用域和this指向谁的问题：var btn = 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方法相同。var link

22、= document.getElementById(myLink);link.onclick = function() window.event.returnValue = false;/阻止链接默认行为;cancelBubble：与DOM中的stopPropagation相同。var btn = document.getElementById(myBtn);btn.onclick = function() alert(Clicked); window.event.cancelBubble = true;document.body.onclick = function() alert(Body

23、 clicked);4、跨浏览器的事件对象实例代码：var EventUtil = addHandler: function(element, type, handler) /省略的代码 , getEvent: function(event) return event ? event : window.event; , getTarget: function(event) return event.target | event.srcElement; , preventDefault: function(event) if (event.preventDefault) event.preven

24、tDefault(); 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，ab

25、ort，error，select，resize，scroll 这些事件都被DOM2规定为HTML事件，要确定浏览器是否支持DOM2级规定的HTML事件，可以用如下代码：var isSupported = document.implementation.hasFeature(HTMLEvents, 2.0);1注意，只有根据DOM2级事件实现这些事件的浏览器才会返回true。load事件：方法1:window.onload = function(event) alert(嗨);方法2: Load Event Example 图像上也可以指定load事件，同样有两种方式：var image1 =

26、document.getElementById(myImg);image1.onload = function(event) alert(picture);1关于加载图像的其它代码，这里用到了自定义的变量EventUtil：var EventUtil = addHandler: function(element, type, handler) if (type = load) element.onload = handler; , getEvent: function(event) return event ? event : window.event; , getTarget: function(event) return event.target | event.srcElement; , preventDefault: function(event) if (event.preventDefault) event.preventDefault(); else event.returnValue = false; , removeHandler: functi