angular div 滚动条事件_DOM事件

事件是在编程时系统内发生的动作或发生的事情(单击、鼠标移动、滚动页面等)。HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。JS与HTML之间的交互是通过事件实现的,DOM支持大量的事件。事件的本质是程序各个组成部分之间的一种通信方式,也是异步编程的一种实现。

DOM事件模型分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

代码举例:

<div class= “爷爷”><div class= “爸爸”><div class= “儿子”></div></div>
</div>

即 .爷爷>.爸爸>.儿子,分别添加事件监听 fnYe / fnBa / fnEr

提问1: 点击了谁?

点击文字, 算不算点击儿子;点击文字, 算不算点击爸爸;点击文字, 算不算点击爷爷

答: 都算

提问2: 调用顺序? 点击文字最先调用fnYe/fnBa/fnEr中的哪一个函数?

IE5调用顺序为fnEr->fnBa->fnYe, 网景调用顺序为fnYe->fnBa->fnEr

最后W3C制定标准

  • 文件名为DOM Level 2 Events Specification
  • 规定浏览器同时支持两种调用顺序
  • 首先按爷爷=>爸爸=>儿子顺序看有没有函数监听
  • 然后按儿子=>爸爸=>爷爷顺序看有没有函数监听

因此:从外向内找监听函数,叫事件捕获

从内向外找监听函数,叫事件冒泡

DOM事件模型示意图

45570c15bfdb0ec90f4284edcaf5e678.png

addEventListener

事件绑定API

  1. IE5: baba.attachEvent('onclick', fn)//事件冒泡
  2. 网景: baba.addEventListener('click', fn)//事件捕获
  3. W3C: baba.addEventListener('click', fn, bool),

如果bool不传或为falsy, 则fn使用事件冒泡, 即当浏览器在冒泡阶段发现baba有监听函数,就会调用fn并提供事件信息;反之如果bool为true就让fn走捕获,即当浏览器在捕获阶段发现baba有fn监听函数,就会调用fn,并提供事件信息。

f6f60b77c5be00c765a7a18ecb4d2a7b.png
JS Bin​js.jirengu.com
e11f27355424fd8328d26fefccc971a7.png

target和currentTarget

e.target 是用户操作的元素

e.currentTarget是程序员监听的元素

例如:div>span{文字},用户点击文字,e.target就是span,e.currentTarget是div

特例:如果监听的元素就是用户点击的元素,那么谁先监听就谁先执行

只有一个div被监听(不考 虑父子同时被监听),fn分别在捕获阶段和冒泡阶段监听click事件

用户点击的元素就是开发者监听的

div.addEventLisenter('click', f1)
div.addEventLisenter('click', f2, true)

请问,f1 先执行还是f2先执行?如果把两行调换位置后,请问哪个先执行?

正确答案:谁先监听谁先执行

取消冒泡

捕获不可取消,但冒泡可以

e.stopPropagation()可中断冒泡,浏览器不再向上走,一般用于封装独立组件

不可取消冒泡:有些事件不可取消冒泡

例如:MDN搜索scroll event,看到Bubbles和Cancelable,Bubbles的意思是该事件是否冒泡

Cancelable的意思是开发者是否可以取消冒泡

d57286970cf3fce5db3947b1157aebc9.png

如何阻止滚动?

滚动条是出现在document上面的

  • 阻止scroll默认动作没用,因为先有滚动才有滚动事件
  • 要阻止滚动,可阻止wheel和touchstart的默认动作
  • 注意你需要找准滚动条所在的元素
  • 但是滚动条还能用,可用CSS让滚动条width: 0

8492eaa0eb9e28a7a609363911f35640.png

CSS也行

  • 使用overflow: hidden可以直接取消滚动条
  • 但此时JS依然可以修改scrollTop

自定义事件

浏览器自带事件有100多种

事件参考​developer.mozilla.org
e9b32cbf02d25443dab80985b9cac7ef.png

如何自定义一个事件

a51e7793c5c33aa30822ad7f4d1bd5d3.png

事件委托

就是委托一个元素帮助监听本该监听的元素

场景一:

你要给100个按钮添加点击事件,咋办?

答:监听这100个按钮的祖先,等冒泡的时候判断target是不是这100个按钮中的一个

aa1d7745e97dafed8847083ef3e2c92d.png
JS Bin​js.jirengu.com
e11f27355424fd8328d26fefccc971a7.png

