一、事件处理
1、事件概述
事件:可被理解为是JavaScript侦测到的行为。
举例:这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。
事件处理程序:指的就是JavaScript为响应用户行为所执行的程序代码。
举例:用户单击button按钮,这个行为就会被JavaScript中的click事件侦测到;然后让其自动执行,为click事件编写的程序代码,如在控制台输出“按钮被单击”。
事件驱动式:是指在Web页面中JavaScript的事件,侦测到的用户行为,并执行相应的事件处理程序的过程。
举例:鼠标移入文本区域,文本区域变色这一过程。
事件流:事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播,这个事件传播的过程就是事件流。
事件流的传播顺序解决方案:网景(Netscape)提出了“事件捕获方式”、微软(Microsoft)提出了“事件冒泡方式”。
2、事件的绑定方式(行内绑定式、动态绑定式、事件监听式)
概述:事件绑定指的是为某个元素对象的事件绑定事件处理程序。
(1)行内绑定式
事件的行内绑定式是通过HTML标签的属性设置实现的。
<标签名 事件="事件的处理程序">
标签名可以是任意的HTML标签,如<div>标签、<button>标签等;
事件是由on和事件名称组成的一个HTML属性,如单击事件对应的属性名为onclick;
事件的处理程序指的是JavaScript代码,如匿名函数等。
(2)动态绑定式
解决的问题:JavaScript代码与HTML代码混合编写的问题。
实现方式:在JavaScript代码中,为需要事件处理的DOM元素对象,添加事件与事件处理程序。
DOM元素对象.事件 = 事件的处理程序;
事件的处理程序一般都是匿名函数或有名的函数。
行内绑定式与动态绑定式的异同
不同点:
实现语法不同,前者通过HTML标签的属性设置,后者在JS中处理DOM对象。
事件处理程序中关键字this的指向也不同。前者指向window对象,后者指向当前正在操作的DOM元素对象。
相同点:
同一个DOM对象的同一个事件只能有一个事件处理程序。
(3)事件监听式
解决的问题:同一个DOM对象的同一个事件只能有一个事件处理程序,即可给同一个DOM对象的同一个事件添加多个事件处理程序。
实现的方式:具有兼容性问题,一类是早期版本的IE浏览器(如IE6~8),一类遵循W3C标准的浏览器(以下简称标准浏览器)。
DOM对象.attachEvent(type, callback); //早期版本的IE浏览器
参数type指的是为DOM对象绑定的事件类型,它是由on与事件名称组成的,如onclick。
参数callback表示事件的处理程序。
DOM对象.addEventListener(type, callback, [capture]); //标准浏览器
参数type指的是DOM对象绑定的事件类型,它是由事件名称设置的,如click。
参数callback表示事件的处理程序。
参数capture默认值为false,表示在冒泡阶段完成事件处理,将其设置为true时,表示在捕获阶段完成事件处理。
事件监听式的两种不同实现方式的区别:
实现的语法不同。
事件处理程序的触发顺序也不相同,同一个对象的相同事件,早期版本IE浏览器的事件处理程序按照添加的顺序倒序执行。而标准浏览器的事件处理程序按照添加顺序正序执行。