iwowen的博客
iwowen
记录和分享技术
  1. 首页
  2. 前端
  3. 正文

dom事件笔记

2020年04月25日 35点热度 0人点赞 0条评论

dom

  1. dom0
element.onclick = function() {}
  1. dom2
element.addEventListener('click', function(){}, false)
  1. dom3
    事件类型添加了很多
element.addEventListener('keyup', function(){}, false)

制定dom1标准的时候没有定义事件

dom事件类

事件流 -> 目标阶段 (捕获)
目标阶段 -> 事件流 (冒泡)

  1. 捕获的具体流程
    window -> document -> html -> body -> element
怎么通过js获取html元素?
document.documentElement
  1. 冒泡的流程
    element -> body -> html -> document -> window

event 对象

event.preventDefault() 阻止默认事件
event.stopPropagation() 阻止事件冒泡
event.stopImmediatePropagation()

一个按钮,绑定了两个click事件
第一个响应函数是a,第二个响应函数是b
那么当a执行完了之后不想执行b,就需要这个函数

event.currentTarget 当前所绑定事件的元素
event.target 当前被点击的元素

自定义事件

Event

var evt = new Event('custom')
dom.addEventListener('custom', function() {
    console.log('custom')
}
dom.dispatchEvent(eve)

CustomEvent 与Event比较,它能为这个事件加上一些数据。

标签: js
最后更新:2020年11月22日

什码

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
前端关于性能优化方面的记录 js中new的过程是什么? js数据类型和数据转换 前端css实现左中右布局 使用create-react-app打造多页面应用 css盒模型
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1