首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

由重构进阶前端开发入门 (三) 事件冒泡与事件代理

上一篇章中,我们掌握了页面事件基本操作,这次学习事件 API 进阶拓展用法了。...相关文章: 由重构进阶前端开发入门 (一) DOM 操作 由重构进阶前端开发入门 (二) 事件与事件对象 (三) 事件冒泡与事件代理 事件冒泡 假设你需要实现这样效果:用户登录状态过期了,点击页面任何按键都给出提示...由于页面元素是层级嵌套。当你点击某个按键时,也可以说是点击了它所在父元素中某个位置。由此类推,层层递进,就相当于点击了整个 html 文档某处。...事件对象 target 属性是触发事件对象,可用来在外层进行甄别,决定事件具体处理方式 $('.btn-login').on('click', function (e) { // 点击登录按键时...; }); 事件默认行为 上面举例子中,提到过登陆过期时提示信息。 如果用户点击是 a 标签,跳转的话就很难看见提示信息了,这种情况该怎么办呢?

19610
您找到你想要的搜索结果了吗?
是的
没有找到

面试题必备-web页面基础

onsubmit:在提交表单时触发 keyboard键盘事件 onkeydown:在用户按下按键触发 onkeypress:在用户按下按键后,按着按键触发,该属性不会对所有按键生效 不生效有:alt...: 当在元素上释放鼠标时触发 media:媒体事件 onabort:当退出时触发 onwaiting:当媒体已停止播放打算继续播放时触发 HTML标签 文本标签 段落标签 段落标签用来描述一段文字...name为文本框命名,用于提交表单,后台接收数据用 value为文本输入框设置默认值 type通过定义不同type类型,input功能有所不同 type功能: text,password,...head定义文档头部 头部元素title,script,style,link,meta title定义文档标题 link标签将css样式文件链接到html文件 meta定义文档元数据 每个网页都是由不同功能模块组成...css代码通常存放在style标签 css样式由选择符和声明组成,而声明由属性值组成 选择符{属性:值} 选择符,叫选择器 css放置 直接书写在标签style属性中,不建议使用 内联样式表

2.4K10

前端开发JS——jQuery常用方法

,还是会实现所绑定事件;任何鼠标按钮都会实现所绑定事件;用event 对象which区别按键,敲击鼠标左键which值是1,敲击鼠标中键which值是2,敲击鼠标右键which值是3 3、jQuery...(eventObject)) mouseover 增加了一个参数,上面的功能是一样,只不过传递了一个数据,即eventObject.data = eventData 注:mouseover 强调鼠标移入区域...,mouseover 强调鼠标移除区域; 5、jQuery鼠标事件之mouseenter与mouseleave事件 这第四点基本功能,理论知识点是一模一样,不加赘述。...)) keydown 增加了一个参数,上面的功能是一样,只不过传递了一个数据,即eventObject.data = eventData;e.key或者e.which是键盘输入值(整型值) 注:keydown...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中文本得到触发键盘事件前文本,而keyup事件触发整个键盘事件操作已经完成

4.8K20

前端基础(HTML,CSS,JavaScript)知识笔记,附:前端基础面试题!!

onsubmit,在提交表单时触发 keyboard 键盘事件: onkeydown,在用户按下按键触发 onkeypress,在用户按下按键后,按着按键触发。...Media媒体事件 onabort,当退出时触发 onwaiting,当媒体已停止播放打算继续播放时触发 4....value:为文本输入框设置默认值。 type:通过定义不同type类型,input功能有所不同。... 标签用于定义文档头部,它是所有头部元素容器 元素可定义文档标题 标签将css样式文件链接到HTML文件 ...事件委托 BOMlocation对象 浏览器从输入URL到页面渲染整个流程 跨域、同源策略及跨域实现方式原理 JavaScript 中 arguments EventLoop事件循环 发布订阅者模式与观察者实现

2.3K20

jQuery设计思想

