jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉
【band()方式绑定】
3.0版本之前的绑定方式比较常用的是bind()绑定事件,解除事件的方式是unbind(),但是在3.0之后band()的绑定方式也别相应的解除掉了。bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件,是没有办法达到效果的,如下代码。
1 <body> 2 <button id="add" type="button">add DIV</button> 3 <button id="del" type="button">del DIV</button> 4 <button id="onBtn" type="button">绑定事件</button> 5 <button id="offBtn" type="button">解绑事件</button> 6 <div id="container"> 7 <div class='created'>我是原生div<div/> 8 </div> 9 </body> 10 <script> 11 $(function () { 12 $("#add").click(function(){ 13 $("#container").prepend("<div class='created'>我是动态生成的div<div/>") 14 }); 15 $("#del").click(function(){ 16 $("div").remove(".created:first") 17 }); 18 $("#onBtn").click(function(){ 19 $("#container").on("click",".created",function(){ 20 alert(1); 21 }); 22 }); 23 $("#offBtn").click(function(){ 24 $("#container").off("click"); 25 }) 26 }) 27 </script>
delegate(),live()两种绑定方式并不太常用,因此推荐下面这种方式,on()绑定。
【on()事件绑定】
① 使用on进行单事件绑定
$("button").on("click",function(){
$(this) 取到当前调用事件函数的对象
console.log($(this).html());
});
② 使用on同时为多个事件,绑定同一函数
$("button").on("mouseover click",function(){
console.log($(this).html())
});
③ 调用函数时,传入自定义参数
$("button").on("click",{name:"jianghao"},function(event){
使用event.data.属性名 找到传入的参数
console.log(event.data.name);
})
④ 使用on进行多事件多函数绑定
$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver")
}
});
⑤ 使用on进行事件委派
>>> 将原本需要绑定到某元素上的事件,改为绑定在父元素乃至根节点上,然后委派给当前元素生效;
eg:$("p").click(function(){});
$(document).on("click","p",function(){});
作用:
默认的绑定方式,只能绑定到页面初始时已有的p元素,当页面新增p元素时,无法绑定到新元素上;
使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件
off() 取消事件绑定
1. $("p").off(): 取消所有事件
2. $("p").off("click"): 取消点击事件
3. $("p").off("click mouseover"):取消多个事件
4. $(document).off("click","p"):取消事件委派
转载于:https://www.cnblogs.com/GlenLi/p/6886675.html
jQuery中的事件绑定的几种方式相关推荐
- Javascript事件绑定的几种方式
Javascript事件绑定的几种方式 来源:http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html 上篇文章讲到了事件绑定的3中 ...
- js中事件绑定的几种方式
事件处理程序即给元素绑定事件的方式有下列几种:HTML事件处理程序.DOM0级事件处理程序.DOM2级事件处理程序.IE事件处理程序.跨浏览器事件处理程序.其实这些方式就是一个逐步优化和实现跨浏览器的 ...
- 原生JS事件绑定的三种方式
JavaScript绑定事件的方法 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
- JS事件绑定的几种方式
一.有几种常用的: 在JavaScript中,有三种常用的绑定事件的方法: 1.在DOM元素中直接绑定. 2.在JavaScript代码中绑定. 3.绑定事件监听函数. 二.具体分析: 1.在DOM元 ...
- JS 事件绑定的几种方式 小笔记
第一种 var test=document.getElementById('add'); add.οnclick=function(){ alert('1'); } 直接在对象上注册事件 缺点:如果我 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- java中jquery怎么学,浅谈jQuery中的事件--Java学习网
核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...
- jquery中的事件和动画
目录 一.jquery中的事件 1.加载DOM 2.事件绑定 3.合成事件 4.事件冒泡 5.事件对象的属性 6.移除事件 二.jquery中的动画 1.隐藏和显示 2.滑动效果 3.淡入淡出效果 三 ...
- vue学习:事件传递(冒泡和捕获),事件委托,jquery中的事件委托,$event 获取元素,vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
- jQuery 中的事件参数传递机制
jQuery 中的事件参数传递机制 jQuery事件参数传递模型: 注:trigger 不能与 bind 的原生函数一样,使用同样的参数传递形式: 参数传递一: $(document).ready(f ...
最新文章
- 用db-RDA进行微生物环境因子分析-“ggvegan“介绍
- Docker 使用Dockerfile构建tomcat镜像
- 哥本哈根能效中心:阿里云用清洁的计算能力改变世界
- codeforces 739E - Gosha is hunting
- No module named 'pandas.core.internals.managers'; 'pandas.core.internals' is not a package
- 小技巧来助阵 玩转Google Chrome(谷歌浏览器)
- php7 setcookie无效_php COOKIE介绍和setcookie有时会在ie下失效问题
- WP7有约(六):AppBarUtils使用指南
- linux系统安装redis,外部无法访问
- 使用skyeye运行《Linux设备驱动开发详解》的实例(一)
- 分布式技术是大规模应用的最后一个考验
- Linux中关机,重启,注销命令
- C++ 常用术语(后续补充)
- WLC5520无法通过无线客户端进行网管故障解决
- 微波射频学习笔记2--------传输线理论
- 计算机主机电源连接,七个步骤教你主机电源如何接线
- STM32开发笔记106:解决ST-LINK的Old ST-LINK firmware/ST-LINK already usde问题
- 温故而知新,19646字Java基础知识梳理
- [VT虚拟化驱动]利用EPT实现无痕HOOK
- 【谁年轻时没YY过】财务自由后的某一天