jQuery事件绑定的四种方法

jQuery中提供了四种绑定事件的方法,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off:

一、on()方法(首选方法)

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

参数:

event:必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件

data:可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。

function:可选。规定当事件发生时运行的函数。

map:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。

语法:$(selector).on(event,childSelector,data,function,map)

举例:给p元素添加单击事件

$("p").on("click",function(){

    alert("The paragraph was clicked.");

});

二、bind()方法

bind()作用就是在选择到的元素上绑定特定事件类型的监听函数,

参数:

type:必需。事件类型,如click、change、mouseover等;

data:可选。传入监听函数的参数,通过event.data取到。可选;

function:必需。规定当事件发生时运行的函数(监听函数),可传入event对象,这里的event是jQuery封装的event对象,与原生的event对象有区别,使用时需要注意。

map:规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数

语法:$(selector).bind(event,data,function,map)

举例:给<p>添加一个单击事件

$("p").bind("click",function(){

    alert("单击p元素");

});

三、live()方法

live(),在版本 1.9 中被移除。请使用on()方法代替。添加一个或多个事件处理程序到当前或未来的被选元素。(还是总结在此)

参数:

event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:可选。传递到该函数的额外参数

function:必需。当事件发生时,运行的函数

语法:$(selector).live(event,data,function)

举例:当点击按钮时,隐藏或显示 <p> 元素:

$("button").live("click",function(){

    $("p").slideToggle();

});

四、delegate()方法

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

参数:

childSelector:必需。规定要添加事件处理程序的一个或多个子元素。

event:必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:可选。传递到该函数的额外参数

function:必需。当事件发生时,运行的函数

语法:$(selector).delegate(childSelector,event,data,function)

举例:当单击 <div> 元素内部的 <p> 元素时,改变所有 <p> 元素的背景颜色:

$("div").delegate("p","click",function(){

    $("p").css("background-color","pink");

});
时间: 2024-08-01 13:16:55

jQuery事件绑定的四种方法的相关文章

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

react系列-事件绑定的几种方法对比

前言 本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined. 通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构造函数中使用bind绑定this ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class Button extends

监听事件 实现的四种方法

1.初始化当前所需要控件,如何初始化一个控件…………private Button xxxxfindViewById---返回的是一个View的对象…………需要强转成其子类Button对象findViewById---是如何查找View的Id…………通过R中的ID2.设置Button的监听器,通过监听器实现我们点击Button需要操作的事情 方式一: 匿名内部类实现事件监听:在按钮的setOnClickListener方法中new一个OnClickListener类,并在OnClickListen

Jquery调用webService的四种方法

1.编写4种WebService方法 [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] //令WebService成功传入Json参数,并以Json形式返回结果 [GenerateScriptType(typeof(Person))] //不是必要,但推荐添加(如果Person里面再嵌套

jQuery事件绑定on()、bind()、live()与delegate() 方法详解

jQuery事件绑定有四个方法,对应为on,off,bind,unbind,delegate,undelegate,live,die 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置:但是live(),on(),delegate()均支持未来新添加元素的事件设置: 2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以 用来代替live()函数,live()函

jQuery事件绑定方法bind、 live、delegate和on的区别

我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1).DOM树 下图仅仅是一个示例,这是一个在browser环境下的一棵模拟DOM树,在下面的代码中仅起到演示的作用: 2).Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素)

JS事件绑定和JQ的事件绑定的几种方式

JS事件绑定的方式: 1.内嵌法: <input type="button" onclick="test()" value="click me"/> 或者是多事件绑定:<input type="button" onclick="javascript:test();test1();" value="click me"/> 2.动态绑定 直接为对象赋值 documen

深入学习jQuery事件绑定

× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对这四种事件处理程序进行了兼容处理,以更简单的方式就可以实现事件绑定.本文将详细介绍jQuery事件绑定 bind() bind()方法为一个元素绑定事件处理程序,有以下3种使用方法 bind(eventType[,eventData],handler(eventObject)) bind()方法可以

[DOM Event Learning] Section 1 DOM Event 处理器绑定的几种方法

[DOM Event Learning] Section 1 DOM Event处理器绑定的几种方法 网页中经常需要处理各种事件,通常的做法是绑定listener对事件进行监听,当事件发生后进行一些特定处理. 监听事件的几种方法如下文. 第一种,写在页面标签里面 <button onclick="alert('Hello')">Say hello</button> 上面这行代码,将按钮点击后的弹窗操作在标签声明的时候就绑定了. 这是一种糟糕的方法,原因如下: 1