场景二

你要监听目前不存在的元素的点击事件,咋办?

答:监听祖先,等点击的时候看看是不是我想要监听的元素即可

c9c7f94b0fa727abfa5e077092c95d89.png

优点

  • 省监听数(内存)
  • 可以监听动态元素

封装事件委托

18aba4a3220fa66eb798355cd704d8b1.png

JS支持事件吗

答:支持,也不支持。DOM事件不属于JS的功能,术语浏览器提供的DOM的功能

JS只是调用了DOM提供的addEventListener而已

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574450.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android byte[] 转string 好多问号_Android 仿抖音实现动态壁纸

code小生,一个专注 Android 领域的技术平台公众号回复 Android 加入我的安卓技术群作者&#xff1a;7_px链接&#xff1a;https://www.jianshu.com/p/fc5cf284abbb声明&#xff1a;本文已获7_px授权发表&#xff0c;转发等请联系原作者授权一、概述&#xff1a; 壁纸运行在一个…

升序排序中国_干货满满!6行python代码挑战展示2020下半年中国最娱乐的人气男明星人气排行榜top10!...

本回答主要以2020下半年中国最娱乐的人气男明星top10变化动态条形图为例来展示如何用python生成动态条形图。知乎视频​www.zhihu.com一、 python生成动态条形图&#xff1a;以2020下半年中国最娱乐的人气男明星top10变化动态条形图为例。1. 安装第三方库1.1 下载第三方库的网址…

YII2 实现后台操作记录日志

一、连接linux服务器&#xff0c;创建数据文件 php yii migrate/create user_log 二、修改数据文件 console/migrations/m150721_032220_admin_log.php <?phpuse yii\db\Schema; use yii\db\Migration;class m150721_032220_admin_log extends Migration {public function…

cmd批量修改文件名 增加文字_Dynamo自动批量化修改文件名称

今天我们说一下如何批量化的修改文件名称&#xff0c;都9102年了总不能一个一个手动去修改吧。比如我们要对现有的族修改为带有我们企业缩写的族库,于是乎我把朋友的族就借过来了可以是下面这样&#xff1a;当然也不仅仅是修改族文件名称&#xff0c;我们可以修改任意文件夹下的…

CSS入门学习(转)

一、基础学习 1、何为CSS CSS是Cascading Style Sheets(层叠样式表)的简称&#xff0c;是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语 言). CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀&#xff0c; 可以通…

在电脑上显示未知发布者怎么办_电脑开机后显示器黑屏只有鼠标能动,怎么办呢?...

开机黑屏进不了系统是很常见的电脑故障&#xff0c;导致该现象的原因也有很多种&#xff0c;有些用户是电脑开机后显示器黑屏只有鼠标能动&#xff0c;如果是这种情况该怎么办呢&#xff1f;出现电脑开机后显示器黑屏只有鼠标很有可能是资源管理器的问题&#xff0c;下面由维度…

ios图文详情加载html_前端项目009 Vue 信息分享系统 商品列表、详情

頔言頔语&#xff1a;进步&#xff0c;一定要进步&#xff0c;进步是跟收入持平的本钱。01 商品列表0101 路由配置和数据请求0102 上拉加载更多02 商品详情0201 详情数据请求和展示0202 轮播图组件提取0203 商品详情&#xff08;路由的本质理解&#xff09;01 商品列表0101 路由…

zemax设置 像方远心_ZEMAX相机标定非常不完全指南

ZEMAX是广为使用的一款光学仿真软件&#xff0c;是进行光路设计和分析的利器&#xff1b;而相机标定&#xff0c;则是进行机器视觉任务时&#xff0c;拿到一款相机&#xff0c;对其实际参数进行确定的过程。因此看起来&#xff0c;二者其实主要是针对不同的侧重点。前者主要面向…

activiti 生命周期_一文让你读懂什么是Activiti工作流

Activiti工作流学习经验总结(一)什么是工作流&#xff1f;工作流指通过计算机对业务流程进行自动化管理&#xff0c;实现多个参与者按照预定义的流程去自动执行业务流程。什么是Activiti&#xff1f;Activiti 是一个开源架构的工作流引擎&#xff0c;基于bpmn2.0 标准进行流程定…

关于hkcmd.exe造成的和Eclipse之间热键冲突