我对它做了一个详细笔记,试图理清jQuery设计思想,找出学习脉络。我目标是全面掌握jQuery,遇到问题时候,心里有底,基本知道使用它哪一个功能,然后可以迅速从手册中找到具体写法。...选择表达式可以是CSS选择器:   $(document) //选择整个文档对象   $('#myId') //选择ID为myId网页元素   $('div.myClass') // 选择...删除元素使用.remove().detach()。两者区别在于,前者不保留被删除元素事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。...$.inArray() 返回一个值在数组中索引位置。如果该值不在数组中,则返回-1。 $.grep() 返回数组中符合某种标准元素。...) 按下键盘(长时间按键,将返回多个事件) .keyup() 松开键盘 .load() 元素加载完毕 .mousedown() 按下鼠标 .mouseenter() 鼠标进入(进入子元素不触发

2.2K60

jquery 使用方法

一、选择网页元素jQuery基本设计主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他函数库根本特点。   ...选择表达式可以是CSS选择器: 1 $(document)//选择整个文档对象 2 $('#myId')//选择ID为myId网页元素 3 $('div.myClass')//选择class为myClass...删除元素使用.remove().detach()。两者区别在于,前者不保留被删除元素事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。...如果该值不在数组中,则返回-1。 4 $.grep() 返回数组中符合某种标准元素。 5 $.extend() 将多个对象,合并到第一个对象。...(长时间按键,只返回一个事件) 10 .keypress() 按下键盘(长时间按键,将返回多个事件) 11 .keyup() 松开键盘 12 .load() 元素加载完毕 13 .mousedown

1.6K10

一步HTML5教程学会体系

:标示一个节头部 footer:标示一个节脚注 nav:标示用于导航文档节 dialog:这个标签可以用于标记会话 figure:这个标签可以用于关联标题某些嵌入内容,比如图表视频 <...onhaschange文档变化时触发 oninput 元素获得用户输入触发 oninvalid 元素失效时触发 onkeydown 键盘按下时触发 onkeypress 键盘按下并释放时触发...onkeyup 按键释放时触发 onload 载入文档触发 onloadeddata 载入媒体数据时触发 onloadedmetadata 媒体元素媒体数据载入时触发 onloadstart...script 元素滚动条滚动时触发 onseeked script 媒体元素 seeking 属性不在为真并结束时触发 onseeking script 媒体元素 seeking...onsuspend script 浏览器获取媒体数据,获取整个媒体文件中止时触发 ontimeupdate script 媒体播放位置改变时触发 onundo script 文档执行

1.2K20

JavaScript 编程精解 中文第三版 十五、处理事件

若段落按钮都有事件处理器,则先执行最特殊事件处理器(按钮事件处理器)。也就是说事件向外传播,从触发事件节点到其父节点,最后直到文档根节点。...,当持续按下某个按键时,会循环触发该事件。...即使你有一个老式键盘,某些类型文本输入也不能直接匹配按键,例如其脚本不适合键盘的人所使用 IME(“输入法编辑器”)软件 ,其中组合多个热键来创建字符。...或pageXpageY,它们相对于整个文档左上角(当窗口被滚动时可能不同)。 下面的代码实现了简单绘图程序。每次点击文档时,会在鼠标指针下添加一个点。...加载事件 当界面结束装载时,会触发窗口对象和文档body对象"load"事件。该事件通常用于在当整个文档构建完成时,进行初始化。请记住标签内容是一遇到就执行

5.5K20

jQuery

,因为jQuery做到了各大浏览器兼容功能。...事件绑定):         自定义模态框,使用jQuery实现弹出隐藏功能。...() > 100) { //当滚动条相对顶部位置滚动距离大于100时候才显示那个返回顶部按钮,这个100你可以理解为窗口整个页面文档距离,鼠标向下滑动距离 $("#b2").removeClass...,导致有些效果加载比较慢,所以我们使用下面的写法,不存在覆盖问题,而且只要文档加载完就触发,不需要等着一些图片啊视频啊什么,加载js效果速度快。     ...(5000);意思就是5秒把你高度变为0//还有如果你直接操作是img标签操作img标签父级标签,两个效果是不同 slideUp([s,[e],[fn]]) slideToggle([s

8.9K20

【Java 进阶篇】深入浅出:JQuery 事件绑定奇妙世界

JQuery 是一个快速、简洁 JavaScript 库,它简化了 HTML 文档遍历操作、事件处理、动画等操作。而其中事件绑定机制是 JQuery 一大特色。 什么是事件绑定?...事件绑定是指在特定 HTML 元素上设置一个监听器,用于捕捉用户触发事件(比如点击、输入、鼠标移动等),并执行相应操作。在 JQuery 中,事件绑定通常使用 on 方法来完成。...通过事件对象,我们可以获取触发事件元素、鼠标位置、按键状态等信息。 让我们通过一个例子感受一下事件对象魅力: <!...当按钮被点击时,会触发按钮点击事件,同时会触发内层元素外层元素点击事件。...; }); 在这个例子中,我们监听了用户名密码输入 input 事件,通过判断输入内容长度,实时更新相应错误提示。

