jQuery-3.事件篇---事件绑定与解绑
on()的多事件绑定
之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。
基本用法:.on( events ,[ selector ] ,[ data ] )
最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
最大的不同点就是on是可以自定义事件名,当然不仅仅只是如何,继续往下看
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
通过空格分离,传递不同的事件名,可以同时绑定多个事件
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
通过空格分离,传递不同的事件名,可以同时绑定多个事件,每一个事件执行自己的回调方法
将数据传递到处理程序
function greet( event ) {
alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
name: "慕课网"
}, greet );
可以通过第二参数(对象),当一个事件被触发时,要传递给事件处理函数的
<h2>on绑定多事件</h2>
<h4>测试一</h4>
<div class="left">
点击触发:on('click',fn)
<div id="test1"></div>
</div>
<script type="text/javascript">
//事件绑定一
$("#test1").on('click', function(e) {
$(this).text('触发事件:' + e.type)
})
</script>
<h4>测试二</h4>
<div class="left">
点击触发:on('mousedown mouseup')
<div id="test2"></div>
</div>
<script type="text/javascript">
//多事件绑定一
$("#test2").on('mousedown mouseup', function(e) {
$(this).text('触发事件:' + e.type)
})
</script>
<h4>测试三</h4>
<div class="right">
点击触发:on(mousedown:fn1,mouseup:fn2)
<div id="test3"></div>
</div>
<script type="text/javascript">
//多事件绑定二
$("#test3").on({
mousedown: function(e) {
$(this).text('触发事件:' + e.type)
},
mouseup: function(e) {
$(this).text('触发事件:' + e.type)
}
})
</script>
on()的高级用法
针对自己处理机制中,不仅有on方法,还有根据on演变出来的live方法(1.7后去掉了),delegate方法等等。这些方法的底层实现部分 还是on方法,这是利用了on的另一个事件机制委托的机制衍变而来的
委托机制
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
在on的第二参数中提供了一个selector选择器,简单的来描述下
参考下面3层结构
<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
给出如下代码:
$("div").on("click","p",fn)
事件绑定在最上层div元素上,当用户触发在a元素上,事件将往上冒泡,一直会冒泡在div元素上。如果提供了第二参数,那么事件在往上冒泡的过程中遇到了选择器匹配的元素,将会触发事件回调函数
<h2>on事件委托</h2>
<div class="left">
<a>陈咪咪</a>
<div class="aaron">
<a>111</a>
<a>点击这里</a>
</div>
</div>
<script type="text/javascript">
//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制,点击a元素的时候,事件触发
$('body').on('click', 'a', function(e) {
alert(e.target.textContent)
})
</script>
卸载事件off()方法
- 通过.on()绑定的事件处理程序
- 通过off() 方法移除该绑定
根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件,这里不需要传递事件名了,节点上绑定的所有事件讲全部销毁
$("elem").off() <h2>删除事件</h2> <h4>测试一</h4>
<div class="left">
on('mousedown mouseup')
<div class="aaron">点击触发</div>
</div>
<button>点击删除mousedown事件</button>
<script type="text/javascript">
var n = 0;
//绑定事件
$(".aaron:first").on('mousedown mouseup', function(e) {
$(this).text( '触发类型:' + (e.type) + ",次数" + ++n)
++n;
}) //删除事件
$("button:first").click(function() {
$(".aaron:first").off('mousedown')
})
</script> <h4>测试一</h4>
<div class="left">
on('mousedown mouseup')
<div class="aaron">点击触发</div>
</div>
<button>点击销毁所有事件off</button>
<script type="text/javascript">
var n = 0;
//绑定事件
$(".aaron:last").on('mousedown mouseup', function(e) {
$(this).text( '触发类型:' + (e.type) + ",次数" + ++n)
++n;
}) //删除事件
$("button:last").click(function() {
$(".aaron:last").off()
})
</script>
jQuery-3.事件篇---事件绑定与解绑的更多相关文章
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- React事件绑定与解绑
React中事件分类 React中事件绑定分为两种: 1.直接添加在React元素上的事件,这是React在基于Virtual DOM的基础上实现的符合w3c规范的合成事件(SyntheticEven ...
- 兼容8事件绑定与解绑addEventListener、removeEventListener和ie的attachEvent、detachEvent
兼容8事件绑定与解绑addEventListener.removeEventListener和ie的attachEvent.detachEvent ;(function(){ // 事件绑定 bi ...
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
文章目录 1.基础知识 2.代码实例 2.1 App.vue 2.2 school.vue 2.3 student.vue 3.测试效果(略) 4.实际应用(在组件化编码实战三的基础上改进) 4.1 ...
- Service的启动与停止、绑定与解绑
---恢复内容开始--- Service的意义就在于当软件停止之后还可以在背景中进行运行,换句话也就是说,比如一个音乐播放器,当我们退出音乐播放器的时候,还是希望它在背景中运行,也就是一直播放着音乐, ...
- jquery中的DOM事件绑定与解绑
在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...
- jQuery 学习笔记(5)(事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件)
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- jQuery之_事件绑定与解绑
使用jQuery实现事件的绑定和解绑 就是所谓的事件操作. 1. 事件绑定(2种): * eventName(function(){}) 绑定对应事件名的监听, 例如:$('#div').click( ...
- jquery中事件重复绑定以及解绑问题
一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...
- jQuery事件绑定,解绑,触发
事件绑定 1.bind(type,[data],fn) --type: 含有一个或多个事件类型的字符串,由空格分隔多个事件.比如"click"或"submit" ...
随机推荐
- 生成器的认识及其思考:VAE, GAN, Flow-based Invertible Model
生成器对应于认知器的逆过程. 这一切的起源都是当初一个极具启发性的思想:Sleep-wake algorithm——人睡眠时整理记忆做梦,是一个生成的过程,即通过最终的识别结果企图恢复接收到的刺激,当 ...
- 正则-关于一个结果不确定现象怪的研究(reg.test(‘-1’))
先看下边代码 var value = '-1'; var reg = /^-{0,1}\d+$/g; debugger; if (reg.test(value)||reg2.test(value)) ...
- markdown首行缩进
首行缩进两个字符:(每个表示一个空格,连续使用两个即可) 半角的空格 全角的空格
- hdu第4场j.Let Sudoku Rotate
Problem J. Let Sudoku Rotate Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Su ...
- python learn note1
1.python 的缩进 习惯了java,c++之类的宽容,初学python,被它摆了道下马威,写if else,竟然必须要我正确用缩进格式,原来在python里不能用括号来表示语句块,也不能用开始/ ...
- mycat环境搭建
最近工作中突然让搞mycat,特意私下在家先搞一套练个手: 1.先下载一个CentOS7 mini版本就可以(本人机器性能有限): 2.使用VMware创建虚拟机,过程百度下一大堆,这里不做详细介绍. ...
- jquery validate 校验时,如果有type=hiddien
当校验时,不需要校验#warnId,否则会引起输入框#alarmtile里的样式混乱
- 一个通过GINA拦截 盗窃登陆口令的病毒分析
病毒行为: 1\将资源中的DLL释放到当前目录下 2\设置注册表,将GINA DLL设置为上一步中释放的DLL DLL行为: 1\在DLL被进程装载时, 装载正常的msgina.dll, 并保存句柄, ...
- StringUtils.defaultIfBlank
StringUtils.defaultIfBlank在字符串为null,空串或者空白串的时候,返回指定的默认值. org.apache.commons.lang.StringUtils default ...
- sed命令总结-Linux
sed命令总结-Linux linuxsed 2018年02月08日 19时27分57秒 命令语法经常忘记,每次总是看笔记不切实际,记不起来的要多查manual,本次总结按照manual总结,希望下次 ...