首页
学习
活动
专区
工具
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时候必须是做代理即做事件监听元素。

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

    【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

    取消css事件

    但是,当其后代元素pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素事件侦听器。...元素只有在以下情况才会成为鼠标事件目标: 鼠标指针在元素内部,且fill属性指定了none之外值 鼠标指针在元素边界上,且stroke属性指定了none之外值 visibility属性值不影响事件处理...只有鼠标指针在元素内部时,元素才会成为鼠标事件目标,fill和visibility属性值不影响事件处理。 stroke 只适用于SVG。...只有鼠标指针在元素边界上时,元素才会成为鼠标事件目标,stroke和visibility属性值不影响事件处理。 all 只适用于SVG。...只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件目标,fill、stroke和visibility属性值不影响事件处理。 示例

    1.5K10

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

    JS动态加载数据绑定事件-委托delegate() 方法 ---- W3C规范定义 定义和用法 delegate() 方法为指定元素(属于被选元素子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行函数...使用 delegate() 方法事件处理程序适用于当前或未来元素(比如由脚本创建新元素)。...---- JavaScript动态加载数据,同时给他加载绑定事件,我选用Jquwey中 delegate() 方法 我理解,delegate()方法属于异步式加载绑定,dom元素加载未完成之前,可以委托给...delegate() 方法来实现绑定操作。...第二个参数为 要绑定事件 详情,请翻阅delegate() 方法 ---- 效果如图返回按钮:

    7.9K30

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

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

    19310

    react中事件绑定

    React中事件绑定是将事件处理函数与组件交互操作关联起来过程。通过事件绑定,我们可以在React组件中响应用户交互,并进行相应操作。...React中事件绑定特点React中事件绑定具有以下特点:以驼峰命名:React中事件名采用驼峰命名方式,如onClick、onChange等。...使用JSX语法:在JSX中,通过将事件处理函数作为属性值来绑定事件。使用事件对象:事件处理函数接收一个事件对象作为参数,可以通过事件对象获取相关信息。...自动绑定this:在类式组件中,事件处理函数会自动绑定组件实例this。绑定事件处理函数要绑定事件处理函数,可以通过在JSX中使用事件名作为属性,并将事件处理函数作为属性值。...以下是一个简单示例,展示了如何绑定一个点击事件:import React from 'react';class Button extends React.Component { handleClick

    3.1K30

    JavaScript 事件绑定

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便功能。...PS:IE中事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用,有几个原因:1.IE9就将全面支持W3C中事件绑定函数;2.IE事件绑定函数无法传递this;3....IE事件绑定函数不支持捕获;4.同一个函数注册绑定后,没有屏蔽掉;5.有内存泄漏问题。...那么阻止默认行为就可以屏蔽跳转这种操作,而实现自定义操作。 取消事件默认行为还有一种不规范做法,就是返回false。...那么我们可以使用contextmenu事件来修改我们指定菜单,但前提是把右击默认行为取消掉。

    3.4K60

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

    ❝小闫语录:我一直在幻想,那些伟大预言家都来自未来,那些畅销小说家都是真实经历过... ❞ 每天不是在写 bug,就是在解 bug 路上~更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选...』 1.问题描述 在一个 for 循环中,我动态给一堆 a 标签绑定 onclick 事件时,发现点击事件不正确。...但是上述代码点击每一个链接总是弹出一个值,而且还是个不正常值。之所以说它不正常,是因为上面我获取到了 5 个标签,正常下标应该到 4 结束,但是总是弹出 5 ????...答:那是因为事件函数是一个匿名函数,此函数会在 for 循环执行之后调用。调用时,发现内部没有定义变量 i ,所以就去外面找一下,发现外层有,就取外层值了,但是为什么是 5 呢?...那是因为 for 循环结束条件是 i 不满足 i<5 ,那么结束后变量 i 值就是 5,匿名函数到外层取值正好取到了它。

    3.9K10

    jquery 事件绑定取消 bind live delegate on one区别 (超详细且通俗易懂)

    ; }); 这样写跟普通写法没区别  就没必要使用绑定事件方法了 obj.click(function(){}) 注:js同一个dom元素多次绑定同一事件,只会执行最后一次事件,所以如果有这种需求,...{ $("p").unbind(); //取消p标签所有绑定事件 }); unction alertMe() { alert("Hello World!")...()方法只能放在直接选择元素后面,不能在层级比较深,连缀DOM遍历方法后面使用,即(“ul”").live...可以,但 取消绑定用die()方法 跟unbind()一样。...").insertAfter("button");//动态添加新标签会保留事件 }); }); undelegate()取消绑定事件 4.on() 究极进化产物,集前面三位所长为一身,也是最推荐用...取消绑定事件方法是off() 这里就不做演示了 跟上面的大同小异,大家赶快去试试吧! 5.one() $(selector).one(event,data,function) event 必需。

    2.4K21

    Vue事件绑定原理

    Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点或者组件时候使用...addEventListener方法进行事件绑定。...描述 v-on与@用于绑定事件监听器,事件类型由参数指定,表达式可以是一个方法名字或一个内联语句,如果没有修饰符也可以省略,用在普通元素上时,只能监听原生DOM事件,用在自定义元素组件上时,也可以监听子组件触发自定义事件....self: 只当事件是从侦听器绑定元素本身触发时才触发回调。 .{keyCode | keyAlias}: 只当事件是从特定键触发时才触发回调。...前面介绍了如何编译模板提取事件收集指令以及生成render字符串和render函数,但是事件真正绑定到DOM上还是离不开事件注册,此阶段就发生在patchVnode过程中,在生成完成VNode后,进行

    8.8K40
    领券