事件
定义：在某一时刻，发生的事
事件流
定义：把触发的事件延一个方向进行传播。两个方向，从里向外（冒泡事件），从外向里（捕获事件）
分类(三类)：
-
冒泡事件 : 用于IE浏览器
-
捕获事件：用于Netscape（网景）
-
DOM事件 ：用于DOM浏览器，且IE、Netscape也支持
例： div——/picture/p/span ： 对div设置绑定事件，点击div内的所有子级都能触发事件（冒泡）；如果只对picture/p/span设置，只能点击picture/p/span有效。
事件处理方法
- 内嵌事件：标签内嵌；调用的是全局函数，一般不建议使用。
- DOM 0 级：又叫传统事件
- DOM 2 级：现代事件
内嵌事件
在标签内嵌；调用的是全局函数
<body>
<p onclick='innerEvent()'> 内嵌事件</p>
</body>
<script>
let innerEvent=function(){
console.log('Hello');
}
window.onload=function(){}
</script>
DOM 0级 (传统事件)
-
DOM 0级比较常见，节点.onXXX
p1.onclick=function(){}不用驼峰命名法 -
优点：兼容性好，所有浏览器都支持
-
缺点：不能为同一事件添加多个处理方法，只能添加一个。如果有多个方法，只最后一个有用，最后一个会覆盖前面的
DOM 2 级 (现代事件)
- 关键字addEventListener
-
优点：同一事件可添加多个处理方法
-
缺点：兼容性，只用于DOM浏览器，不能用于IE
-
DOM浏览器：节点.addEventListener(事件类型,回调函数,布尔值)；事件类型,无on; 布尔值,true为捕获，false为冒泡，默认ｆａｌｓｅ冒泡，布尔值决定事件是否冒泡，可省略。
-
IE浏览器：attachEvent(事件类型(有on)，回调)，假的DOM2,ＩＥ没有ＤＯＭ２
-
DOM浏览器添加冒泡、捕获两种事件，先捕获后冒泡，最后一个标签看写的顺序
addEventDOM2.onclick = function(){ //DOM浏览器的DOM2级事件处理方法 p1.addEventListener("click",func1,true); p1.addEventListener("click",func2); } //IE浏览器的"DOM2"事件处理方法 p1.attachEvent("onclick",function(){ console.log("this is p1 by ie"); }); if(document.addEventListener){ }else{ }
-
兼容问题：判断浏览器类型
if(document.addEventListener){ }else{ }
删除事件
-
DOM 0： 用空的函数或空的事件删除；不是真的删除，只是用后来的替换、覆盖前面的
-
DOM 2 删除 ：
- DOM浏览器：removeEventListener('click',要删除的事件回调函数,布尔值)
-
ＩＥ浏览器：detachEvent('onclick',函数)
let func1 = function(){ console.log("this is p1 by dom2"); } let func2 = function(){ console.log("add new event by dom2"); } addEventDOM2.onclick = function(){ //DOM浏览器的DOM2级事件处理方法 p1.addEventListener("click",func1,true); p1.addEventListener("click",func2); } removeEventDOM2.onclick = function(){ p1.removeEventListener("click",func1,true); //不加true，只删除一个；前面有设置true，删除也要有true p1.removeEventListener("click",func2); //IE浏览器的删除事件方法 p1.detachEvent("onclick",func1);