jQuery事件用法实例汇总

本文以实例形式详细汇总了jQuery中事件的用法,对jQuery的学习有很好的参考价值。分享给大家供大家参考之用。具体用法如下:

1.通过方法名给元素绑定事件:

2.通过bind方法给元素绑定事件:

可见,通过bind,可以给元素绑定多个事件。

3.事件的命名空间

为什么需要事件命名空间?

→假设,先给li元素绑定2个click事件。

→现在我们要把其中一个click事件注销掉,可能这样写:

但这样,我们li所有的click事件都注销了,这不是我们想要的。使用事件命名空间可解决这一问题,之所以需要事件命名空间,是因为它为我们在注销事件的时候提供了方便。

如何使用事件命名空间? →在为元素绑定事件的时候,在事件名称后加上命名空间,符合格式:事件名称.命名空间名称。

→在注销事件的时候,可以这样写:

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方法

用于创建一次性事件,一旦这个事件执行了一次后,就会被自动删除。

6.删除事件

7.Event属性

实际上,它是jquery的全局属性,jQuery.Event。每当触发事件,Event对象实例就会被传递给Event Handler。

可以通过Event的构造函数来创建事件,并触发事件。

甚至可以通过构造函数,把一个匿名对象放在Event中传递。

使用的时候,通过event.data.KeyCode来获取匿名对象的值。

可以通过jQuery.Event的构造函数把匿名对象放在Event中传递,不仅如此,通过事件也可以传递匿名对象。

可见,通过event.data可以获取匿名对象的键。

通过Event对象实例,还可以拿到其它方面的信息,比如:

以上,通过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方法了。

如果想取消注册事件:

10.trigger方法

当我们想手动触发元素绑定的事件时可以使用trigger方法。

还可以在绑定事件的时候出传入形参,在trigger事件的时候传入实参。

trigger触发由jQuery.Event创建的实例:

甚至可以在trigger触发方法的时候传入匿名对象:

如果想停止触发事件的传播,可通过jQuery.Event实例的stopPropgation()方法,或在任何事件中返回false。

11.triggerHandler方法

triggerHandler方法与trigger方法的不同之处在于:triggerHandler方法不会执行元素的默认事件,也不会"冒泡"。

Focused").appendTo("#id").fadeOut(1000); }) //用triggerHandler触发 $("#id").click(function(){ $("input").triggerHandler("focus");//不会触发focus的默认行为,即进入文本框 }) //用trigger触发 $("#id").click(function(){ $("input").trigger("focus");//同时触发foucs的默认行为和绑定行为 })

12.事件冒泡和事件委托

什么是事件冒泡?

有这么一段代码。

现在,给该页面所有的元素绑定click事件,包括window和document。

当单击页面任何元素,单击事件会从当前元素开始,向上一级元素传播,直到最顶级元素,这里是window。

如何阻止事件冒泡?

显然,通常只希望在某个特定元素发生特定的事件,不希望事件冒泡的发生。这时候我们可以针对某个特定元素绑定事件。

以上,只为a绑定了click事件,无它。

如何有效利用事件冒泡?

在jquery中,事件委托却很好地利用了事件冒泡。

现在,我们想给现有li中的a标签绑定事件,这样写:

但是,如果又在现有的ul中添加新的li和a,那情况又如何呢?

Item #5" );

结果,点击新添加的li中的a,什么都没有发生。那么,如何为动态添加的元素绑定事件呢?

如果我们能把事件绑定到a的父级元素,那在父级元素内生成的子级动态元素,也会有绑定事件的行为。

以上,我们把click事件绑定到a的父级元素id为list的ul上,on方法中的第二个参数,这里是a,是事件真正的执行者。具体过程如下: →点击某个a标签 →根据事件冒泡,触发了a的父级元素ul的click事件 →而事件真正的执行者是a

事件委托允许我们把事件绑定到父级元素,这相当于给所有的子级元素绑定了事件,不管这个子级元素是静态的、还是动态添加的。

13.toggle方法

允许我们依次执行多个事件,当执行完最后一个事件后,再执行第一个事件。

14.mouseenter和mouseleave方法

15.hover方法

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


1.第一步 设置响应头 header('Access-Control-Allow-Origin:*'); //支持全域名访问,不安全,部署后需要固定限制为客户端网址 header('Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值,array是被查找的数组。 有如下实例: <!DOCTYPE html> &l
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提
JS 将form表单数据快速转化为object对象(json对象) jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏: 前端 文章标签: javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别:$().click()和$(document).on('click','要选择的元素',function(){})的不同 文章地址:https://www.cnblogs.com/sqh17/p/7746418.html 解决:动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实
layui标签或一般标签均可<div class="layui-form-item"> <label class="layui-form-label">异地仓名称</label> <div class="la
网上对于select option 动态添加修改如下, $("#selectId").append("<option value='"+value+"'>"+text+"</option>&
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意:$.extend是为jQuery类添加添加类方法,用$.调用(类似$.ajax),$.fn.extend则是为jQuery对象添加方法(实例方法),用DOM元素
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: 复制代码 $(function(){ var a=["1aa",&q
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 事件委托,
JQuery-$.when().done().fail()的使用 原文引用于 Echoo华地于 2022-01-06 14:07:10 发布 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1
jQuery tableExport导出 excel 上篇写的是jQuery 导出word,就试试导出excel。看见网上写的很乱,我这就把我写的整理下来,有部分来自网上capy 1. js文件的引用 <script type="text/javascript"
jQuery的遍历-prev()和next()方法 <div class="box" id="box"> <a href='#' class="a"> <input type="tex
attr()和addClass()的区别 方法 addClass() attr()用途	追加样式	设置样式对同一个网页元素操作	<p>test</p>第1次使用方法	$("p").addClass("high");	$("p&
前端——函数(匿名函数、自执行函数) FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明:function box(){} 函数表达式:var box = function(){}; 匿名函数:function(){} (属于函数表达式) 1声明了一个函数: var
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签: javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 <style>
JavaScript函数详解:匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义: 调用: 方式1:方法名(); 可以多次调用 方式2:在事件中调用,直接写函数名,不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况: 1.匿名函数自执行:声明后不需要
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间:2009年09月03日 02:10:54 作者: 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery