DOM事件捕获与冒泡自定义事件

2019-10-12

DOM事件小计

DOM0: element.onclick = function(){}

DOM2: element.addEventListener('click',function(){},false)

DOM3: element.addEventListener('keyup',function(){},false)

捕获具体流程(冒泡反之)

  • window ===> document ===> html ===> body ===> ...目标元素

演示捕获流程:

//body中新建一个id为ev的div,宽高背景自己设置下

var ev = document.getElementById('ev')

window.addEventListener('click',function(){

console.log('window captrue');

},true)//true为捕获阶段触发,false为冒泡阶段触发

document.addEventListener('click',function(){

console.log('document captrue');

},true)

document.documentElement.addEventListener('click',function(){

console.log('html captrue');

},true)

document.body.addEventListener('click',function(){

console.log('body captrue');

},true)

ev.addEventListener('click',function(){

console.log('ev captrue');

},true)

// 点击id为ev的div,查看控制台打印如下

window captrue

document captrue

html captrue

body captrue

ev captrue

// 打印顺序与注册顺序无关
  • event.preventDefault() 阻止默认事件
  • event.stopPropagation() 阻止冒泡
  • event.stopImmediatePropagation() 事件响应优先级
  • event.currentTarget 指向引起触发事件的元素
  • event.target 事件绑定的元素
var eve = new Event('custome');

element.addEventListener('custome',function(){

console.log('custome');

});

element.dispatchEvent(eve);

// 注意是事件对象eve而不是事件名custome
原文链接:segmentfault.com

上一篇:gulp-usemin
下一篇:gulp-uglifyjs
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部