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

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

delegate 不多用,在Jquery1.7中已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的元素绑定特定事件类型的监听函数...,使用时需要注意 使用:$("#div li").bind("click",myFun); on(event,childSelector,data,function) on() 方法在被选元素及子元素添加一个或多个事件处理程序...规定只能添加到指定的子元素事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。  data:可选。规定传递到函数的额外数据。 function:可选。...; 8 9 $(".cnd").click(function(){ 10 console.log("3rd")} 11 ); 12 13 /* js...执行 js 的 cm2 点击事件,控制台打印的是: ?

5.6K20

JavaScript 事件绑定

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定提供了更强大更方便的功能。...一.传统事件绑定的问题 传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。...function () {//第二组程序项目或第二个JS文件 alert('Mr.Lee'); }; 当两组程序或两个JS文件同时执行的时候,后面一个会把前面一个完全覆盖掉。...4.在传统事件,IE是无法接受到event对象的,但使用了attchEvent()却可以,但有些区别。...取消事件默认行为还有一种规范的做法,就是返回false。

3.3K60

【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

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

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

7.9K30

WPF 笔刷绑定可能的原因

在 WPF 中如背景色等都是使用笔刷,在使用绑定的时候可能绑定,本文告诉大家绑定可能的原因和调试方法 有小伙伴问我为什么他的背景绑定,他的代码如下 <Window.Resources...Color 而 Background 的需要的值是 Brush 所以绑定 修复方法是返回 Color 应该返回 Brush 就可以 调试 XAML 绑定可以通过在 VisualStudio 的选项开启输出绑定信息...在工具 选项 调试 输出窗口 可以看到绑定的输出,将这一项设置为详细就可以输出很多调试信息,如上面代码将会输出绑定返回值 System.Windows.Data Information: 10 : Cannot...,同时没有设置绑定失败使用的值;将使用默认值代替。...绑定表达式是 Path=Width 数据项是没有,绑定的元素是 Grid 绑定的属性是 Background 这个属性的类型是 Brush 类型 如果不想每次都设置 VisualStudio 可以使用

92940

Vue事件绑定原理

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

8.8K40

WPF 笔刷绑定可能的原因

在 WPF 中如背景色等都是使用笔刷,在使用绑定的时候可能绑定,本文告诉大家绑定可能的原因和调试方法 有小伙伴问我为什么他的背景绑定,他的代码如下 <Window.Resources...Color 而 Background 的需要的值是 Brush 所以绑定 修复方法是返回 Color 应该返回 Brush 就可以 调试 XAML 绑定可以通过在 VisualStudio 的选项开启输出绑定信息...在工具 选项 调试 输出窗口 可以看到绑定的输出,将这一项设置为详细就可以输出很多调试信息,如上面代码将会输出绑定返回值 System.Windows.Data Information: 10 : Cannot...,同时没有设置绑定失败使用的值;将使用默认值代替。...绑定表达式是 Path=Width 数据项是没有,绑定的元素是 Grid 绑定的属性是 Background 这个属性的类型是 Brush 类型 如果不想每次都设置 VisualStudio 可以使用

58340

Hooks与事件绑定

Hooks与事件绑定 在React中,我们经常需要为组件添加事件处理函数,例如处理表单提交、处理点击事件等。...Hooks的优势在于可以让我们在编写类组件的情况下,复用状态逻辑和副作用代码,Hooks的一个常见用途是处理事件绑定。...原生事件绑定 虽然React为我们提供了合成事件,但是在实际开发中因为各种各样的原因我们无法避免的会用到原生的事件绑定,例如ReactDOM的Portal传送门,其是遵循合成事件事件流而不是DOM的事件流...,其中ref1的事件绑定是在组件挂载的时候进行的,而ref2的事件绑定是在count发生变化的时候进行的,看起来代码只有依赖数组[]和[count]的区别,但实际的效果差别就很大了。...,因为这个函数实际是被重新定义了一遍,只不过名字相同而已,从而其生成的静态作用域是不同的,那么在新的函数执行时,假设我们不去更新新的函数,也就是更新函数作用域的话,那么就会保持上次的count引用,

1.8K30
领券