DOM事件类
2018-07-21 本文已影响9人
_星野
-
基本概念：DOM事件的级别
-
DOM事件模型
-
DOM事件流
-
描述DOM事件捕获的具体流
-
Event对象的常见应用
-
自定义事件
事件级别
DOM0 element.onclick=function(){}
DOM2 element.addEventListener('click', function(){}, false) //冒泡false和捕获true
DOM3 element.addEventListener('keyup', function(){}, false)
事件流
image.png
描述DOM事件捕获的具体流程
image.png
window.addEventListener('click', function (e) {
console.log('window captrue');
}, true);
document.addEventListener('click', function (e) {
console.log('document captrue');
}, true);
document.documentElement.addEventListener('click', function (e) {
console.log('html captrue');
}, true);
document.body.addEventListener('click', function (e) {
console.log('body captrue');
}, true);
ev.addEventListener('click', function (e) {
console.log('ev captrue');
}, true);
Event对象的常见应用
event. preventDefault() // 阻止默认事件(a标签)
event. stopPropagation() // 阻止冒泡
event. stoplmmediatePropagation() //绑定两个事件触发A事件阻止B事件发生
event. current Target //暂时还不是很了解
event. target //暂时还不是很了解
自定义事件
image.png
var eve=new Event('custome')
ev.addEventListener('custome',function(){
console.log('custome')
})
events.addEventListener('click', function () {
window.dispatchEvent(eve)
}, true)
