jQuery事件用法实例汇总_jquery
本文以实例形式详细汇总了jQuery中事件的用法，对jQuery的学习有很好的参考价值。分享给大家供大家参考之用。具体用法如下：
1.通过方法名给元素绑定事件：
$('li').click(function(event){})
2.通过bind方法给元素绑定事件：
$('li')
.bind('click',function(event){})
.bind('click',function(event){})
可见，通过bind，可以给元素绑定多个事件。
3.事件的命名空间
为什么需要事件命名空间？
→假设，先给li元素绑定2个click事件。
$('li')
.bind('click',function(event){})
.bind('click',function(event){})
→现在我们要把其中一个click事件注销掉，可能这样写：
$('li').unbind('click')
但这样，我们li所有的click事件都注销了，这不是我们想要的。使用事件命名空间可解决这一问题，之所以需要事件命名空间，是因为它为我们在注销事件的时候提供了方便。
如何使用事件命名空间？
→在为元素绑定事件的时候，在事件名称后加上命名空间，符合格式：事件名称.命名空间名称。
$('li')
.bind('click.editMode',function(event){})
.bind('click.displayMode',function(event){})
→在注销事件的时候，可以这样写：
$('li').unbind('click.editMode')
4.事件的种类
blur
change
click
dblclick
error
focus
focusin
focusout
keydown
keypress
keyup
load
mousedown
mouseenter
mouseleave
mousemove
mouseout
moseover
mouseup
ready
resize
scroll
select
submit
unload
5.one方法
用于创建一次性事件，一旦这个事件执行了一次后，就会被自动删除。
$("p").one("click",function(){
$(this).animate({fontSize: "+=6px"});
})
6.删除事件
//先给元素添加事件
$("p").click(function(){
$(this).slideToggle();
})
//再把元素的事件删除
$("button").click(function(){
$("p").unbind();
})
7.Event属性
实际上，它是jquery的全局属性，jQuery.Event。每当触发事件，Event对象实例就会被传递给Event Handler。
可以通过Event的构造函数来创建事件，并触发事件。
var e = jQueery.Event("click")
jQuery("body").trigger(e);
甚至可以通过构造函数，把一个匿名对象放在Event中传递。
var e = jQuery.Event("keydown", {keyCode : 64});
jQuery("body").trigger(e);
使用的时候，通过event.data.KeyCode来获取匿名对象的值。
可以通过jQuery.Event的构造函数把匿名对象放在Event中传递，不仅如此，通过事件也可以传递匿名对象。
$("p").click({param1 : "Hello", param2 : "World"}, someFunction);
function someFunction(event){
alert(event.data.param1);
alert(event.data.param2);
}
可见，通过event.data可以获取匿名对象的键。
通过Event对象实例，还可以拿到其它方面的信息，比如：
$("p").click(function(event){
alert(event.target.nodeName);
})
以上，通过event.target.nodeName获取触发事件的元素名称。
jQuery.Event的其它属性包括：
altKey 如果alt键按下就为true，在Mac键盘中alt键标记为Option
ctrKey ctrl键被按下
shiftKey Shift键被按下
currentTarget 冒泡阶段的当前元素
data
metaKey 一般Meta键是Ctrl，而Mac上是Command键
pageX 鼠标事件时光标相对于页面原点的水平坐标
pageY 鼠标事件时光标相对于页面原点的垂直坐标
relatedTarget 触发鼠标事件时光标离开或进入的元素
screenX 鼠标事件时光标相对于屏幕原点的水平坐标
screenY 鼠标事件时光标相对于屏幕原点的垂直坐标
result 从前面的事件处理器返回最近非undefined的值
target 触发事件的元素
timestamp jQuery.Event创建实例时的时间戳，以毫秒为单位
type 事件类型，比如click
which 如果是键盘事件，代表按键的数字，如果是鼠标事件，记录按下的是左键、中键或右键
8.Event方法
event.preventDefault()阻止默认行为
event.stopPropgation()停止"冒泡"，即停止沿着DOM向上进一步传播
event.stopImmediatePropagation()停止所有事件的进一步传播
event.isDefaultPrevented()
event.isPropgationStopped()
isImmediatePropgagationStopped()
9.live方法和on方法
该方法允许我们为还不存在的元素创建事件。与bind方法不同的是：能为所有匹配的元素绑定事件，设置是那些暂时还不存在、需要动态创建的元素。而且，live方法不一定要放在$(function(){})就绪处理器中。到了 jQuery 1.7以后，就改为on方法了。
$("p").on("click", function(){
alert("hello");
})如果想取消注册事件：
$("button").click(function(){
$("p").off("click");
})10.trigger方法
当我们想手动触发元素绑定的事件时可以使用trigger方法。
$("#foo").on("click",function(){
alert($(this).text());
})
$("#foo").trigger("click");
还可以在绑定事件的时候出传入形参，在trigger事件的时候传入实参。
$("#foo").on("custom", function(event, param1, param2){
alert(param1 + "\n" + param2)
})
$("#foo").trigger("custom",["Custom","Event"]);
trigger触发由jQuery.Event创建的实例：
var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);
甚至可以在trigger触发方法的时候传入匿名对象：
$("body").trigger({
type: "logged",
user: "foo",
pass: "bar"
});
如果想停止触发事件的传播，可通过jQuery.Event实例的stopPropgation()方法，或在任何事件中返回false。
11.triggerHandler方法
triggerHandler方法与trigger方法的不同之处在于：triggerHandler方法不会执行元素的默认事件，也不会"冒泡"。
//给一个元素绑定一个focus事件
$("input").focus(function(){
$("<span>Focused</span>").appendTo("#id").fadeOut(1000);
})
//用triggerHandler触发
$("#id").click(function(){
$("input").triggerHandler("focus");//不会触发focus的默认行为，即进入文本框
})
//用trigger触发
$("#id").click(function(){
$("input").trigger("focus");//同时触发foucs的默认行为和绑定行为
})
12.事件冒泡和事件委托
什么是事件冒泡？
有这么一段代码。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <div> <p><a href="#foo"><span>I am a Link!</span></a></p> <p><a href="#bar"><b><i>I am another Link!</i></b></a></p> </div> </body> </html>
现在，给该页面所有的元素绑定click事件，包括window和document。
$(function () {
$('*').add([document, window]).on('click', function(event) {
event.preventDefault();
console.log(this);
});
});
当单击页面任何元素，单击事件会从当前元素开始，向上一级元素传播，直到最顶级元素，这里是window。
如何阻止事件冒泡？
显然，通常只希望在某个特定元素发生特定的事件，不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。
$(function () {
$('a').on('click', function(event) {
event.preventDefault();
console.log($(this).attr('href'));
});
});
以上，只为a绑定了click事件，无它。
如何有效利用事件冒泡？
在jquery中，事件委托却很好地利用了事件冒泡。
<html> <body> <div id="container"> <ul id="list"> <li><a href="http://domain1.com">Item #1</a></li> <li><a href="/local/path/1">Item #2</a></li> <li><a href="/local/path/2">Item #3</a></li> <li><a href="http://domain4.com">Item #4</a></li> </ul> </div> </body> </html>
现在，我们想给现有li中的a标签绑定事件，这样写：
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
但是，如果又在现有的ul中添加新的li和a，那情况又如何呢？
$( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );
结果，点击新添加的li中的a，什么都没有发生。那么，如何为动态添加的元素绑定事件呢？
如果我们能把事件绑定到a的父级元素，那在父级元素内生成的子级动态元素，也会有绑定事件的行为。
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
以上，我们把click事件绑定到a的父级元素id为list的ul上，on方法中的第二个参数，这里是a，是事件真正的执行者。具体过程如下：
→点击某个a标签
→根据事件冒泡，触发了a的父级元素ul的click事件
→而事件真正的执行者是a
事件委托允许我们把事件绑定到父级元素，这相当于给所有的子级元素绑定了事件，不管这个子级元素是静态的、还是动态添加的。
13.toggle方法
允许我们依次执行多个事件，当执行完最后一个事件后，再执行第一个事件。
$('img[src*=small]').toggle({
function(){},
function(){},
function(){}
});
14.mouseenter和mouseleave方法
$(element).mouseenter(function(){}).mouseleave(function(){})
15.hover方法
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
jQuery中如何使用PUT请求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u
jQuery如何移除元素的height属性？
Feb 28, 2024 am 08:39 AM
jQuery如何移除元素的height属性？在前端开发中，经常会遇到需要操作元素的高度属性的需求。有时候，我们可能需要动态改变元素的高度，而有时候又需要移除元素的高度属性。本文将介绍如何使用jQuery来移除元素的高度属性，并提供具体的代码示例。在使用jQuery操作高度属性之前，我们首先需要了解CSS中的height属性。height属性用于设置元素的高度
MySQL ISNULL 函数详解及用法介绍
Mar 01, 2024 pm 05:24 PM
MySQL中的ISNULL()函数是用于判断指定表达式或列是否为NULL的函数。它返回一个布尔值，如果表达式为NULL则返回1，否则返回0。ISNULL()函数可以在SELECT语句中使用，也可以在WHERE子句中进行条件判断。1.ISNULL()函数的基本语法：ISNULL(expression)其中，expression是要判断是否为NULL的表达式或
jQuery小技巧：快速修改页面所有a标签的文本
Feb 28, 2024 pm 09:06 PM
标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：<
使用jQuery修改所有a标签的文本内容
Feb 28, 2024 pm 05:42 PM
标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：
了解jQuery中eq的作用及应用场景
Feb 28, 2024 pm 01:15 PM
jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s
如何判断jQuery元素是否具有特定属性？
Feb 29, 2024 am 09:03 AM
如何判断jQuery元素是否具有特定属性？在使用jQuery操作DOM元素时，经常会遇到需要判断元素是否具有某个特定属性的情况。这种情况下，我们可以借助jQuery提供的方法来轻松实现这一功能。下面将介绍两种常用的方法来判断一个jQuery元素是否具有特定属性，并附上具体的代码示例。方法一：使用attr()方法和typeof操作符//判断元素是否具有特定属
PHP中POST请求的正确用法
Mar 27, 2024 pm 03:15 PM
PHP中POST请求的使用是在网站开发中常见的操作，通过POST请求可以向服务器发送数据，例如表单数据、用户信息等。正确使用POST请求可以确保数据安全性和准确性，下面将介绍PHP中POST请求的正确用法，并提供具体的代码示例。1.PHP中POST请求的基本原理在PHP中，通过使用$_POST全局变量可以获取通过POST方法提交的数据。POST方法将表单数
