jQuery进阶第二天（2019 10.10）
-
King
一、事件流程
1.事件的三要素：
- 事件源：发生事件的对象
- 事件类型：类型比如单击、双击、鼠标的移入、移除
- 事件处理程序: 触发事件之后做些什么，事件处理的函数
1 <body>
2 <button onclick="alertWindow()"></button>
3 <script>
4 /*
5 *1.事件对象 button
6 *2. 事件对象绑定的一个事件类型
7 *3.事件句柄：如函数，属性值
8 */
9 function alertWindow(){
10 alert("我被点击了")
11 }
12 </script>
13 </body>
知识兔2.事件分为三个阶段：
- 事件捕获阶段：事件是由最外层的元素向目标元素传递的过程（IE不支持事件捕获）
- 事件处理阶段：事件正位于目标元素之上
- 事件冒泡阶段：有目标元素向外层元素传递的过程
3.事件发生顺序：
- 事件捕获--》事件处理--》事件冒泡
- 事件的捕获和冒泡指的是当前元素的子元素跟当前元素拥有相同的事件，触发子元素的时候，当前元素对应事件发生在什么阶段
二 DOM 事件
1 DOM0级事件
在js中 为元素的事件相关属性赋值：
实现了内容与行为分离，但是元素仍只能绑定一个监听函数document.getElementById("btn").onclick = function(){//....}
document.body.onload = init;
function init(){//........}
dom0级都属于冒泡阶段
知识兔1 <body>2 <button id="btn">点击我</button>3 <script>4 var btn=document.getElementById("btn");5 var clickme=function(){6 alert("我已经被点击");7 }8 </script> 2 DOM2级添加/移除事件
高级事件处理方式，一个事件可以绑定多个监听函数：btn.addEventListener("click", function(){},false); // DOM // false:冒泡事件 true：捕获事件btn.attachEvent("onclick", function(){});//IEdocument.body.addEventListener("load", init);document.body.attachEvent("onload", init);function init(){}此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容性问题。三种方法优缺点：
1.HTML中定义 html中书写js，强耦合 复用性很低2.DOM0级，事件对象的属性添加绑定事件 松耦合 有且只能绑定一个事件（后面绑定的事件把前面绑定的事件覆盖）3.DOM2级事件，通过addEventListener函数绑定事件，松耦合 可以绑定多个事件，事件捕获和事件冒泡
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件，冒泡型事件模型： button->div->body (IE事件流)
捕获型事件模型： body->div->button (Netscape事件流) DOM事件模型： body->div->button->button->div->body (先捕获后冒泡)，在IE8及以下的事件处理中，事件含有on，如onclick等。
1 非IE高级浏览器
移除事件 removeEventListener()事件解绑成功的主要原因就是：保持removeEventListener和addEventListener里面的参数相同，即第二个参数不能使用匿名函数的方式
2 IE事件处理程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>IE事件处理程序</title> 8 </head> 9 <body>10 <button id="mybtn"></button>11 <script>12 //html属性添加事件13 //DOM0级事件绑定 兼容所有浏览器14 /*D0M2J事件绑定 addEVentListener:chrome,firefox,IE9等15 attacheEVent：IE8及IE8一下的浏览器*/16 var btn=document.getElementById("mybtn");17 var clickme=function(){alert("Clicked");};18 btn.attachEvent("onclick",clickme);19 btn.attachEvent("onclick",clickme);20 //移除事件绑定21 btn.detachEvent("onclick",clickme);22 23 // this指向window24 btn.attachEvent("onclick",function(){25 alert(this===window);26 });27 </script>28 </body>29 </html>