首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

js绑定事件代理的坑

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

4.9K20

jquery事件绑定

事件,用逗号隔开, .delegate()   为所有匹配选择器的元素绑定一个或者多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些匹配到的元素,也包括那些今后可匹配的元素。   ...: .on()   在选定的元素上绑定一个或多个事件处理函数。   ...$('#foo').unbind('click')       //删除所有点击事件。   ...events       一个或多个事件类型和以前绑定的函数组成的一个对象,用来以解除他们(处理程序)。   ...用法:     解除绑定的所有段落都从委托的事件:       $("p").undelegate()     解除绑定的所有段落的所有委托点击事件:       $("p").undelegate

3.5K70

JavaScript 事件绑定

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。...一.传统事件绑定的问题 传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。...; 问题一:一个事件处理函数触发两次事件 window.onload = function () {//第一组程序项目或第一个JS文件 alert('Lee'); }; window.onload = ...function () {//第二组程序项目或第二个JS文件 alert('Mr.Lee'); }; 当两组程序或两个JS文件同时执行的时候,后面一个会把前面一个完全覆盖掉。...,比如:一个超链接的默认行为就点击然后跳转到指定的页面。

3.3K60

Hooks与事件绑定

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

1.8K30

Vue事件绑定原理

Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点或者组件时候使用...addEventListener方法进行事件绑定。...if (modifiers.right) { // 将鼠标右键点击标准化 右键点击默认的是 contextmenu 事件 if (dynamic) { // 如果是动态事件 name...== emptyObject) { newHandler.modifiers = modifiers } // 绑定事件可以多个,回调也可以多个,最终会合并到数组中 const handlers...handler) { return 'function(){}' } // 事件绑定可以多个多个在解析AST树时会以数组的形式存在,如果有多个则会递归调用getHandler方法返回数组

8.7K40

【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...('namea', function () { console.log("坚毅的小解同志"); }) 查看绑定事件 const eve = require("events"); //导入模块...event.emit('namea', '小解');  once() once 只会绑定一次性的触发事件,触发一次后就会解除绑定

11K40

uni-app 事件以及事件绑定

事件修饰符 stop的使用会阻止冒泡,但是同时绑定了一个非冒泡的事件,会导致该元素上的catchEventName失效!...prevent可以直接干掉,因为uni-app里没有什么默认事件,比如submit并不会跳转页面。...也不能做,因为uni-app没有removeEventListener,虽然可以直接在handleProxy中处理,但非常的不优雅,违背了愿意,暂不考虑按键修饰符:uni-app运行在手机端,没有键盘事件...view 视图容器 hover-class 类型为string,默认值none 指定按下去的样式类,类hover-class="none"时,没有点击态效果 hover-stop-propagation...类型boolean,默认值false 指定是否阻止本节点的祖先节点出现点击态 hover-start-time 类型number,默认值50 按住后多久出现点击态 hover-stay-time

3.3K30

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

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

7.8K30
领券