Javascript事件

事件就是文档浏览器窗口中发生的一些特定的交互瞬间。

事件流


事件流描述的是从页面中接收事件的顺序

事件冒泡

IE的事件流叫做事件冒泡,既事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。

事件由内向外进行触发

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Event</title>
</head>
<body>
<div>Click Me</div>
</body>
</html>

点击

元素,事件冒泡顺序为:<div> -> <body> -> <html> -> document

所有现代浏览器都支持事件冒泡,但在具体实现上有一些差别

事件捕获

事件捕获是指不太具体的节点更早接收到事件,而最具体的节点应该最后接收事件,

事件由外向内进行触发

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Event</title>
</head>
<body>
<div>Click Me</div>
</body>
</html>

点击

元素,事件冒泡顺序为:document -> <html> -> <body> -> <div>

老版本浏览器不支持,一般不使用

DOM事件流

事件流的三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Event</title>
</head>
<body>
<div>Click Me</div>
</body>
</html>

事件流顺序为:document -> <html> -> <body> -> <div> -> <body> -> <html> -> document

document -> <html> -> <body>为事件捕获阶段

为处于目标阶段

<div> -> <body> -> <html> -> document为事件冒泡阶段

事件触发元素被认为是事件冒泡的一部分,事件捕获阶段不会接收到事件

事件处理程序


响应某个事件的函数叫做事件处理程序,事件处理程序的名字以“on”开头。

HTML事件处理程序

某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定。

1
2
<!--将onclick事件绑定至input标签-->
<input type="button" value="Click Me" onclick="alert('Hi')" />

不能够使用未转义字符,例如:“ ‘ < > & 等

通过event变量可以直接访问时间对象,this表示当前标签。

1
2
3
4
<!--输出 "click"-->
<input type="button" value="Click Me" onclick="alert(event.type)" />
<!--输出 "Click Me"-->
<input type="button" value="Click Me" onclick="alert(this.value)" />

DOM0级事件处理程序

将函数赋值给一个事件处理程序属性。

优点:简单、跨浏览器优势。

1
2
3
4
5
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id); // "myBtn" this指向当前标签元素
};
btn.onclick = null; // 删除DOM0级事件

DOM2级事件处理程序

  1. addEventListener("event", function, boolean)方法:指定事件处理程序。
  2. removeEventListener("event", function, boolean)方法:删除事件处理程序。

event:事件名称。

function:事件处理函数。

booleantrue——捕获阶段调用,false——冒泡阶段调用。

可以为一个事件添加多个事件处理程序,按顺序执行。

使用addEventListener()方法添加的事件处理程序只能用removeEventListener()方法删除。

所以当addEventListener()方法添加事件处理程序为匿名函数的时候,removeEventListener()方法无效。

IE事件处理程序

  1. attachEvent(onEvent, function):指定事件处理程序。
  2. detachEvent(onEvent, function):删除事件处理程序。

事件处理程序作用域为全局作用域,所以this指向window对象。

可以为一个事件添加多个事件处理程序,按相反顺序执行。

事件对象


当触发DOM上的某个事件时,会产生一个时间对象event,这个对象中包含着所有与事件有关的信息。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。

  • event对象属性及方法:
属性/方法 类型 读/写 说明
bubbles Boolean 只读 表明事件是否冒泡
cancelable Boolean 只读 表明是否可以取消事件的默认行为
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素
defaultPrevented Boolean 只读 true表示已经调用了preventDefault()方法(DOM3)
detail Integer 只读 与事件相关的细节信息
eventPhase Integer 只读 调用事件处理程序的阶段:1表示捕获阶段,2表示“处于目标”,3表示冒泡阶段
preventDefault() Function 只读 取消事件的默认行为。如果cancelabletrue,则可以使用这个方法
stopImmdiatePropagation() Function 只读 取消事件的进一步捕获或冒泡,同时阻止任何时间处理程序被调用(DOM3)
stopPropagation() Function 只读 取消时间的进一步捕获或冒泡。如果bubblestrue,则可使用这个方法
target Element 只读 事件的目标
trusted Boolean 只读 true表示事件是浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的(DOM3)
type String 只读 被触发的事件类型
view AbstractView 只读 与事件关联的抽象视图。等同于发生事件的window对象

IE中的事件对象

使用DOM0级方法event对象作为window对象的一个属性。

  • event对象属性和方法:
