jQuery中绑定事件bind() on() live() one()的异同
jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件
bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除)
live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除)
delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除)
on()---------------------------版本号大于1.7(在Jquery1.7中添加,相应off()也添加)
A:bind()事件的用法
<title>绑定事件</title> <script src="js/jQuery1.11.1.js" type="text/javascript"></script> <script> $(function () { $("p").bind({ "mouseover": function () { $("p").css("background-color", "red"); }, "mouseout": function () { $("p").css("background-color", ""); } }); }); </script> </head> <body> <p>what are you doing?</p> </body> </html>
第一个最大的区别就是:bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件,是没有办法达到效果的
在后面的动态生成DOM元素绑定事件就要使用on();
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del
-
jquery bind(click)传参让列表中每行绑定一个事件
点击列表中某行,弹出详情的需求比较常见.用jquey bind 点击事件时,传参不注意可能会导致点击每一行都是显示相同内容的情况,这大多数是因为传参没注意引起的问题.简易代码如下: for(var i=0;i<2;i++) { $("#b" + i).bind("click", {'bindText':bindText + i}, function(e){ butClick(e); }); } 测试代码: <html> <head> &
-
JQuery入门——用bind方法绑定事件处理函数应用介绍
1.bind()功能是为每个选择元素的事件绑定处理函数,其语法如下:bind(type, [data], fn) 其中type为一个或多个类型的字符串,如click或change,也可以自定义:可以被type调用的类型包括blur.focus.load.resize.scroll.unload.click.dbclick.mousedown等事件.参数data是作为event.data属性值传递对象的额外数据对象.参数fn是绑定到每个选择元素的事件中的处理函数. 2.示例代码: 复制代码 代码如
-
JQuery入门——移除绑定事件unbind方法概述及应用
1.在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制
-
jQuery使用bind函数实现绑定多个事件的方法
本文实例讲述了jQuery使用bind函数实现绑定多个事件的方法.分享给大家供大家参考,具体如下: 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleave", function() { $(this).toggleClass("entered"); }); 在1.4版本以后,也可以如下绑定 $("#foo").bind({ click: func
-
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
一直没什么兴趣看jQuery,就用自己那点不咋样的javascript硬撑着,今天写一个功能时想尝试一下,用bind注册事件时发现怎么都不好使 复制代码 代码如下: $("#txtStation").bind("onpropertychange", GetStationLevel); 然后onclick之类的都试了,没一个能用的,无奈去翻jQuery的API,都是鸟语我也看不懂具体说了点了,但是发现bind注册事件都是没有on的. 发现有change事件,试了试 复
-
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法.分享给大家供大家参考,具体如下: 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), 实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w
-
JQuery中绑定事件(bind())和移除事件(unbind())
有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test
-
jQuery中对未来的元素绑定事件用bind、live or on
对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 复制代码 代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){
-
解析jQuery的三种bind/One/Live事件绑定使用方法
jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind
-
jQuery中的on与bind绑定事件区别实例详解
on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" . selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data给事件处理函数. fn:该事件被触发时执行的函数. false 值也可以做一个函数的简写,返回false. bind(type,[data],fn) 为每
随机推荐
- Perl Mysql数据库操作实现代码
- 详解python里使用正则表达式的全匹配功能
- php自动获取字符串编码函数mb_detect_encoding
- javascript动态添加单元格的脚本代码
- C#实现简单的登录界面
- android Imageview 图片覆盖具体实现
- js 纯数字不重复排列的另类方法
- Shell脚本中判断输入变量或者参数是否为空的方法
- CSS文字截取功能实现代码
- 深入理解浏览器的各种刷新规则
- jQuery插件实现文件上传功能(支持拖拽)
- SqlServer如何通过SQL语句获取处理器(CPU)、内存(Memory)、磁盘(Disk)以及操作系统相关信息
- jQuery拖拽插件gridster使用指南
- jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
- 适用于php-5.2 的 php.ini 中文版[金步国翻译]
- 人气永夺冠军 教你无限自动刷票(图)
- 用好你的快速启动栏
- java使用itext导出PDF文本绝对定位(实现方法)
- C语言实现求定积分的方法
- Android中mvp模式使用实例详解