当前位置: 首页 > news >正文

事件冒泡和事件捕获

1.事件冒泡

obj.addEventListener(event,fn,useCapture);

useCapture:为false是事件冒泡;为true为事件捕获

2.ie兼容问题

给元素添加事件:attachEvent(“on”+type,fn)、addEventListener

给元素删除事件:detachEvent(“on”+type,fn)、removeEventListener

获取事件源对象:ev、window.event      (target和srcElement)

阻止事件冒泡:stoppropagation 、cancelBublue

阻止默认行为:preventDefault

补充: stopPropagation()方法既可以阻止事件冒泡,也可以阻止事件捕获,也可以阻止处于目标阶段。

用DOM3级新增事件stopImmediatePropagation()方法来阻止事件捕获,另外此方法还可以阻止事件冒泡。

3、DOM事件流被分为事件捕获阶段 目标阶段 冒泡阶段

案例:遮罩层点击的时候可能会触碰下层的事件

mouseover和mouseout会涉及冒泡事件;mouseenter和mouseleave事件不冒泡。(dom3鼠标事件共9个)

补充:事件代理即事件委托的知识,其实事件委托的原理就是事件冒泡,将子元素的事件绑定到父元素上监听,使用事件代理的好处是可以提高性能

监听原理:

  document.getElementById("div").addEventListener("click",fuction(e){

   //e.target 被点击的元素

    //e.target.nodeName 可操作性判断条件,节点名称 ;className。。。

   })

 

转载于:https://www.cnblogs.com/QIQIZAIXIAN/p/7204428.html

相关文章:

  • 【Android Dev Guide - 01】 - What Is Android?什么是Android?
  • CodeVs——T 3304 水果姐逛水果街Ⅰ
  • 【Android Dev Guide - 02】 - Application Fundamentals 应用基础
  • 【代码笔记】iOS-自定义选择框(高底强弱)
  • 惨痛教训
  • python(二十八)
  • 页面查找技巧
  • SqlServer索引的原理与应用
  • Spring+SpringMVC+mybatis整合以及注解的使用(三)
  • vs2010 javascript代码折叠扩展插件
  • css定位
  • 最简单的手工写增,删,改,查的代码
  • Lucene 4.0 TieredMergePolicy
  • 关于表单修改
  • Ubuntu安装源配置文件/etc/apt/sources.list第X行有错误
  • Angular 4.x 动态创建组件
  • C学习-枚举(九)
  • FineReport中如何实现自动滚屏效果
  • HTML中设置input等文本框为不可操作
  • iOS | NSProxy
  • leetcode388. Longest Absolute File Path
  • spring cloud gateway 源码解析(4)跨域问题处理
  • TypeScript实现数据结构(一)栈,队列,链表
  • vue总结
  • 当SetTimeout遇到了字符串
  • 力扣(LeetCode)56
  • 前端临床手札——文件上传
  • 如何利用MongoDB打造TOP榜小程序
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 使用putty远程连接linux
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 学习Vue.js的五个小例子
  • CMake 入门1/5:基于阿里云 ECS搭建体验环境
  • MyCAT水平分库
  • 说说我为什么看好Spring Cloud Alibaba
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • #Lua:Lua调用C++生成的DLL库
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • (1)(1.19) TeraRanger One/EVO测距仪
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • (转) Face-Resources
  • (转)http-server应用
  • (转)IOS中获取各种文件的目录路径的方法
  • (转)为C# Windows服务添加安装程序
  • (转载)利用webkit抓取动态网页和链接
  • ***检测工具之RKHunter AIDE
  • .h头文件 .lib动态链接库文件 .dll 动态链接库
  • .net core 6 redis操作类
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • /etc/sudoers (root权限管理)
  • [ 常用工具篇 ] AntSword 蚁剑安装及使用详解
  • [1181]linux两台服务器之间传输文件和文件夹
  • [8-27]正则表达式、扩展表达式以及相关实战