您的位置：首页 > Web前端 > JavaScript

javascript的事件

2016-03-08 00:00 771 查看

摘要: javascript的事件其实就是浏览器事件，事件主要由事件流，事件处理，事件对象，事件类型组成。记录下，需要的时候查询。

javascript的事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。而 javaScript 与 HTML 之间的交互是通过事件实现的，可以使用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（JavaScript 代码）与页面的外观（HTML 和 CSS 代码）之间的松散耦合。

1、DOM事件流

DOM事件流包括了3个阶段：事件捕获阶段、处于目标阶段、时间冒泡阶段。

<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>

a、事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。从document元素一直传递到事件发生的元素（从大范围缩小到目标元素）

b、事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。从最具体的元素传播到document元素（从小范围到大范围）

c、当点击div元素时，在 DOM 事件流中，实际的目标（ <div> 元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到 <html> 再到 <body> 后就停止了。然后是 “处于目标” 阶段，于是事件在 <div>上发生。然后，冒泡阶段发生，事件又传播回文档。

2、事件处理

a、addEventListener()；给元素增加事件的函数。

格式：addEventListener("event_name",callback,use-capture);
event_name：事件名称。
callback：事件处理方法
use-capture：false--》冒泡阶段/ture-->捕获阶段。
ps:大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器

测试

<!DOCTYPE html>
<html>
<head>

</head>
<html id="myHtml">
<body id="myBody">
<div id="myDiv">Click Me</div>
</body>
<script>

var bd=document.getElementById("myBody");
var dv=document.getElementById("myDiv");
var ht=document.getElementById("myHtml");
<!--冒泡-->
bd.addEventListener("click",function(){
console.log("body冒泡："+(new Date()).toLocaleString());
},false);
dv.addEventListener("click",function(){
console.log("div冒泡："+(new Date()).toLocaleString());
},false);
ht.addEventListener("click",function(){
console.log("html冒泡："+(new Date()).toLocaleString());
},false);
<!--捕获-->
bd.addEventListener("click",function(){
console.log("body捕获："+(new Date()).toLocaleString());
},true);
dv.addEventListener("click",function(){
console.log("div捕获："+(new Date()).toLocaleString());
},true);
ht.addEventListener("click",function(){
console.log("html捕获："+(new Date()).toLocaleString());
},true);
</script>
</html>

b、removeEventListener()；删除元素的事件。

格式:removeEventListener("event_name",callback,use-capture)

ps:IE的事件处理方式：attachEvent()和detachEvent()。

格式:
attachEvent("event_name",callback);
detachEvent("event_name",callback);

3、事件对象

在触发 DOM 上的某个事件时，会产生一个事件对象 event ，这个对象中包含着所有与事件有关的信息：导致事件的元素、事件的类型以及其他与特定事件相关的信息。

<!DOCTYPE html>
<html>
<head>
<script>
function doThis(){
//console.log(this);
console.log(event);
}
</script>
</head>
<body>
<div>
<input type="button" value="Click Me" onclick="doThis()"/>
</div>
</body>
</html>

查看下事件的传播途径

事件的属性

4、事件类型

主要的事件类型：

UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动（mutation）事件，当底层 DOM 结构发生变化时触发。

最新的具体的事件类型可以查看W3C的数据：http://www.w3school.com.cn/jsref/dom_obj_event.asp

a、UI事件：用户与页面上的元素交互时触发