实例代码详解 bind(),One(),Live()

今天用jQuery 写UI时遇到了不太熟悉的问题：如何用 jQuery 处理网页元素的事件，以前虽然接触过，但是有很多不明白的地方，今天就详细研究一下。

jQuery是一款优秀的JavaScript框架,在旧版里主要用bind()方法，在新版里又多了两种One(),Live()，下面介绍这几种方法的使用：

1. bind/Unbind
在jquery的事件模型中，有两个基本的事件绑定函数，bind与unbind，这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的 onfocus，onblur，onmouseover，onmousedown等事件都可以作为bind的参数进行传递。

$("#id").bind('click',function(){alert('tt!')});

其中bind的第一个参数代表的含义是：事件类型(注意不需要加on)，function中的代码就是你要执行的逻辑代码
多个事件绑定：bind还允许你绑定多个事件，事件名字之间用空格隔开，例如：

$('a').bind('click mouseover',function(){

在最新的jquery1.4版本中，对bind方法进行了改进，你可以在bind方法传入一个类JSON对象来一次绑定多个事件处理函数。

$('a').bind({
click:function(){alert('a');},
mouseover:function(){alert('a again!')}

在function函数中，你还可以通过传递一个javaScript对象给function方法，这个事件对象通常是可以省略的。
bind中还有一个参数data，该参数一般情况下很少使用，通常为了解决在同一个方法中处理同一个变量时有很好的处理。

var productname="Sports Shoes";
$('#Area').bind('click',function(){
alert(productname);
});

productname="necklace",
$('#Area').bind('click',function(){
alert(productname);
});

由于变量productname被重新赋值，所以输出的消息都是”necklace”,这里不了解可以去查阅下关于JavaScript的变量作用域,要解决这个问题就必须使用到data参数，

2. One
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。该方法与bind方法的参数一样，与bind方法的区别就是只对匹配元素的事件处理执行一次，执行完之后，以后再也不会执行,当然重新发起web请求时它又会执行一次。

$('a').one('click',function(){
alert('a');
})

单击页面上的a元素后，弹出消息，除非用户发起第二次请求，否则再次点击a元素不会弹出消息对话框。

3. live
该方法主要是能处理动态添加的元素，给那些后添加的元素也一样绑定事件。

$('a').live('click,function(){
alert('show message!');
})

然后如果我添加一个元素，

$('body').appnend('Another Element');

那么该元素也会被触发事件处理函数alert。

来源：A8U扎金花

原文：http://www.a8u.net/news_html/99.html

实例代码详解 bind(),One(),Live()相关推荐

yii mysql 事务处理_Yii2中事务的使用实例代码详解
前言一般我们做业务逻辑,都不会仅仅关联一个数据表,所以,会面临事务问题. 数据库事务(Database Transaction) ,是指作为单个逻辑工作单元执行的一系列操作,要么完全地执行,要么完全 ...
vue build text html,Vue中v-text / v-HTML使用实例代码详解_放手_前端开发者
废话少说,代码如下所述: /p> 显示123 /p> 补充:vuejs {{}},v-text 和 v-html的区别 {{message}} let app = new Vue({ el ...
java 文件下载详解_Java 从网上下载文件的几种方式实例代码详解
废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.github.pandafang.tool; import java.io.BufferedOutputStream; i ...
vue中点击事件的写法_vue实现绑定事件的方法实例代码详解
一.前言 vuejs中的事件绑定,使用来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法执行方法的第 ...
pos请求微信小程序_微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...
[小白系列][线性回归模型]股票回归分析实例代码详解
代码详解 P.S:记录下第一个搞明白的模型哦! import statsmodels.api as sm # 基本api import statsmodels.formula.api as smf # ...
java多线程代码_java多线程实例代码详解
原文:http://blog.csdn.net/paranoidyang/article/details/70184523 作者:Paranoidyang 线程与进程的区别 (1)程序是一段静态的代码 ...
Unity ShaderLab特效教程适用于贴图、sprite和ugui的2d着色器实例代码+详解注释【将贴图转为马赛克效果】
如果代码中有什么不清楚请查看以下基础知识 Shader基础知识 unity3d 中七种坐标知识详解一个将贴图转为马赛克效果的shader: 万恶的马赛克其实也是一种艺术风格,如果你在开发2d游戏不 ...
Unity ShaderLab特效教程适用于贴图、sprite和ugui的2d着色器实例代码+详解注释【锐化效果】
如果代码中有什么不清楚请查看以下基础知识 Shader基础知识 unity3d 中七种坐标知识详解锐化效果笑狗图代码 Shader "Custom/BlurBox" {Pr ...

实例代码详解 bind(),One(),Live()

实例代码详解 bind(),One(),Live()相关推荐

最新文章

热门文章