- 基本概念：DOM事件的级别
- DOM事件模型
- DOM事件流
- 描述DOM事件捕获的具体流
- Event对象的常见应用
- 自定义事件
事件级别
DOM0 element.onclick=function(){}
DOM2 element.addEventListener('click', function(){}, false) //冒泡false和捕获true
DOM3 element.addEventListener('keyup', function(){}, false)
事件流
描述DOM事件捕获的具体流程
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 //暂时还不是很了解
自定义事件
var eve=new Event('custome')
ev.addEventListener('custome',function(){
console.log('custome')
})
events.addEventListener('click', function () {
window.dispatchEvent(eve)
}, true)
