JQuery事件——绑定多事件.on()和卸载事件.off()

绑定多事件.on()和卸载事件.off()

1 .on()绑定事件，通过空格分离传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法，可以通过第二对象或参数，当一个事件被触发时，要传递给事件处理函数

2 .on()绑定2个事件 $("elem").on("mousedown mouseup",fn)

3 快捷方式与on的不同

on可以自定义事件名

多个事件绑定同一个函数

多个事件绑定不同函数

将数据传递到处理程序

4 事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上，如果提供了第二参数，那么事件再往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

5 .off()卸载事件

6   卸载事件off()的方法    通过.on()绑定的事件处理程序    通过off() 方法移除该绑定7   off方法可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数，当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除8   off方法可以   删除一个事件      $("elem").off("mousedown")   删除所有事件      $("elem").off("mousedown mouseup")   快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁      $("elem").off()

原文地址：http://blog.51cto.com/lakaodekaola/2060719

时间： 2024-08-25 04:51:35

JQuery事件——绑定多事件.on()和卸载事件.off()的相关文章

事件绑定的快捷方式利on进行事件绑定的几种情况

[事件绑定快捷方式]$("button:first").click(function(){ alert(1); }); [使用on绑定事件] ① 使用on进行单事件绑定 $("button").on("click",function(){ //$(this) 取到当前调用事件函数的对象 console.log($(this).html()); }); ② 使用on同时为多个事件,绑定同一函数$("button").on(&qu

新元素之前的事件绑定无效（live方法）--事件委托

jq1.7之前可以用live():绑定事件 ,动态生成的标签也可以绑定上. jq1.7之后live(),方法取消改为on():但是动态生成的元素绑定不上事件了. 1 <ul> 2 <button id="btn">creatEle</button> 3 <li class="li">1111111111</li> 4 <li class="li">1111111111<

jquery 深入学习笔记之一（事件绑定）

[jquery 事件绑定] 1.添加元素事件绑定 (1) 添加事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 添加事件为未来元素(动态添加元素) $(document父).on('click','p子',function(){ //code here... }) 注意前后俩者对象是父子关系(只要是父子均可) (3) 多个事件同时绑定 $(document).ready(function(){ $("p").on

jquery 深入学习笔记之中的一个（事件绑定）

[jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来元素(动态加入元素) $(document父).on('click','p子',function(){ //code here... }) 注意前后俩者对象是父子关系(仅仅要是父子均可) (3) 多个事件同一时候绑定 $(document).ready(function(){ $("p")

jQuery源码解析之on事件绑定

本文采用的jQuery源码为jquery-3.2.1.js jquery的on方法用来在选定的元素上绑定一个或多个事件处理函数. 当参数selector存在时,通常会用来对已经存在的元素或将来即将添加到文档中的元素做事件委托,表示当点击document中的selector元素时,将触发function回调函数. 1 <div id="div" style="font-weight:800;font-size:24px;text-align:center;color:re

jQuery之元素操作及事件绑定

1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ("selector").attr("属性名",值):=>setAttribute("属性名",值):*(*无法访问不再开始标签中存在的prop属性:例:checked,selected,disabled): ②prop读:("se

JavaScript的事件绑定及深入

事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定 (DOM2 级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. var box = document.getElementById('box'); //获取元素 box.onclick = function () { //元素点击触发事件 alert('

（转）JavaScript事件---事件绑定和深入

内容提纲: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他内容事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一．传统事件绑定的问题传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数. 1 var box = document.getElementById('box'

JS基础——事件绑定

上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的例子(JS敲久了,VB习惯的都不熟悉了,看来得经常回顾了): 1.事件处理VB VS JS Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click MsgBox("helo!") MsgBox(sender.width) '弹出触发这个事件对象的宽度 Msg

事件绑定

function addEvent(obj,sEv,fn){ if(obj.addEventListener){ obj.addEventListener(sEv,fn,false); }else{ obj.attachEvent('on'+sEv,fn); } } 事件绑定很好的解决了事件冲突, addEventListener 兼容chrome ff ie9+ attachEvent 兼容ie6-8. 看别人写的很多,老子懒得看. 我的理解就是事件绑定就是用来解决时间冲突的,以后遇到新的问