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

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之DOM篇

    问题一:如何获取页面中所有class为div1和div2的div元素。 问题二:你了解HTMLCollection和NodeList吗?有什么区别? ...

    8 个月前
  • 高性能JavaScript DOM编程(1)

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用...

    3 年前
  • 面试官问:如何利用 random 计算 π

    前言 这是基友面试 RingCenter 时被问到的一个题目 表面上考察的是概率论等基础知识,实际可能还会问到事件循环等底层知识,以及 React Fiber 蒙特卡洛法求 π 说蒙特卡洛可能不太理...

    2 个月前
  • 面板拖拽之vue自定义指令

    前言 在指令里获取的this并不是vue对象,vnode.context才是vue对象,一般来说,指令最好不要访问vue上的data,以追求解耦,但是可以通过指令传进来的值去访问method或re...

    1 年前
  • 附backbone.js观点存在与插入到DOM元素的EL

    Ben Roberts(https://stackoverflow.com/users/652693/benroberts)提出了一个问题:attaching backbone.js views to...

    2 年前
  • 防止滚动“冒泡”从元素到窗口

    vsync(https://stackoverflow.com/users/104380/vsync)提出了一个问题:prevent Scroll “bubbling” from element to...

    2 年前
  • 钉钉小程序 之 自定义组件的使用,以及父组件与子组件(自定义组件)传值

    目录: 本机环境 自定义组件(子组件) 页面中引入(父组件引入子组件) 父组件(使用自定义组件的页面)传值给子组件 子组件(自定义组件)传值给父组件 备注 一、本机环境 二、自定义组件(子...

    2 个月前
  • 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: (https://img.javascriptcn.com/4ff5...

    2 年前
  • 重学前端学习笔记(二十三)--狭义的文档对象DOM

    笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系(https://time.geekbang.org/column/i...

    1 年前
  • 采用shell自定义脚本,控制集成部署环境更加方便灵活

    Jenkins 是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变得可能。现在软件开发追求的是效率以及质量,Jenkins使得自动化成为可能! 亮点 采用shell自定义脚本,控...

    1 年前

官方社区

扫码加入 JavaScript 社区