16210

JavaScript进阶内容——jQuery

库以及使用方法,本篇不会完全讲解jQuery全部语法 如果希望完全掌握,可以参考网站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery...顶级对象$ 我们在这里介绍一下jQuery出场率最高$符号: 是jQuery别称,在代码中我们可以用代替jQuery一般为了方便,我们习惯写 是jQuery顶级对象,类似于JavaScript...jQuery对象DOM对象是两种完全不同对象: 用原生JS获得来对象就是DOM对象 用jQuery获得来对象就是jQuery对象 jQuery对象本质是: 利用$对DOM对象包装后产生对象(.../index.html jQuery事件 jQuery鼠标事件键盘事件与JavaScript原生代码事件完全相同: 鼠标事件 触发条件 click 鼠标点击左键触发 mouseover 鼠标经过触发...说明 keyup 某个键盘按键被松开时触发 keydown 某个键盘按键被按下时触发 keypress 某个键盘按键被按下时触发(不能识别功能键,如ctrl,shift,左右箭头) 代码展示: <!

5.4K10

JS DOM学习笔记

区别是setTimeout只执行一次,setInterval可以不断执行无数次 6、onload(页面加载后触发):网页加载完毕时触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript...(鼠标按键释放)、oncontextmenu(在浏览器中单击鼠标右键显示‘右键菜单’时触发) 9、window.location对象: window.location.href = "*.html";...13、不同浏览器中对DOM支持方法不一样 获取网页中那个元素触发了事件,在IE中使用srcElement; 在FireFox里使用target 使用Dom获取更改网页标签元素内文本,在IE中使用...jQuery之类框架进行了封装,解决了不同浏览器上Dom不同 14、jQueryreadyDomonload区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片...、CSS都加载完毕后才被触发;而jQueryready则是在Dom元素创建完毕后被触发,这样可以提高网页响应速度 15、js打印一个对象所有属性: //传入一个对象 function (swiper

4K40

【audio】耳机插拔 线控按键识别流程【转】

耳机插拔/线控按键识别流程 耳机插拔/线控按键识别流程 1.文档概述 本文以msm8909平台,android N为例,介绍了通用情况下,耳机插拔流程步骤,以及对耳机类型识别逻辑。...个人经验,在插入自拍杆编写音箱球时候,从LOG上看,是被识别成headset处理音箱球是个很特殊设备,电阻超过我们阀值很多,欧标配置手机可能适用这个设备。...,虽然btn[4]没有用到,但是会影响到hook key状态 软件具体改动是把除了要用两个键,其他阀值都设成了300, 保证不会误按键产生,另外,鉴于很多自拍杆在按键都是触发btn2情况,btn2...MIC2_P 为MIC输入及耳机按键功能检测,按键检测用于监测 耳机线控板按键,通过ADC检测电压范围(根据上面5主btn阀值)来识别是哪一种按键事件,实现对应功能。...因为高通平台在MIC未工作时,会降低V_micbias电压值到几百mV级,经过偏置电阻R(2.2K)MIC分压输入到 HS_DET端电压如果不在 hook范围,会导致触发音量+/-等其它事件。

2.4K20

JavaScript学习参考结构

方括号 方括号用于查找某个范围字符: 表达式 描述 [abc] 查找方括号之间任何字符。 [^abc] 查找任何不在方括号之间字符。 [0-9] 查找任何从 0 至 9 数字。...lastModified 返回文档被最后修改日期时间。 referrer 返回载入当前文档文档 URL。 title 返回当前文档标题。 URL 返回当前文档 URL。...onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。...print() 打印当前窗口内容。 prompt() 显示可提示用户输入对话框。 resizeBy() 按照指定像素调整窗口大小。 resizeTo() 把窗口大小调整到指定宽度高度。.../jquery_reference.asp jQuery手册 http://jquery.cuishifeng.cn/index.html JavaScript 参考手册http://www.w3school.com.cn

2K20

jQuery Cheat—Sheet(jQuery学习笔记)

jQuery能满足以下需求: 取得文档元素、修改页面外观、改变文档内容、响应用户交互操作、为页面添加动态效果、不刷新加载、简化常见JavaScript任务。 ---- jQuery版本?...---- jQuery选择元素 DOM-Document Object Model 文档对象模型 以树状表示文档模型 为了创建jQuery对象,就用使用$()函数。...jQuery 提供针对动画队列功能。...> **DOM = Document Object Model(文档对象模型)** DOM 定义访问 HTML XML文档标准: "W3C文档对象模型独立于平台语言界面,允许程序脚本动态访问更新文档内容...方法获得输入字段值: $(“#btn1”).click(function(){ alert(“值为: “ + $(“#test”).val()); //警告框弹出test 标签输入文本值

16.2K30

CSDN Chrome插件来了。助开发者提升开发效率,远离996

插件定位 帮助开发者提升开发效率,远离996 官网 特点 以搜索框为入口,集成开发者常用工具,提升开发效率 主要功能如下: 支持本地书签、tab页、历史记录搜索 集成CSDN搜索结果,本地内容远程结果无缝集成...所有操作都支持快捷键,提升搜索效率 快速查看文档,目前支持html,html5,h5,css,css3,js,jquery,bootstrap,vue,echarts,json,linux,docker...,点击“加载已解压扩展程序”按钮,选择已解压插件目录完成安装 Chrome商店安装:审核中,敬请期待 试用 安装完成后,在浏览器任意页面,按键o (不是0)触发插件 这个输入框就是插件主要入口了...,所有功能都从这里触发 使用mac同学应该比较熟悉,参考了mac聚焦搜索 功能介绍 书签、历史记录、标签页搜索 插件基本功能是搜索书签、历史记录、标签页。...在搜索框输入搜索词,插件会返回搜索结果,快捷键上下选择对应内容或者鼠标点击后,会跳转到相应内容 搜索资料 联网时,也会搜索远程服务器,可以快速查找资料 查看文档 小工具 是个计算器

46410

4-Jquery学习四-事件操作

/page/tag/jquery-event-methods 1,ready ready()函数用于在当前文档结构载入完毕后立即执行指定函数。...从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需所有功能,用于统一取代以前bind()、 delegate()、 live()等事件函数。...这里介绍load()是一个事件函数,jQuery中还有一个同名Ajax函数load(),用于通过Ajax加载html文档内容。...它与keypress事件类似,keypress着重是按下该键输入了哪个字符(只有能够打印字符键才会触发keypress) keydown着重是按下了哪个键(按下任何键都可触发keydown)。...对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性非打印键,请监听keydown事件。 keyup事件会在按下键盘按键并释放时触发

4.4K90

简书搜索自动匹配功能

先从我做功能界面开始说起: 本篇主要介绍就是图中红框标记搜索自动匹配功能。仔细想一想,有木有很熟悉,对,这功能其实就是跟你每天百度、谷歌这样搜索功能一样。...每天都用到搜索自动匹配功能 百度搜索框(默认显示四条数据) 美团搜索框 美团.jpg 淘宝搜索框 首先,大概过程肯定是这样:先从输入框中输入关键字,然后根据关键字在缓存或数据库取数据返回显示在下方区域...重点知识汇总 要实现此功能JQuery+ajax是必备。这个功能需要服务端配合。客户端通过ajax从服务端取得数据。...知识点一 keydown(function(e){} 这个keydown函数是当按下按键触发事件,比如改变文本域颜色。...e.which : e.keyCode; 这句代码是为了兼容浏览器按键事件对象按键码属性, 如IE中,只有keyCode属性,而FireFox中有whichcharCode属性,Opera中有keyCode

1.7K10
领券