首页
学习
活动
专区
工具
TVP
发布

js绑定事件代理的坑

js通过事件代理的方式绑定跳转事件,我这里的逻辑是把click事件绑定在最外层container上面,如果e.target包含我已经写好的class,则执行跳转逻辑。...但是这种方式好像只能是在点击的元素的上面,也就是最内层的元素上面有相应的class才能跳转,在外层加同样的class不生效,说明是我对于事件代理的理解不够深刻,其实事件代理的作用就是为了把目标元素的事件绑定在外层做代理...(e) { console.log(e.currentTarget) //获得当前绑定监听事件的元素, container console.log(e.target)/...) } },false) document.getElementById("container").classList.add('jumpUrl');//写在后面也可以绑定成功...注意:内层元素,即点击的目标元素必须是点击时真正的目标元素,而不是外面一层; currentTarget绑定相应想要点击的class的时候必须是做代理的即做事件监听的元素。

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

【Node.JS事件绑定与触发

往期文章 【Node.JS】写入文件内容 【Node.JS】读取文件内容 目录 简介 绑定事件 on() addListener()  once() 监听事件emit()  传  删除事件 removeListener...()  removeAllListeners() ---- 简介 node.js事件是使用events模块,通过实例化它里面的EventEmitter类,来绑定和监听事件。...绑定事件 on() const eve = require("events"); //导入模块 var event = new eve.EventEmitter(); //进行实例化声明 event.on...event.emit('namea', '小解');  once() once 只会绑定一次性的触发事件,触发一次后就会解除绑定。...传 const eve = require("events"); //导入模块 var event = new eve.EventEmitter(); //进行实例化声明 event.on('namea

10.9K40

JS动态加载数据绑定事件--delegate() 方法

JS动态加载数据绑定事件-委托delegate() 方法 ---- W3C规范定义 定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数...使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。...---- JavaScript动态加载的数据,同时给他加载绑定事件,我选用Jquwey中的 delegate() 方法 我的理解,delegate()方法属于异步式加载绑定,dom元素加载未完成之前,可以委托给...delegate() 方法来实现的绑定操作。...top-nav-left","click",function() { window.history.back(); }); }); ---- 第一个参数为 要点击的标签属性 第二个参数为 要绑定事件

7.7K30

【如果你要学JS 】——事件绑定及解除DOM事件

绑定事件)注册事件有两种方式:传统方式和方法监听注册方式1.1传统方式1.利用on开头的事件onclick2....father.addEventListener('click', function () { alert('father') }, false); 注意:JS...document.querySelector('div'); div.onclick = function (e) { } console.log(e); // 这个e是个形,...// 当我们注册事件时,event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。...e 就是个事件对象写到我们侦听函数的小括号里面当形来看事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数.事件对象是我们事件的一系列相关数据的集合跟事件相关的比信息

12810

js 动态生成 input 的绑定事件 blur 无效

/article/details/89230040 ☯ 背景描述 今天在进行代码编写时,我需要根据ajax返回的数据动态生成一个表格,而针对于其中的input标签,要求设置失去焦点的blur事件...最开始编写的 js 代码如下: /** * 当sku库存量变化时,对应总库存进行更新 */ $(".input-sku-stock").blur(function ()...$(".input-goods_stock").val(input_goods_stock); }); 但是发现,静态的表格是可以正常实现的,而动态新生成的却无法触发blur事件...ி 附录 1.针对我的问题,求助度娘,发现了下面的一个帖子,可作参考 动态添加的blur事件失效 [问题点数:60分,结帖人lawrendc] 时间相当久远... 2.最接近解决需求的文章如下...,建议可自行测试 动态生成input绑定事件无效如:blur 意见:异步导致绑定事件失败,需使用全局绑定事件 3.w3school 文档 - onblur 事件 这就是官方文档

8.8K00

Python装饰器

装饰器(无)   它是一个函数;   函数作为它的形;   返回值也是一个函数;   可以使用@functionname方式,简化调用; 装饰器和高阶函数   装饰器是高阶函数,但装饰器是对传入函数的功能的装饰...这就引出了我们的装饰器 import datetime import time def copy_properties(src):     def wrapper(dst):         dst...qualname__, sep='\n') 通过copy_properties函数将包装函数的属性覆盖掉包包装函数; 凡是被装饰的函数都需要复制这些属性,这个函数很通用; 可以将复制属性的函数构建成装饰器函数,装饰器...x, y):     print("======call add======")     time.sleep(5)     return x + y print(add(4, y=5)) 装饰器(...)   它是一个函数;   函数作为它的形;   返回值是一个不带的装饰器函数;   使用@functionname(参数列表)方式调用;   可以看做在装饰器外层又加了一层函数; ---- ---

40830

JavaScript 事件绑定

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。...一.传统事件绑定的问题 传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。...; 问题一:一个事件处理函数触发两次事件 window.onload = function () {//第一组程序项目或第一个JS文件 alert('Lee'); }; window.onload = ...function () {//第二组程序项目或第二个JS文件 alert('Mr.Lee'); }; 当两组程序或两个JS文件同时执行的时候,后面一个会把前面一个完全覆盖掉。...,IE是无法像W3C那样通过传接受event对象,但如果使用了attachEvent()却可以。

3.3K60

Hooks与事件绑定

Hooks与事件绑定 在React中,我们经常需要为组件添加事件处理函数,例如处理表单提交、处理点击事件等。...事件绑定 使用Hooks进行普通的合成事件绑定是一件很轻松的事情,在这个例子中,我们使用了普通的合成事件onClick来监听按钮的点击事件,并在点击时调用了add函数来更新count状态变量的值,这样每次点击按钮时...原生事件绑定 虽然React为我们提供了合成事件,但是在实际开发中因为各种各样的原因我们无法避免的会用到原生的事件绑定,例如ReactDOM的Portal传送门,其是遵循合成事件事件流而不是DOM的事件流...此外,很多库可能都会有类似addEventListener的事件绑定,那么同样的此时也需要在合适的时机去添加和解除事件绑定。...,其中ref1的事件绑定是在组件挂载的时候进行的,而ref2的事件绑定是在count发生变化的时候进行的,看起来代码上只有依赖数组[]和[count]的区别,但实际的效果上差别就很大了。

1.8K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券