事件
定义:在某一时刻,发生的事
事件流
定义:把触发的事件延一个方向进行传播。两个方向,从里向外(冒泡事件),从外向里(捕获事件)
分类(三类):
-
冒泡事件 : 用于IE浏览器
-
捕获事件:用于Netscape(网景)
-
DOM事件 :用于DOM浏览器,且IE、Netscape也支持
例: div——/picture/p/span : 对div设置绑定事件,点击div内的所有子级都能触发事件(冒泡);如果只对picture/p/span设置,只能点击picture/p/span有效。
事件处理方法
- 内嵌事件:标签内嵌;调用的是全局函数,一般不建议使用。
- DOM 0 级:又叫传统事件
- DOM 2 级:现代事件
内嵌事件
在标签内嵌;调用的是全局函数
<body> <p οnclick='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为冒泡,默认false冒泡,布尔值决定事件是否冒泡,可省略。
-
IE浏览器:attachEvent(事件类型(有on),回调),假的DOM2,IE没有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',要删除的事件回调函数,布尔值)
-
IE浏览器: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);