首页
学习
活动
专区
工具
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

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

live、delegate 不多用,在Jquery1.7中已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高一种,作用就是在选择到元素上绑定特定事件类型监听函数...注意:使用 on() 方法添加事件处理程序适用于当前及未来元素(比如由脚本创建新元素)。 提示:如需移除事件处理程序,请使用 off() 方法。...提示:如需添加只运行一次事件然后移除,请使用 one() 方法。 event:必需。规定要从被选元素移除一个或多个事件或命名空间。由空格分隔多个事件值,也可以是数组。必须是有效事件。...执行 js cm2 点击事件,控制台打印是: ?...原生事件绑定,可以发现只执行了最后一个相同绑定事件,后面绑定事件处理函数覆盖了前面的事件处理函数。

5.6K20

JavaScript 事件绑定

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便功能。...function () {//第二组程序项目或第二个JS文件 alert('Mr.Lee'); }; 当两组程序或两个JS文件同时执行时候,后面一个会把前面一个完全覆盖掉。...主要原因是,每次切换事件时候,都保存下来,没有把无用移除,导致越积越多,最后卡死。...PS:IE中事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用,有几个原因:1.IE9就将全面支持W3C中事件绑定函数;2.IE事件绑定函数无法传递this;3....IE事件绑定函数不支持捕获;4.同一个函数注册绑定后,没有屏蔽掉;5.有内存泄漏问题。

3.3K60

【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 只会绑定一次性触发事件,触发一次后就会解除绑定

11K40

react中事件绑定

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

3K30

Hooks与事件绑定

事件绑定 使用Hooks进行普通合成事件绑定是一件很轻松事情,在这个例子中,我们使用了普通合成事件onClick来监听按钮点击事件,并在点击时调用了add函数来更新count状态变量值,这样每次点击按钮时...事件流模型,每个对象只能绑定一个DOM事件的话,就不需要像DOM2事件流模型一样还得保持原来处理函数引用才能进行卸载操作,否则是卸载不了,如果不能保持引用地址是相同,那就会造成无限绑定,进而造成内存泄漏...原生事件绑定 虽然React为我们提供了合成事件,但是在实际开发中因为各种各样原因我们无法避免会用到原生事件绑定,例如ReactDOMPortal传送门,其是遵循合成事件事件流而不是DOM事件流...此外,很多库可能都会有类似addEventListener事件绑定,那么同样此时也需要在合适时机去添加和解除事件绑定。...,其中ref1事件绑定是在组件挂载时候进行,而ref2事件绑定是在count发生变化时候进行,看起来代码上只有依赖数组[]和[count]区别,但实际效果上差别就很大了。

1.8K30

Vue事件绑定原理

addEventListener方法进行事件绑定。...描述 v-on与@用于绑定事件监听器,事件类型由参数指定,表达式可以是一个方法名字或一个内联语句,如果没有修饰符也可以省略,用在普通元素上时,只能监听原生DOM事件,用在自定义元素组件上时,也可以监听子组件触发自定义事件....self: 只当事件是从侦听器绑定元素本身触发时才触发回调。 .{keyCode | keyAlias}: 只当事件是从特定键触发时才触发回调。...// 在执行完回调之后,移除事件绑定 function createOnceHandler (event, handler, capture) { const _target = target /...== null) { remove(event, onceHandler, capture, _target) } } } 最终添加与移除事件都是调用add与remove方法,

8.7K40
领券