可能是自己新买的笔记本比较强大,显卡也比较牛叉.当使用一些常用的Eclipse快捷键的时候Eclipse本身没有反应,反而显示器有了反应. 经常用的Eclispse中的快捷键CtrlAlt↑ 和CtrlAlt↓ 造成显示器内容的上翻转和下翻转 解决方式: 下载Windows Hot Key Explore 软件 在安装启动后…

中对曲线进行斜率提取_Au中的EQ处理方法——图形均衡器和参数均衡器

之前的文章详细讲过使用Cubase进行EQ处理&#xff0c;其实如果只是要对录音进行混音修音的话&#xff0c;使用Au也可以&#xff0c;Adobe Audition作为音乐录制及后期软件&#xff0c;具有很强大的后期功能&#xff0c;而且也可以添加插件&#xff0c;是修音混音非常好的工具。…

2 数据源配置_Spring, MyBatis 多数据源的配置和管理

作者&#xff1a;digdeep出处&#xff1a;https://www.cnblogs.com/digdeep/p/4512368.html热门推荐vuewebsocketSpringboot实现的即时通信开源项目springboot炸翔版CMS开源系统同一个项目有时会涉及到多个数据库&#xff0c;也就是多数据源。多数据源又可以分为两种情况&#…

(九十)使用多个storyboard+代码实现控制器的分开管理

使用单个storyboard会使得项目难与管理&#xff0c;使用纯代码又会过于麻烦&#xff0c;因此如果能将二者结合起来&#xff0c;并且使用多个storyboard&#xff0c;会使得项目简单简单、方便许多。 下面以一个简单的视图关系为例&#xff0c;介绍多个storyboard的用法。 ①有pa…

吗 支持windows_M1能否原生支持Windows 苹果把问题抛给了微软

关于苹果M1处理器近期已经有了非常多的报道&#xff0c;人们对其出色的性能表现以及较低的功耗还是充满了期待。那么最后一个也是最重要的一个问题&#xff0c;基于苹果M1处理器的电脑能原生支持微软Windows吗&#xff1f;毕竟很多人买回苹果MacBook第一件事就是安装Windows 10…

4怎么放大字体_win8.1系统如何放大所有字体?

电脑安装上[color#070c0 !important]win8.1正式版系统&#xff0c;发现桌面的字体和网页的字体比较小&#xff0c;看起来比较吃力&#xff0c;从而影响操作。一般win8.1系统字体都默认设置好的&#xff0c;不过用户可以进行放大&#xff0c;那么win8.1系统怎么放大所有字体&…

进程 zabbix_Zabbix监控在windows的进程(非进程数)

场景介绍&#xff1a;小Z同学最近遇到个项目需求&#xff0c;需求是用zabbix监控运行在windows的进程。然鹅&#xff0c;当小Z同学在网上搜了一大堆&#xff0c;发现基本上都是使用官方的proc.num(***.exe)键值拿到进程数量&#xff0c;很显然&#xff0c;这并不符合客户实际的…

phpcms文件所需权限

转载于:https://www.cnblogs.com/zhongheng/p/4684087.html

python mysql 时间比较大小_python时间函数与mysql时间函数转换

时间相关操作&#xff0c;时间有三种表示方式&#xff1a;时间戳 1970年1月1日之后的秒&#xff0c;即&#xff1a;time.time()格式化的字符串 2014-11-11 11:11&#xff0c; 即&#xff1a;time.strftime(%Y-%m-%d)结构化时间 元组包含了&#x…

mysql npe问题_MySQL为Null会导致5个问题,个个致命!

本文转载自微信公众号「Java中文社群」&#xff0c;作者磊哥。转载本文请联系Java中文社群公众号。正式开始之前&#xff0c;我们先来看下 MySQL 服务器的配置和版本号信息&#xff0c;如下图所示&#xff1a;“兵马未动粮草先行”&#xff0c;看完了相关的配置之后&#xff0c…

数据结构导论(一)

导读&#xff1a;在看书前&#xff0c;我对这本书的内容&#xff0c;是 这么想的&#xff1a;数据结构&#xff0c;那大概就是关于数据和结构的东西。而讲到数据&#xff0c;估计会说到数据类型&#xff0c;数据定义&#xff0c;数据存储等方面。然后在结构方面&#xff0c;就不…