1.事件冒泡
事件由被被触发的元素逐级向上（父元素）进行事件传递，即哪一级收到事件消息立马向自己的直接领导汇报，层层递进。
2.事件捕获
谁来处理这个事件，根据传统谁级别高谁具有优先权，这就说明父元素处理这个事件的优先级更高。
冒泡和捕获
3.事件处理程序
（1）HTML事件处理程序
把点击事件放到HTML元素上并绑定js中的一个触发方法，这样做的缺点是修改麻烦。
<input type='button' value="按钮" onclick="fun()">
（2）DOM 0级事件处理程序
通过document获取元素，利用元素属性添加触发方法，比如button的onclick属性
btn = document.getElementById("btn")；
btn.onclick = function(){};
（3）DOM 2级事件处理程序
比零级更高级一些，即添加监听某一事件和删除事件。用到方法为
addEventListener(eventName，fun，isCatch)
removeEventListener(eventName，fun，isCatch)
监听事件名，事件触发方法，Boolean值TRUE代表捕获事件期触发方法，false冒泡事件期，常用false
注意：在IE浏览器中不能识别，因为IE有自己的事件处理程序
attachEvent(eventName,fun)和 detachEvent(eventName，fun)
eventName与上面的红色eventName加了前缀on
HTML代码：
<!--* Created by luckyHappyBug on 2017/12/5 0005.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event事件</title>
</head>
<body>
<div id="div2" class="box"></div>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 100px;
}
</style>
<script>
var boo = false;//true 代表捕获期触发方法，false表示冒泡期触发方法，
// 顺序是先捕获开始从外层的元素开始（window-->html-->body--->target）,
// 然后是冒泡从目标元素开始一次向上。
var dom_div2 = document.getElementById("div2");
window.addEventListener('click', function () {
console.log("capture window click");
}, boo);
document.documentElement.addEventListener('click', function () {
console.log("capture html click");
}, boo);
document.body.addEventListener('click', function () {
console.log("capture body click");
}, boo);
dom_div2.addEventListener("click", function () {
console.log("capture domDiv click");
}, boo);
</script>
</body>
</html>
4.事件对象 （详细的可查看http://www.w3school.com.cn/jsref/dom_obj_event.asp）
事件处理方法中的第一个参数返回的就是事件对象，每一个事件方法都有，根据情况使用或者忽略。
事件对象可以告诉你这个事件是什么类型的事件，来自哪个元素，事件的位置（如鼠标事件的点击坐标），以及对事件进行操作比如阻止冒泡。
（1）事件对象的常见属性
：target 返回触发该事件的元素
：type 返回触发事件的类型 如click、mousemove等
：clientX 鼠标按键的以浏览器可见窗口左上角为起点的x坐标
：clientY 鼠标按键的以浏览器可见窗口左上角为起点的y坐标
（2）常见事件方法
：preventDefault() 终止执行事件的关联的默认动作，如a标签的href默认就是打开连接，终止。
：stopPropagation() 阻止冒泡。
（3）常见事件句柄
：onchange 文本内容改变触发
：onblur 失去焦点触发
：onfocus 获得焦点
：onclick 点击
：onkeyup 按键松开触发一次
：onkeydown 键盘键按下（任意键）不松开会不停触发
：onkeypress 键盘键按下（字符键）并松开触发一次
：onmousedown 鼠标按下
：onmouseup 鼠标松开
：onmousemove 鼠标移动
：onmouseover 鼠标移动到事件元素上
：onmouseout 鼠标离开事件元素
网友评论