jquery中有哪几种常用绑定事件

编辑: admin 分类: 电脑知识 发布时间: 2023-06-11 来源:互联网

jQuery中有四种常用绑定事件,分别是:1、“on()”方法,被选元素及子元素上添加一个或多个事件处理程序;2、“bind()”方法,在选择到的元素上绑定特定事件类型的监听函数;3、“live()”方法,在版本 1.9 中被移除;4、“delegate()”方法,为指定的元素添加一个或多个事件处理程序,并运行指定函数。

jquery中有哪几种常用绑定事件

本教程操作系统:Windows10系统、jQuery3.6.0版本、Dell G3电脑。

jquery常用绑定事件有四种:

一、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");

});
登录后复制【感谢龙石为本站提供数据共享交换平台 http://www.longshidata.com/pages/exchange.html】