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

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

在JavaScript的学习,我们经常会遇到JavaScript的事件机制,例如,事件绑定事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢?...在JavaScript,有三种常用的绑定事件的方法: 在DOM元素中直接绑定; 在JavaScript代码绑定绑定事件监听函数。...; } 在JavaScript代码绑定事件 在JavaScript代码(即 script 标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。...事件监听 关于事件监听,W3C规范定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。 起初Netscape制定了JavaScript的一套事件驱动机制(即事件捕获)。...事件委托可以显著的提高事件的处理速度,减少内存的占用。 实例分析JavaScript事件委托和事件绑定 ,这篇文章写得还不错。

8.7K31

react事件绑定

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

3K30

【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 只会绑定一次性的触发事件,触发一次后就会解除绑定。...event.removeListener('namea', name) event.emit('namea', '小解'); 删除 namea事件的name属性,设置两个,删除了一个name,只留下了

11K40

backbonejsView事件绑定源码分析

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

66720

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

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

7.8K30

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

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.6K20

JavaScript 事件绑定

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。...一.传统事件绑定的问题 传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。...; 问题一:一个事件处理函数触发两次事件 window.onload = function () {//第一组程序项目或第一个JS文件 alert('Lee'); }; window.onload = ...function () {//第二组程序项目或第二个JS文件 alert('Mr.Lee'); }; 当两组程序或两个JS文件同时执行的时候,后面一个会把前面一个完全覆盖掉。...PS:IE事件绑定函数attachEvent()和detachEvent()可能在实践不去使用,有几个原因:1.IE9就将全面支持W3C事件绑定函数;2.IE的事件绑定函数无法传递this;3

3.3K60

js事件(event)

当然我们也可以不给事件绑定处理方法,也就是说当此事件发生的时候,什么也不需要做,事件常有,而事件绑定的方法不一定有, 我们给页面的元素的某个事件绑定处理方法的时候。...,相当于文档的鼠标的坐标; target事件源;事件源的概念:事件最终发生在页面的那个元素上; 事件源和事件的传播是息息相关的 事件的传播包括:冒泡和捕获;事件传播是浏览器在处理事件行为的机制,冒泡阶段或者捕获阶段...,如果想把这些默认行为取消了,相应的js代码如下: a.onclick = function(){return false}//方法里加个 return false,就是组织超链接点击时的跳转行为了;...;就可以了; 但是要强调的是:如果你的事件绑定是用addEventListener来实现的,那阻止默认行为必须用e.preventDefault = true; 事件传播和阻止事件传播:       当事件发生在子元素的时候...在W3C的标准是在同一事件上,先绑定的方法先执行,并且不能重复绑定同一个方法在同一个事件上,但是IE6、7、8,如果绑定的方法少于9个,执行的顺序是相反的,超过9个,执行顺序就是混乱的,这些IE的问题都是比较严重的

6.6K30
领券