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 事件流中，实际的目标（
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 结构发生变化时触发。
a、UI事件：用户与页面上的元素交互时触发
b、焦点事件：焦点事件会在页面元素获得或失去焦点时触发
c、鼠标、滚动事件：当用户通过鼠标操作页面时触发。
鼠标事件的属性
d、键盘事件：用户在使用键盘时会触发键盘事件
e、触摸事件：移动端的事件类型。
touch事件的其它其它属性：
浙公网安备 33010602011771号