首页
学习
活动
专区
工具
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
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    react中的事件绑定

    React中的事件绑定是将事件处理函数与组件的交互操作关联起来的过程。通过事件绑定,我们可以在React组件中响应用户的交互,并进行相应的操作。...React中的事件绑定特点React中的事件绑定具有以下特点:以驼峰命名:React中的事件名采用驼峰命名方式,如onClick、onChange等。...使用JSX语法:在JSX中,通过将事件处理函数作为属性值来绑定事件。使用事件对象:事件处理函数接收一个事件对象作为参数,可以通过事件对象获取相关信息。...自动绑定this:在类式组件中,事件处理函数会自动绑定组件实例的this。绑定事件处理函数要绑定事件处理函数,可以通过在JSX中使用事件名作为属性,并将事件处理函数作为属性值。...使用事件对象在事件处理函数中,可以通过参数获取事件对象,并从中获取相关信息,如事件的类型、目标元素等。

    3.1K30

    JS 事件绑定、事件监听、事件委托详细介绍 转

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢?...事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。...在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定; 在JavaScript代码中绑定; 绑定事件监听函数。...; } 在JavaScript代码中绑定事件 在JavaScript代码中(即 script 标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。...事件委托可以显著的提高事件的处理速度,减少内存的占用。 实例分析JavaScript中的事件委托和事件绑定 ,这篇文章写得还不错。

    8.8K31

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

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

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

    7.9K30

    backbonejsView中事件绑定源码分析

    其实上下文是接上一篇的,因为自己不理解backbone view中的事件绑定所以掉到了自己挖的一个坑里,调了两个晚上。把backbone view部分的代码看了之后才明白。 什么样的坑?...">bla bla bla bla 对应的js代码是 .. code:: javascript var View = Backbone.View.extend({ $el: $('#...,在不理解backbone绑定事件的情况下,默认以为它是绑定的 .search 这个东西。...该函数的流程是: 判断events这个属性是否定义 先接触这个view中的所有已委托的事件 一些合法性检验,如名称是否合法,是否是函数等 绑定到view实例上 最后就是绑定到 $el 上 看到这就明白了为啥我的那个...search始终无法触发了,因为它在 $el 中根本就选择不到它。

    69020

    js中的事件(event)

    当然我们也可以不给事件绑定处理方法,也就是说当此事件发生的时候,什么也不需要做,事件常有,而事件上绑定的方法不一定有, 我们给页面中的元素的某个事件绑定处理方法的时候。...”事件“的对象赋给这个形参e,这时这个e是个系统级的对象:事件; IE中的事件对象是个全局的属性window.event,而标准浏览器的事件对象就是形参e; 所以事件对象的兼容性写法为:e = e||window.event...,相当于文档的中鼠标的坐标; target事件源;事件源的概念:事件最终发生在页面的那个元素上; 事件源和事件的传播是息息相关的 事件的传播包括:冒泡和捕获;事件传播是浏览器在处理事件行为的机制,冒泡阶段或者捕获阶段...;当你在一个form表单里点击提交按钮时网页会产生一个行为病刷新网页,当你网页上滚动鼠标滚轮的时候,页面的滚动条会滚动等等;这些都叫事件的默认行为,如果想把这些默认行为取消了,相应的js代码如下: a.onclick...在W3C的标准是在同一事件上,先绑定的方法先执行,并且不能重复绑定同一个方法在同一个事件上,但是IE6、7、8中,如果绑定的方法少于9个,执行的顺序是相反的,超过9个,执行顺序就是混乱的,这些IE中的问题都是比较严重的

    6.9K30

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

    父(parentNode),子(children),兄(previousElementSibling、 nextElementSibling)提倡1.注册事件(绑定事件)注册事件有两种方式:传统方式和方法监听注册方式...2'); div[1].removeEventListener('click', fn); } 3.DOM事件流 事件流描述的是从页面中接收事件的顺序...father.addEventListener('click', function () { alert('father') }, false); 注意:JS...代码中只能执行捕获或者冒泡其中的一个阶段。...e 就是个事件对象写到我们侦听函数的小括号里面当形参来看事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数.事件对象是我们事件的一系列相关数据的集合跟事件相关的比信息

    20510

    jQuery 事件绑定 和 JavaScript 原生事件绑定

    live、delegate 不多用,在Jquery1.7中已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数...JavaScript支持在标签中直接绑定事件 2.在JavaScript代码中onXXX绑定:在JavaScript代码中绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发...在JavaScript代码中onXXX绑定 在JavaScript代码中绑定事件的语法为: elementObject.onXXX=function(){     // 事件处理代码 } 其中: elementObject...jQuery 中的事件绑定具有叠加性,JavaScript 的事件绑定则是可覆盖的。...执行 js 的 cm2 点击事件,控制台打印的是: ?

    5.7K20

    JavaScript 事件绑定

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。...function () {//第二组程序项目或第二个JS文件 alert('Mr.Lee'); }; 当两组程序或两个JS文件同时执行的时候,后面一个会把前面一个完全覆盖掉。...但其他的事件处理函数也一并被删除了,导致最后得不到自己想要的结果。如果想要只删除指定的函数中的事件处理函数,那就需要遍历,查找。...PS:IE中的事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用,有几个原因:1.IE9就将全面支持W3C中的事件绑定函数;2.IE的事件绑定函数无法传递this;3....IE的事件绑定函数不支持捕获;4.同一个函数注册绑定后,没有屏蔽掉;5.有内存泄漏的问题。

    3.4K60
    领券