属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 默认值为false,但将其设置为true就可以取消事件冒泡(与DOM中的stopPropagation()方法相同)
returnValue Boolean 读/写 默认值为true,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法相同)
srcElement Element 只读 事件的目标(与DOM中的target属性相同)
type String 只读 被触发的事件的类型

事件类型


DOM3级事件类型:

  • UI事件:当用户与页面上的元素交互时触发。
  • 焦点事件:当元素获得或失去焦点时触发。
  • 鼠标事件:当用户通过鼠标在页面上执行操作时触发。
  • 滚轮事件:当使用鼠标滚轮时触发。
  • 文本事件:当在文档中输入文本时触发。
  • 键盘事件:当用户通过键盘在页面上执行操作时触发。
  • 合成事件:当为IME输入字符事触发。
  • 变动事件:当底层DOM结构发生变化时触发。

UI事件

  • load:当页面完全加载后在window上面触发,当所有框架都加载完毕时在框架集上面触发,当图像加载完毕时在元素上面触发,当嵌入的内容加载完毕时在元素上面触发。
  • unload:当页面完全卸载后在window上面触发,当所有框架都卸载后在框架集上面触发,当嵌入内容卸载后在元素上面触发。
  • abort:当用户停止下载过程时,如果嵌入的内容没有加载完,则在元素上面触发。
  • error:当发生JavaScript错误时在window上面触发,当无法加载图像时在上触发,当无法加载嵌入内容时在上触发,当有一个或多个框架无法加载时在框架集上触发。
  • select:当用户选择文本框中的一个或多个字符时触发。
  • resize:当窗口或框架大小变化时在window或框架上面触发。
  • scroll:当用户滚动带滚动条的元素中的内容时,在该元素上面触发。元素中包含所加载页面的滚动条。

以上事件在DOM2中都归为HTML事件。

焦点事件

在页面元素获得或失去元素焦点时触发。

  • blur:在元素失去焦点时触发,这个事件不会冒泡。
  • DOMFocusIn:在元素获得焦点时触发,与HTML事件的focus等价,但它冒泡。[仅Opera支持]
  • DOMFocusOut:在元素失去焦点时触发,与HTML事件的focus等价,但它冒泡。[仅Opera支持]
  • focus:在元素获得焦点时触发。这个事件不会冒泡。
  • focusin:在元素获得焦点时触发。与HTML事件的focus等价,但它冒泡。
  • focusout:在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。

鼠标与滚轮事件

  • click:在用户单击鼠标或是按下回车键时触发。
  • dbclick:用户双击鼠标触发,DOM3纳入标准
  • mousedown:用户按下任意鼠标按钮触发。
  • mouseenter:鼠标光标从元素外部首次移动到元素范围之内触发,这个事件不冒泡。
  • mouseleave:在位于元素上方的鼠标光标移动到元素之外触发。改时间不冒泡,而且在光标移动到子后代元素也不会触发。
  • mousemove:当鼠标指针在元素内部移送时重复的触发。
  • mouseout:在鼠标指针位于一个元素的上方,然后用户将其移入另一个元素时触发。
  • mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。
  • mouseup:在用户释放鼠标按钮时触发。

只有相继触发mousedownmouseup事件,才会触发click事件,只有触发两次click事件,才会触发dbclick事件。触发顺序如下:

  1. mousedown
  2. mouseup
  3. click
  4. moisedown
  5. mouseup
  6. click
  7. dbclick
1. 客户端坐标位置

clientXcliickY分别表示鼠标指针在浏览器窗口中的水平和垂直坐标。

2. 页面坐标位置

pageXpageY分别表示鼠标指针在页面中的水平和垂直坐标。

如果页面没有被滚动,则pageXpageY的值与clientXclientY的坐标相同。

3.屏幕坐标位置

screenXscreenY分别表示鼠标指针在屏幕位置中的水平和垂直坐标。

4.修改键

shiftCtrlAltMetawincmd)键分别对应shiftKeyctrlKeyaltKeymetaKey。当这些属性值为true时,就表示他们所对应的按键被按下。

键盘与文本事件

  • keydown:当用户按下按键上的任意键触发,如果按住不放则会重复触发。
  • keypress:当用户按下按键上的字符键触发,如果按住不放则会重复触发。
  • keyup:当用户释放键盘上的键时触发。

客官里面请~