最近在进行页面开发,在做页面特效的时候,需要给一个动态加载的按钮赋予一个事件 于是不假思索的 用$(obj).bind(); 来绑定事件 。 但是这样存在一个问题: bind确实能绑定事件,但是那是相对于固定的html标签来说 当页面内容属于动态加载的时候,bind事件就存在一个bug, 只能bind一次,当你第二次触发事件的时候就没用了 当我使用bind来绑定click事件,这时, 第一次点击click能成功触发 但是第二次点击,click事件无效了... 后面研究发现,jQuery还有个绑定事件的方法:delegate(); 用法如下: $(".sentnum-box").delegate(".a-add-ordergoods","click",function (){ //js数据代码 }); 这样就能实现对动态数据绑定事件,并永不失效
mouseenter() 鼠标进入(进入子元素不触发) mouseleave() 鼠标离开(离开子元素不触发) hover() 同时为mouseenter和mouseleave事件指定处理函数 ready () DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单 绑定事件的其他方式 $(function(){ $('# div1').bind('mouseover click', function(event) { alert($(this).html()); }); }); 取消绑定事件 $( 可以看到,使用这种方式绑定click事件也是可以的。 那么,如果希望点击一次就不能点击,就可以设置一下解绑事件,如下: ? 从这里可以看出,只能触发一次click事件。因为已经解除绑定了。 同时绑定两个事件 click mouseover ? 两个事件都可以触发打印日志。那么解绑是不是也一样可以写多个的呢? ? 解除绑定的确可以写多个事件同时解除。
提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on live、delegate 不多用,在Jquery1.7中已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数 3.绑定事件监听函数:绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。 一. 在DOM元素中直接绑定 1. jQuery 中的事件绑定具有叠加性,JavaScript 的事件绑定则是可覆盖的。 原生的事件绑定,可以发现只执行了最后一个相同的绑定事件,后面绑定的事件处理函数覆盖了前面的事件处理函数。
事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。 一.传统事件绑定的问题 传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。 那么W3C现代事件绑定可以设置冒泡和捕获。 PS:IE中的事件绑定函数attachEvent()和detachEvent()可能在实践中不去使用,有几个原因:1.IE9就将全面支持W3C中的事件绑定函数;2.IE的事件绑定函数无法传递this;3 .IE的事件绑定函数不支持捕获;4.同一个函数注册绑定后,没有屏蔽掉;5.有内存泄漏的问题。
.bind() 为一个元素绑定一个元素处理程序。 }); // 一次可以绑定多个 事件,用逗号隔开, .delegate() 为所有匹配选择器的元素绑定一个或者多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些匹配到的元素,也包括那些今后可匹配的元素 : .on() 在选定的元素上绑定一个或多个事件处理函数。 .trigger() 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。 false 解除绑定相应的'return false'函数,这个函数使用.bind( eventType,false )绑定。
Angular6+ 事件绑定 临近毕业开始了第二段实习,因为项目需求,技术栈从Vue转到Angular,才发现Angular已经到7了????? 事件绑定的基础语法 或者可以使用带 on-前缀的形式 <button on-click 是的,这就是 Angular 中的双向绑定。 通过@HostListenr 把事件绑定在宿主监听器上 把一个事件绑定到一个宿主监听器,并提供配置元数据。 当宿主元素发出特定的事件时,Angular 就会执行所提供的处理器方法,并使用其结果更新所绑定到的元素。 如果该事件处理器返回 false,则在所绑定的元素上执行 preventDefault。
简介 在原生 html + js 的项目中,如果需要给一个元素添加一个鼠标点击事件,可以在 DOM 上使用 onclick 来绑定一个事件。 <button @[event]="handleClick">态参数的缩写 (2.6.0+)</button> ` }).mount('#root') // 使用 mount 绑定要监听的元素 </script> 在 Vue 中事件绑定方式一共有3中,分别是: 完整语法:v-on 简写:@ 动态参数:@[event] 其中动态参数中的 event 可以对应 data 里对应的数据。 "one($event), two($event)"> Submit </button> ` }).mount('#root') // 使用 mount 绑定要监听的元素 官方提供的事件修饰符 .stop -- 阻止事件冒泡 .prevent -- 拦截默认事件 .capture -- 阻止事件捕捉 .self -- 忽略了事件冒泡和事件捕获的影响,只有直接作用在该元素上的事件才会被调用
标准库bind函数 我们可以解决向check_size传递一个长度参数的问题。 方法是使用一个新的名为bind的标准库函数,它定义在头文件functional中。 与bind函数一样,placeholders命名空间也定义在functional头文件中 bind的参数 我们可以用bind绑定给定可调用对象中的参数或重新安排其顺序。 因此,当sort比较两个元素时,就好像调用isShorter(B,A); 绑定引用参数 默认情况下,bind的那些不是占位符的参数被拷贝到bind的返回的可调用对象中。 标准库中还有一个cref 函数,生成一个保存const引用的类 与bind一样,函数ref和cref定义在头文件functional中 注意: 标准库中定义了两个分别为bindlst和bind2nd的函数 与bind类似,这两个函数接收一个函数做参数,生成一个可调用对象,该对象调用给定函数,并将绑定参数传递给它。 但是,这些函数分别只能绑定第一个或者第二个参数。
绑定click事件 给元素绑定click事件,可以用如下方法: $('#btn1').click(function(){ // 内部的this指的是原生对象 // 使用jquery 1 2 4 5 6 选项卡示例 通过index()方法可以得到点击事件的元素序号
大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, $(".sideNav>ul").on(" click", function (e) { alert("aaa"+$(e.tagert).index()); } 即使做判断让一部分带有某个class的li标签的ul解绑click, 依然无效,事件委托会直接跳过判断,执行冒泡 解决办法: 给不想绑定点击事件的li元素阻止冒泡: $(".sideNav>ul>li.c-808").click(function(e){
事件修饰符 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
}) return { clientOne, clientTwo } } } </script> 实现 /** * dom 事件绑定 * @param { String } name 事件名称 * @param { Function } handler 回调函数 * @param { Element } target 绑定对象 , handler, option) addEvent.call(target, name, handler, Option) return remove } /** * vm 事件绑定 * @param { String } name 事件名称 * @param { Function } handler 回调函数 * @param { vm } vm 绑定vue实例 * @ }) * // 绑定事件,并返回移除函数 * const removeTime = vmEventHook('time', () => console.log(new Date()), vm) *
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点或者组件时候使用 addEventListener方法进行事件绑定。 描述 v-on与@用于绑定事件监听器,事件类型由参数指定,表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略,用在普通元素上时,只能监听原生DOM事件,用在自定义元素组件上时,也可以监听子组件触发的自定义事件 .self: 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias}: 只当事件是从特定键触发时才触发回调。 // 处理v-bind的情况 // ... } else if (onRE.test(name)) { // v-on // 处理事件绑定 name = name.replace
我实现点击table表格中的删除按钮,找到当前按钮的祖先元素tr 然后删除该行,但是我首先点击删除的时候要先弹出提示框,是否要下载,这时在点击删除按钮删除,之前没有考虑到事件重复绑定问题,所以每次点击删除的时候就会多选择几行 ,之后选择的越来越多,经过网友解答,成功解决,先把重复绑定的删除的click事件解绑再继续绑定,就没问题。
绑定事件:bind()、on()、live()、delegate()、keyup(); 触发事件:trigger(‘keyup’)、keyup(); 解绑事件:unbind()、off()、die ()、undelegate(); 符合事件:hover() 、toggle(); 事件绑定:bind(); ---- 一、绑定事件 JQuery绑定事件,除 bing() 方法之外 ,还有 on()、live()、one() 等 事件的绑定方法。 绑定事件分类: (a) 绑定单个事件 $("#btn").bind("click",function(){ //代码块 console.log(123); }); (b) 同时绑定多个事件 "); } }); JQuery中的 bind()、live()、delegate()事件方法的区别,请查阅: http://www.php100.com/html/program/jquery
一个同时问我,JQuery事件绑定为什么不生效,最好通过查找,发现了问题。 一般而言,JQuery事件绑定不生效,是一些新手经常遇到的问题,其实都是简单的问题,大概分两种情况。 先上代码,以下两个button的事件绑定都不生效。 <html> <head> <script src=".. 在未加载完成之前,通过$("#button1").click方法来进行事件绑定,由于此时未加载完成,实际上$("#button1")是一个空数组,所以最终的结果是未对任何元素进行事件绑定。 的方法被创建出来,然后被加入到body中,然后绑定事件,之后从body中移除,然后在加入body中: var div = $("<button id = 'button2'>button2< ,然后在加入的时候,事件绑定已经不存在了;这种情况应该如何解决呢?59130ListView绑定点击事件 原14430jQuery on绑定事件问题 </body> </html> 以前没注意,最近在使用on绑定事件时发现,通过for循环绑定动态绑定时,多个元素最终绑定的都是最后一次事件,不知道用while是不是也是一样,谁有清楚这种现象也可以说一下原因 解决方案:将for里面的绑定逻辑单独写一个函数即可。
腾讯云事件总线(EB)是一款安全,稳定,高效的无服务器事件管理平台,支持腾讯云服务、自定义应用、SaaS应用以标准化、中心化的方式接入,帮助您轻松实现无服务器事件驱动架构。
扫码关注云+社区
领取腾讯云代金券