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

js绑定事件代理的坑

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

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

    【Node.JS】事件的绑定与触发

    往期文章 【Node.JS】写入文件内容 【Node.JS】读取文件内容 目录 简介 绑定事件 on() addListener()  once() 监听事件emit()  传参  删除事件 removeListener...()  removeAllListeners() ---- 简介 node.js的事件是使用events模块,通过实例化它里面的EventEmitter类,来绑定和监听事件。...('namea', function () { console.log("坚毅的小解同志"); }) 查看绑定的事件 const eve = require("events"); //导入模块..."); }) //查看对象属性 里面有绑定的事件 console.log(event);  里面有事件具体的属性,和事件的数量。...{a}同志`); }) //触发事件冰川入参数 event.emit('namea', '小解');  once() once 只会绑定一次性的触发事件,触发一次后就会解除绑定。

    11.1K40

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

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

    8.9K00

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

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

    7.9K30

    Vue.js如何阻止子组件的点击事件?

    在实际开发中,我们有时候会遇到需要控制子组件行为的需求。比方说我最近遇到一个问题,我需要在特定场景下,在父页面禁用子组件的点击事件,包括不限于子组件本身以及子组件内部子组件的点击事件。...下面我将使用 Ant Design Vue 框架实现一个示例,来展示如何在 Vue.js 中阻止子组件的点击事件。问题描述在表单业务中,有一个封装的子组件(包含 input 和 modal)。...如果选择框的值为空,则弹窗中的查询结果将为空,这个显然不是我想要的。为了保证每次弹窗查询的列表是有值的,我要做的是,当外部表单的两个选择框为空时,阻止子组件的点击事件,并给用户弹出错误提示。...总结在 Vue.js 中阻止子组件的点击事件有多种方式可供选择。通过在子组件中添加 prop 进行条件判断,可以明确传递状态控制子组件行为,但需要修改子组件代码,增加了耦合度。...在实际开发中,我们可以根据具体需求选择合适的方法来实现子组件的点击事件控制。希望这篇文章能为你在 Vue.js 开发中遇到类似问题时提供一些思路和帮助。

    50110

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

    父(parentNode),子(children),兄(previousElementSibling、 nextElementSibling)提倡1.注册事件(绑定事件)注册事件有两种方式:传统方式和方法监听注册方式...目标对象)上,当该对象触 发指定的事件时,指定的回调函数就会被执行。...father.addEventListener('click', function () { alert('father') }, false); 注意:JS...e 就是个事件对象写到我们侦听函数的小括号里面当形参来看事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数.事件对象是我们事件的一系列相关数据的集合跟事件相关的比信息...,鼠标如鼠标点击里面就包含了鼠标的相关坐标,如果是键盘事件里面就包含的键盘事件的信息比如判断用户按下了那个键这个事件对象我们可以自己命名比如event 、evt、e事件对象也有 兼容性问题ie678通过

    20510

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

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

    25.9K20

    js定义点击事件_回字四种写法

    ,触发了按钮的 onclick()事件 btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法,只是调用方法而已,并未直接触发事件 W3C事件写法 添加事件:appEventListener...该参数是可选的。 事件冒泡或事件捕获 事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。...如果你将 元素插入到 元素中,用户点击 元素, 哪个元素的 “click” 事件先被触发呢?...在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: 元素的点击事件先触发,然后会触发 元素的点击事件。...在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: 元素的点击事件先触发 ,然后再触发 元素的点击事件。

    4.4K30
    领券