jquery事件绑定的几种用法
常见的事件绑定的几种方法
主要有on(),bind(),live(),delegate(),随着版本的不断更新,live(),bind(),delegate()被相继弃用。
live():1.7版本之后被弃用
bind()、delegate():3.0版本之后被弃用
虽然在3.0之后的版本中有bind和delegate在,但在具体的实现上还是调用的on()
bind: function( types, data, fn ) {return this.on( types, null, data, fn );}, delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn );},
本文主整理1.7之后的事件绑定有on(),one()
one():只执行一次并自动除
on():为当前选定的元素集附加事件处理方法,与之对应的解绑方法off();
$(function () {$("p").on("click", function () {alert($(this).text())});$("button").click(function () {$("p").off("click");});}); });
$(document).ready(function () {$("p").one("click", function () {$(this).animate({ fontSize: "+=6px" });});$("p").on("click", function () {$(this).animate({ fontSize: "+=6px" });});});
on()的使用(1.7和之后的版本)
on():为当前选定的元素集附加事件处理方法,与之对应的解绑方法off();
查看on的源码可以发现,on的方法中是调用EventListener来绑定的
语法: .on( events [, selector ] [, data ], handler )
参数 | 描述 |
---|---|
events | 必需。类型是字符串,由空格分隔多个事件值。 |
selector | 可选。只能添加到指定的子元素上的事件处理程序(且不是选择器本身)。 |
data | 可选。规定传递到函数的参数。 |
handler | 规定当事件发生时运行的函数。允许为false,false被作为是一个函数return false的一个简写 |
demo:
function myHandler( event ) {alert( event.data.foo ); } $( "p" ).on( "click", { foo: "bar" }, myHandler );
语法: .on( events [, selector ] [, data ] )
参数 | 描述 |
---|---|
events | 必需。类型是object,由空格分隔多个事件值。事件值是被事件调用的处理函数 |
selector | 可选。只能添加到指定的子元素上的事件处理程序(且不是选择器本身)。 |
data | 可选。规定传递到函数的参数。 |
handler | 可选。规定当事件发生时运行的函数。允许为false,false被作为是一个函数return false的一个简写 |
demo:
$( "div.test" ).on({click: function() {$( this ).toggleClass( "active" );}, mouseenter: function() {$( this ).addClass( "inside" );}, mouseleave: function() {$( this ).removeClass( "inside" );}
直接和委托事件
- 当on函数省略了selector参数或者selector为null时,那么事件被称为直接事件或直接绑定事件。每次选中的元素触发事件时,就会执行处理程序,不管它直接绑定在元素上,还是从后代(内部)元素冒泡到该元素的。
- 当提供了selector参数时,事件被称为委托事件。事件不会在直接绑定的元素上触发,但当selector参数选择器匹配到后代(内部元素)的时候,事件处理函数才会被触发。
1、一些区别:
- 直接事件处理只能绑定在当前被选中的元素上,而且,在您的代码调用.on()的时候,他们必须在页面文档中已经存在。
- 委托事件除了可以给未创建的后代元素绑定事件外(即上面提到的优势),委托事件的另一个好处就是,当需要监视很多元素的时候,代理事件的开销更小
例子
下面的例子table有1,000行,给行上添加点击事件
<script type="text/javascript">$(function () {var tabledom = "";for (var i = 0; i < 10; i++) {tabledom += "<tr ><td>测试" + i + "</td></tr>";}$("#dataTable tbody").html(tabledom);$("#btnAddtr").click(function () {var html = ''for (var i = 0; i < 10; i++) {html += "<tr ><td>后添加行" + i + "</td></tr>";}$("#dataTable tbody").append(html)});//第一种事件绑定方式$("#dataTable tbody tr").click(function () {console.log("第一种方式点击:" + $(this).text());});// 第二种事件绑定方式$("#dataTable tbody").on("click", "tr", function () {console.log("第二种方式点击:" + $(this).text());});})</script>
<table id="dataTable"><tbody></tbody></table><button id="btnAddtr">添加table行</button>
代码解释
- 事件会绑定到选中元素的所有子元素,如果一个div有1,000行,那么以下代码会将处理函数绑定到1,000个元素
$( "#dataTable tbody tr" ).on( "click", function() {console.log( $( this ).text() ); });
2.委派事件的方法只有一个元素的事件处理程序,tbody,并且事件只会向上冒泡一层(从被点击的tr 到 tbody ):
$("#dataTable tbody").on("click", "tr", function(event){console.log( $( this ).text() ); });
从图片中可以出例1绑定了1000次,例2只绑定了一次,内存开销例1也比例2的开销会比较大,因此在使用时,尽量使用代理事件。
3.后添加的行,使用第一种方式事件绑定无效,但是第二种方式点击事件有效
2、冒泡特性
默认情况下,大多数事件的冒泡从最初的event target(目标元素)开始的,直到document元素。每个元素都沿着DOM层级这条路,jQuery会调用任何匹配的已被绑定的事件处理程序。如果想要防止事件向上冒泡文档树(从而防止这些元素的处理程序运行)可以调用的event.stopPropagation()。但调用event.stopPropagation(),任何绑定到当前元素上的其他同类会继续运行,为了防止这种情况,可以调用event.stopImmediatePropagation()。
调用event.stopPropagation()能阻止事件的冒泡,但默认事件事件还会触发,需要调用event.preventDefault()。event.stopPropagation()和event.preventDefault()会从一个事件处理程序会自动返回false。也可以直接将 false 当作 handler 的参数,作为 function(){ return false; } 的简写形式。直接使用return false的时候冒泡和默认事件都会阻止。
总结:
- event.stopPropagation(); 只阻止了冒泡事件, 默认行为没有阻止
- event.stopImmediatePropagation() 阻止了冒泡事件, 默认行为没有阻止,另外还阻止了同类事件
- event.preventDefault(); 只阻止了默认事件:a的跳转,冒泡事件没有阻止
- return false; 冒泡事件和默认事件都阻止
以下是例子,可以查看效果
<script>$(function () {$("a").click(function (event) {$("div").append("<p>父元素被点击</p>");})$("button").click(function (event) {$("#txtResult").append("<p>子按钮被点击</p>");// event.stopPropagation(); //只阻止了冒泡事件, 默认行为没有阻止// event.stopImmediatePropagation() //阻止了冒泡事件, 默认行为没有阻止,另外还阻止了同类事件// event.preventDefault(); //只阻止了默认事件:a的跳转,冒泡事件没有阻止//return false; //冒泡事件和默认事件都阻止 })$("button").click(function (event) {$("#txtResult").append("<p>其他事件被触发</p>");})})</script>
<a href="http://www.baidu.com" target="_blank">超链接</br><button>子按钮</button></a><div id="txtResult"></div>
3、其他
- 多个事件绑定同一个函数
function Print(type) {$("#txtResult").append("<p>" + type + "</p>")}///-------------多个事件绑定同一个函数-----------------///$(function () {$("p").on("mouseover mouseout", function (event) {Print(event.originalEvent.type)});});
- 多个事件绑定不同函数
///--------------多个事件绑定不同函数----------------///$(function () {$("p").on({mouseover: function (event) { Print(event.originalEvent.type) },mouseout: function (event) { Print(event.originalEvent.type) },click: function (event) { Print(event.originalEvent.type) }});});
- 绑定自定义事件
///--------------绑定自定义事件----------------///$(function () {$("p").on("myOwnEvent", function (event, showName) {$("#txtResult").append(showName + "! What a beautiful name!");});$("button").click(function () {$("p").trigger("myOwnEvent", ["Hello"]);});});
- 传递数据到函数
///--------------传递数据到函数----------------///$(function () {$("p").on("click", { msg: "clicked!" }, handlerName);});function handlerName(event) {alert(event.data.msg);}
转载于:https://www.cnblogs.com/judyh/p/9979589.html
jquery事件绑定的几种用法相关推荐
- day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、 对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
- uni-app watch事件监听三种用法
1.普通监听(无法监听到第一次绑定的变化) <input type="text" v-model="userName"/> //监听 当userNa ...
- JQuery事件绑定,bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
- JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- jquery事件绑定和解除绑定bind、unbind、one
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery事件绑定 使用函数bind(type [,data],fn)绑定事件,one函数也可以进行一次绑定,但是需要注意b ...
- Javascript事件绑定的几种方式
Javascript事件绑定的几种方式 来源:http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html 上篇文章讲到了事件绑定的3中 ...
- HTML中详述jQuery事件绑定方式
jQuery事件绑定方式 1.bind()方法: bind(type,[data],fn):为每个匹配元素的特定事件绑定对应的事件处理函数,各参数含义如下: type表示事件类型,多个事件类型使用空格 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是 ...
- 1、jquery事件绑定和委托的实现
jQuery的事件绑定和委托可以使用 on().one().bind().live().delegate()等方法实现. 1.on() : 语法:$(selector).on(event,child ...
- jquery事件绑定解绑机制源码分析
引子 为什么Jquery能实现不传回调函数也能解绑事件?如下: $("p").on("click",function(){alert("The par ...
最新文章
- 挖一挖不常用到而又很实用的重载-Trim
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
- ArangoDB Foxx service 使用
- pythonocc 扩展数据_如何在pythonOCC中使用样条函数?
- 宁波晚报php怎么样,宁波晚报编辑部收到一封意外来信,“今天,最美的头条是你们”...
- 2019中国民营企业500强发布:华为、海航、苏宁位列前三
- mysql libc.so.6_解决安装mysql动态库libstdc++.so.6、libc.so.6版本过低问题
- 49. NAT 服务器
- Ubuntu菜鸟入门(五)—— 一些编程相关工具
- PTA 10-99 3-1-(b) 查询st1制片公司的总裁
- Redis持久化策略AOF、RDB详解及源码分析
- 解决鼠标右键失效(响应极慢)
- 微信小程序开发语言和“前端三件套”的异同点
- css 多行文字左对齐,纯CSS实现文字一行居中,多行左对齐的方法
- 表达式求值问题数据结构课程设计
- 华为鸿蒙系统适配芯片,华为新平板参数曝光,高通骁龙870芯片加持,首发适配鸿蒙系统...
- 大聪明教你学Java | 一文解决因前后端分离导致无法从 Session 中拿到所需数据的问题
- 正确思维,和非理性自我斗争
- 蓝牙4.0--Android BLE(二)BleLib开源库
- C语言实现选择排序——简单选择排序算法