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

2019-10-12 admin

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

[转载]原文链接:https://segmentfault.com/a/1190000020657766

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77176.html

文章标题:DOM事件捕获与冒泡自定义事件

相关文章
Zepto Ajax 事件
当global: true时。在Ajax请求生命周期内,以下这些事件将被触发。 ajaxStart (global):如果没有其他Ajax请求当前活跃将会被触发。 ajaxBeforeSend (data: xhr, options):再...
2017-04-26
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { "list": [ { pagePath: "pages/index/main", iconPath: &...
2018-05-25
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $(&#x...
2017-02-17
javascript:;与javascript:void(0)区别
javascript:;直接返回undefined javascript:void(0);要去执行一次表达式“0”,然后返回undefined ...
2017-05-12
ionic2 tabs 图标自定义实例
一、准备资源 tabs icon 的svg格式的矢量图片 二、生成字体样式文件 打开icoMoon网站去制作字体文件。 三、使用字体文件 解压下载的文件,将其中的fonts文件夹拷贝到ionic2项目的src/assest目录下。并...
2017-03-13
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http...
2017-03-14
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
2015年预测:Web体验与以往的五大不同
在过去的一年,我们见证了Uber的崛起、Apple加入了可穿戴设备的竞赛中、以及诸如Facebook收购Whatapp这类大的并购事件。那么在2015年我们将看到哪些巨大的改变?这里列出了五个对未来的预测 更清洁、简单的内容 2013年...
2015-11-11
DOM之通俗易懂讲解
DOM 是所有前端开发每天打交道的东西,但是随着 jQuery 等库的出现,大大简化了 DOM 操作,导致大家慢慢的 “遗忘” 了它的本来面貌。不过,要想深入学习前端知识,对 DOM 的了解是不可或缺的,所以本文力图系统的讲解下 DOM 的...
2016-01-13
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
回到顶部