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

原生js怎么为动态生成的标签添加各种事件

这几天用zepto.js写了不少事件,突然想到一个问题,那就是原生的js如何给动态生成的标签添加事件?...因为这些标签都是后来通过ajax或者运行其他点击事件生成的,那么如果之前给他们写事件他们这个dom对象是找不到的,jq通过事件委托解决了这个问题,但是原生js这个问题该怎么解决呢?...我在网上查了很多资料,好像只有一种办法,那就是在生成标签并把标签添加到html结构中后再添加对于这个新标签的各种事件,如果有更好的方法,欢迎提出来。 <!...('a').appendChild(myp); alert(document.getElementsByTagName('p')[0]) myp.innerHTML = '我是新建的p<em>标签</em>...'; document.getElementsByTagName('p')[0].onclick = function(){ alert('我是p的点击事件') } } </script

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

【整合】input标签JS改变Value事件处理方法

阻塞在于失去焦点后才触发(输入过程中不触发事件)   2、通过JS方法修改值,修改后触发事件。...重点阻塞在于此(JS赋值要触发)   最终采用方案:   1、IE(IE8及以下)下使用onpropertychange实现JS赋值后触发事件   2、需求是手工输入结束后才触发事件,避免在文本框实时输入文字的时候也因为...我测试的代码为  $("#id").on("change",function()); oninput:html5的标准标签。...适用场景为:文本框输入过程中实时监听输入内容,触发事件 onpropertychange:IE中元素特有的属性,直接在底层监听元素的属性变化(不止是Value),任何变化都会触发事件,包括适用JS操作...      适用场景为:页面运行期间实时监听元素属性变化,触发事件,特别适用于在IE中JS操作触发事件的场景 后记:项目原需求的实现其实最好是在控件里面更改,这里做了个奇怪的东西~  权当学习 参考:

12.1K50

riot.js教程【五】标签嵌套、命名元素、事件标签条件

前文回顾 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二...】组件撰写准则、预处理器、标签样式和装配方法; riot.js教程【一】简介; 标签嵌套 让我们定义一个父标签account,一个子标签subscription <subscription...接下来我们把account标签添加到页面的body中 riot.mount('account', { plan...,所以你可以在mount事件中访问到this.refs 事件 DOM事件可以直接和riotjs标签内的方法绑定,示例如下: ...method_a : method_b }> 在事件方法内,this指代本标签实例,方法执行完之后,会马上执行this.update()事件, 如果你在方法内部,使用了event.preventUpdate

3.9K80

js动态绑定事件,无法使用for循环中变量i的问题

. ❞ 每天不是在写 bug,就是在解 bug 的路上~更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 1.问题描述 在一个 for 循环中,我动态给一堆 a 标签绑定 onclick...事件时,发现点击事件不正确。...之所以说它不正常,是因为上面我获取到了 5 个标签,正常下标应该到 4 结束,但是总是弹出 5 ???? 答:那是因为事件函数是一个匿名函数,此函数会在 for 循环执行之后调用。...那是因为 for 循环的结束条件是 i 不满足 i<5 ,那么结束后变量 i 的值就是 5,匿名函数到外层取值正好取到了它。...= 0; i < link.length; i++) { link[i].index = i; link[i].onclick = function() { alert(this.index

3.9K10

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

研发加了ajax事件后,我的交互效果有部分受了影响! 一个小姑娘,在一群大老爷们研发堆里,对着昏暗的电脑和看不太懂的后台代码,改了半天。最后没解决。我就回来了。...所以一开始事件找不到“接头人”就没有执行。 扫噶,定位到问题,就好解决了。 之所以整理成随笔,是因为我之前没遇到过这个问题,听过事件委托机制,但是根本没研究过不知道适用于什么样的bug场景。...,是通过获取元素的类名被点击后执行对应方法,但是研发套完模板,他会把所有的结构先清空,导致jq根本找不到那个元素,所以事件就不得执行了。...正规点的说:JS异步加载,JQ事件不被执行解决方法(百度的标题,hah) jquery中动态新增的元素节点无法触发事件问题(同上) 解决方法: ? ?...但是缺点是:给一个元素添加多个事件委托机制时,他就挂了。  王者方法:on ? //模拟多个事件!

4.9K50

js动画事件_JavaScript事件

js之动画事件 首先,动画事件主要包括以下三个animationstart,animationiteration和animationend事件,下面做简单分别介绍。...animationstart 该事件在css动画开始播放时触发 animationiteration 该事件在css动画重新播放时触发 animationend 该事件在css动画结束播放时触发 我们知道...animation:name duration timing-function delay iteration-count direction; 分别是:动画名称 动画持续事件 动画运行速度曲线 动画开始时的运行时间...this.innerHTML="动画正在运行"; x.style.background="pink"; } function myanimationiterration() //动画再次运行触发,同样也是通过事件监听...this.innerHTML="动画重新运行"; x.style.background="greenyellow"; } function myanimationend() //动画运行结束时触发,同样也是通过事件监听事件

18.3K10

Js 事件委托(事件代理)

这里其实还有2层意思: 第一,现在委托前台的同事是可以代为签收的,即程序中的现有的dom节点是有事件的; 第二,新员工也是可以被前台MM代为签收的,即程序中新添加的dom节点也是有事件的。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...比如我们有100个li,每个li都有相同的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添加事件,那这么做会存在什么影响呢?...在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象

11.4K30
领券