首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS实现动态获取当前点击事件id属性值

整个页面是通过ajax请求最新4部视频进行填充完成,视频列表又是通过template-web.js插件补上去,所以导致所有ID值都是一样,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频...于是,想了好多办法,又把ID属性给弄成动态ajax请求属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成API+视频链接格式在新打开弹窗进行展示。...具体可以看下图: 要实现点击不同按钮,并且按钮ID是动态从ajax请求获取,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮id值,然后使用button,将链接放在value中 Dom...对象id属性可以获取元素id值。...代码 function play(obj){ alert(obj.id) } 最后改造我代码,最后实现,完成拼接。

25.7K20

Js - JQ事件委托( 适用于给动态生成脚本元素添加事件

最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表侧滑栏,在我这里用jq写交互事件。自测各方面都挺好,美滋滋给了研发。...研发也美滋滋开始开发。 但是,好景不长。。。 研发加了ajax事件后,我交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗电脑和看不太懂后台代码,改了半天。最后没解决。...所以一开始事件找不到“接头人”就没有执行。 扫噶,定位到问题,就好解决了。 之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样bug场景。...正规点说:JS异步加载,JQ事件不被执行解决方法(百度标题,hah) jquery中动态新增元素节点无法触发事件问题(同上) 解决方法: ? ?...值得注意是:亲测此方法无效,可能是我用jq版本太高了,1.9多,已经不支持这个方法了 第二个方法: ? 但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。  王者方法:on ?

4.9K50

如何实现动态添加元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件情况,这种情况下一般需要给元素加上相关属性,然后写这些元素事件函数即可。动态添加元素怎么绑定事件呢?...原生JavaScript 原生JavaScript主要有2种实现方式,第一种是在动态添加html代码中添加oclick事件,然后传递一个唯一参数来判断点击是哪个,然后做相应操作。...第二种是通过事件委托原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。...)">获取全部工作 <input name="CompanyName...该<em>事件</em>附加到staticAncestors应处理<em>的</em>元素<em>的</em>静态父级 ( )。 每次在此元素或后代元素之一上触发<em>事件</em>时,都会触发此 jQuery 处理程序。

3.8K20

js事件(event)

什么是事件: 我们可以简单事件理解为浏览器感知系统。...,相当于文档中鼠标的坐标; target事件源;事件概念:事件最终发生在页面的那个元素上; 事件源和事件传播是息息相关 事件传播包括:冒泡和捕获;事件传播是浏览器在处理事件行为机制,冒泡阶段或者捕获阶段...;当你在一个form表单里点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮时候,页面的滚动条会滚动等等;这些都叫事件默认行为,如果想把这些默认行为取消了,相应js代码如下: a.onclick...事件委托: 事件委托是利用事件传播机制,通过判断事件源来实现,是一种高性能事件处理方式。对事件委托好处和概念详见《高程3》第402页; 我们通过一个简单示例来看看事件好处。...需求:在如下HTML代码中,当你点击这个页面中一个元素时,弹出这个元素对应标签名; outer inner <

6.7K30

前端JavaScript中动态事件添加

前言 在前端开发中,交互性是至关重要。动态事件添加是一种在JavaScript中实现交互重要技术。本文将介绍动态事件添加概念和优势,并详细介绍两种常用动态事件添加方法。...动态事件添加优势 动态事件添加具有以下优势: 灵活性: 可以根据特定条件或动态生成内容来添加事件,实现更加灵活交互效果。 可扩展性: 可以在任何时候添加或移除事件,方便进行功能扩展和调整。...通过addEventListener()方法动态添加事件 addEventListener()方法是DOM对象提供一种常用事件添加方式。...可以通过以下步骤动态添加事件: 1.获取需要添加事件DOM元素。 2.使用addEventListener()方法,指定要添加事件类型和对应事件处理函数。...3.在父元素事件处理函数中,通过判断事件目标元素,确定要执行操作。 总结 动态事件添加是前端开发中实现交互性重要手段。通过动态事件添加,我们可以实现灵活、可扩展交互效果,减少重复代码编写。

22720

JS事件冒泡和捕获

事件机制 ---- 事件触发三个阶段: window往事件触发处传播,遇到注册捕获事件会触发 传播到事件触发处时触发注册事件事件触发处往window传播,遇到注册冒泡事件会触发 事件触发一般会按照...W3C event model |------------------------------------------- 但是有一个特例:如果给body中子节点同时注册冒泡和捕获事件...,事件触发会按照注册顺序执行。...和outer上面,而且这两个事件处理函数useCapture选项为true,说明他们被注册在捕获阶段。...此时进入冒泡阶段,inner上时间处理器得到执行 事件命中元素后开始向上冒泡,一路查找是否注册了冒泡阶段祖先元素上时间处理器。由于没有找到因此什么也没发生。

2.5K20

Node.js事件循环

介绍 事件循环是了解 Node.js 最重要方面之一。 为什么这么重要?...因为它阐明了 Node.js 如何做到异步且具有非阻塞 I/O,所以它基本上阐明了 Node.js “杀手级应用”,正是这一点使它成功了。...事件循环不断地检查调用堆栈,以查看是否需要运行任何函数。 当执行时,它会将找到所有函数调用添加到调用堆栈中,并按顺序执行每个函数。 你知道在调试器或浏览器控制台中可能熟悉错误堆栈跟踪吗?...此时,调用堆栈如下所示: 这是程序中所有函数执行顺序: 为什么会这样呢? 消息队列 当调用 setTimeout() 时,浏览器或 Node.js 会启动定时器。...在消息队列中,用户触发事件(如单击或键盘事件、或获取响应)也会在此排队,然后代码才有机会对其作出反应。类似 onLoad 这样 DOM 事件也如此。

2.7K20

js事件委托理解 转

事件委托也叫事件代理,事件委托就是利用事件冒泡,指定一个事件处理程序,就可以管理某一类型所有事件,何为事件冒泡呢,就是从事件最深节点开始,然后逐步向上传播事件,最大优点是提高性能 一般做法 <input type="button" id="...,添加子元素也有事件 oUl.onmouseover = function(ev){ var ev = ev || window.event;...不适合就有很多了,focus,blur之类,本身就没用冒泡特性,自然就不能用事件委托了。...我理解是:事件委托都是在外围div添加事件,当点击内部一个元素时,即使这个元素没有onclick事件,依然会从内到外执行onclick事件js中外部div 添加事件函数内 var ev = ev

1K20

JS篇(028)-移动端 click 事件、touch 事件、tap 事件区别

2.touch 事件是针对触屏手机上触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件监听,让开发者可以获取用户触摸屏幕时一些信息。...mouseover mouseup 触发 3.tap 事件在移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生,所以是封装...,还是会触发点透问题,因为实质是: 在同一个 z 轴上,z-index 不同两个元素,上面的元素是一个绑定了 tap 事件,下面是一个 a 标签,一旦 tap 触发,这个元素就会 display:...事件,注意: 我们认为 a 标签默认是绑定了 click 事件。...而这种现象不是我们所期待。 解决方案: (1)使用 fastclick。 (2)添加一个延迟。 (1)直接引入 fastclick 库。

6K40
领券