首页
学习
活动
专区
工具
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 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。...在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定; 在JavaScript代码中绑定绑定事件监听函数。...; } 在JavaScript代码中绑定事件 在JavaScript代码中(即 script 标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。...; } 使用事件监听绑定事件 绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。下面详细介绍,事件监听。...; } 事件监听的优点 1、可以绑定多个事件

8.7K31

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

7.8K30

【Vue原理】Event - 源码版 之 绑定标签DOM事件

$options // 从父组件选项上拿到 对应的组件的选项 var Ctor = options.components[tag] if (正常的HTML标签...Ctor: Ctor } ); return vnode } 这个 createComponent 什么鬼的,作用大概是 1、创建组件构造函数 2、处理父组件子组件的数据..._base = Vue; Vue 在引入的时候,就完成了很多初始化的内容,这里就是其中 Vue 增加options 的部分 你看到的 component 啊,filter 什么的啊,没错,保存的就是你全局注册的...1、保存刚创建好的组件构造函数,下篇文章中会调用到 2、保存父组件子组件 关联的数据,比如 event,props 之类的(由于跟本主题无关,为了整洁,统统去掉了) --- 总结 Component...传入 createComponent (作用是创建构造函数和 VNode) 5、createComponent 调用 Vue.extend 创建组件构造函数 6、新建 VNode,并把构造函数和父组件子组件的数据保存进去

52040

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

绑定事件)注册事件有两种方式:传统方式和方法监听注册方式1.1传统方式1.利用on开头的事件onclick2....该方法接收两个参数:●eventNameWithOn :事件类型字符串,比如onclick、onmouseover ,这里要带on●callback :事件处理函数,当目标触发事件时回调函数被调用2.删除事件...father.addEventListener('click', function () { alert('father') }, false); 注意:JS...// 当我们注册事件时,event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。...e 就是个事件对象写到我们侦听函数的小括号里面当形参来看事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数.事件对象是我们事件的一系列相关数据的集合跟事件相关的比信息

14210

js 动态生成 input 的绑定事件 blur 无效

blog.csdn.net/u011415782/article/details/89230040 ☯ 背景描述 今天在进行代码编写时,我需要根据ajax返回的数据动态生成一个表格,而针对于其中的input标签...,要求设置失去焦点的blur事件 需要实现的界面截图如下: ?...最开始编写的 js 代码如下: /** * 当sku库存量变化时,对应总库存进行更新 */ $(".input-sku-stock").blur(function ()...$(".input-goods_stock").val(input_goods_stock); }); 但是发现,静态的表格是可以正常实现的,而动态新生成的却无法触发blur事件...,建议可自行测试 动态生成input绑定事件无效如:blur 意见:异步导致绑定事件失败,需使用全局绑定事件 3.w3school 文档 - onblur 事件 这就是官方文档

8.8K00

【整合】input标签JS改变Value事件处理方法

某人需要在时间控件文本框赋值时,触发事件函数。实现的效果:   1、文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件。...阻塞在于失去焦点后才触发(输入过程中不触发事件)   2、通过JS方法修改值,修改后触发事件。...重点阻塞在于此(JS赋值要触发)   最终采用方案:   1、IE(IE8及以下)下使用onpropertychange实现JS赋值后触发事件   2、需求是手工输入结束后才触发事件,避免在文本框实时输入文字的时候也因为...我测试的代码为  $("#id").on("change",function()); oninput:html5的标准标签。...适用场景为:文本框输入过程中实时监听输入内容,触发事件 onpropertychange:IE中元素特有的属性,直接在底层监听元素的属性变化(不止是Value),任何变化都会触发事件,包括适用JS操作

11.9K50

终于搞明白标签绑定事件到底加不加括号了

终于搞明白标签绑定事件到底加不加括号了 最近有看到文章讲解说用js绑定事件标签内直接绑定事件的区别,但是比较零散,直说了对应的执行结果,让人看完还是迷迷糊糊,我就专门整理并对比了下区别,做下记录。...首先说下事件绑定的三种主要方式: 1、内联模式:将函数名直接作为html标签中属性的属性值。...内联模式 这种方式的缺点就是不符合行为分离的基本规范 2、脚本模式:获取节点并节点添加属性 var btn = document.getElementById...实现的方式就如同名称一样,标签添加了一个事件监听器,监听到之后就执行对应的方法 今天主要是对比下事件添加时加不加括号的效果 也就是内联模式下的使用规范 <...而在vue中使用@click绑定事件加不加括号都行,它会给你处理的 加括号的话,参数由你定义,不加括号的话,传入的参数是默认的event事件

1.1K00

riot.js教程【五】标签嵌套、命名元素、事件标签条件

前文回顾 riot.js教程【四】Mixins、HTML内嵌表达式 riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期; riot.js教程【二...】组件撰写准则、预处理器、标签样式和装配方法; riot.js教程【一】简介; 标签嵌套 让我们定义一个父标签account,一个子标签subscription <subscription...,所以你可以在mount事件中访问到this.refs 事件 DOM事件可以直接和riotjs标签内的方法绑定,示例如下: ...开头的,比如:onclick, onsubmit, oninput,都可以直接绑定方法 这类事件也可以直接绑定一句表达式,如下: 在事件方法内,this指代本标签实例,方法执行完之后,会马上执行this.update()事件, 如果你在方法内部,使用了event.preventUpdate

3.9K80

JQuery高级

on() ,下面两种用法 ------完全等同delegate ------只找到将来发生事件的目标绑定on() 事件委托两个作用:1、提高了代码执行效率2、可以未来元素绑定命令 通过程序追加的标签叫做未来元素...之前的click是只能给已有的元素绑定命令,事件委托则是既已有的绑定命令,又可以未来元素绑定命令。...on的第二种用法:只未来元素绑定命令的意思是没有提高代码效率,而是起到了现在已有和未来元素绑定命令。 <!...).on(字符串形式的事件属性, 匿名函数) // 表示只是在(没有作用1提高代码执行效率优点)未来的li绑定事件而已 $('li').on('click', function...(){ alert( $(this).index() ) }) // 事件委托:1、提高代码执行效率;2、可以未来元素绑定命令

1.5K50

前端(四)-jQuery

3.2 内容操作 html() text() 方法名 说明 html(context) 指定元素添加网页内容(会编译标签) js->innerHTML html() 获取指定元素的网页内容 text...(context) 指定元素添加网页内容(不会编译标签)js->innerText text() 获取指定元素的网页内容 3.3属性值操作 val() 方法 说明 val() 获取value属性的属性值...(了解) 4.1.4 window事件(了解) 4.1.5 表单事件(了解) 4.2 绑定事件和移出事件 4.2.1 绑定事件 方法 说明 bind() 绑定事件 4.2.1.1 绑定单个事件 bind...(); 解除指定元素绑定的所有事件 unbind(事件名); 解除指定元素绑定的指定事件 4.3 复合事件 4.3.1 hover 方法 说明 hover() 相当于mouseover和mouseout...confirm("确认要进行登录?"))

8.5K30
领券