Jquery基础之事件操作详解


Posted in Javascript onJune 14, 2016

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。常见的元素点击事件、鼠标事件、键盘输入事件等,较传Javascript

相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力。

一、DOM加载事件

页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表

展示两个事件的异同。

window.onload方法 $(document).ready()方法
执行时机 必须等待所有内容加载完成后才能执行 页面的DOM元素绘制完成后可以执行不必等待全部内容加载完成。
绑定函数个数 该方法能够绑定一个函数,如果绑定多个只能执行最后的一个绑定。例: window.onload=function(){alert("1");} window.onload=function(){alert("2");} 执行结果只执行最后绑定的函数结果是打印:2. 能够注册多个函数,按绑定顺序执行绑定函数。例: $(document).ready(funtction(){alert("1");}); $().ready(function(){alert("2");}); 执行结果是顺序执行绑定的函数:先打印1.然后再打印2.
简化写法 $().ready();$.ready()

二、事件处理

当文件加载完成后就可以为元素添加事件处理,进而事件执行某些动作完成相关操作。jquery中有多种事件处理方法,主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法为匹配的元素进行特定的事件绑定。bind()方法格式如下:

bind(type,[ data],fun);

bind()方法有三个参数,各个参数说明如下:

第一个参数是事件类型,主要如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定义名称,Jquery中的事件绑定类型比javascript少了"on",因此jquery中事件click对应javascript中的onclick函数。

第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定的处理函数。

为按钮绑定单击事件示例:

<input type="button" id="btn1" value="单击">

$("#btn1").bind("click",function(){alert("单击事件绑定");});

bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样,区别在于one()方法绑定的事件只能执行一次。

为按钮绑定一次性事件示例:

<input type="button" id="btn1" value="单击">

$("#btn1").one("click",function(){alert("单击事件绑定");});

unbind()方法为元素取消事件绑定,unbind()方法的格式如下:

$(selctor).unbind([type],[data])

unbind()方法是元素bind()方法的反向操作,从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型,第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。

示例:

<input type="button" id="btn1" value="click" />

<input type="button" id="btn2" value="removeBind" />

$("#btn1").bind("click", fun1 = function () { alert("事件1"); });

$("#btn1").bind("click", fun2 = function () { alert("事件2"); });

$("#btn2").bind("click", function () {
$("#btn1").unbind("click", fun2);
});

该示例使用unbind()方法的二个参数形式移除第二次绑定的事件处理函数。

live()方法为元素动态绑定事件,使用该方法绑定事件后,新加对应元素也能触发相应事件。live()方法格式如下:

$(selector).live([type],[data],fun);

live动态绑定示例:

$("p").live("click",function(){$(this).hide();});

该示例为所有的p元素节点动态添加了click事件,无论是现有的p元素节点还是以后要添加的p元素节点都有会中点单击时候触发hide()从而隐藏自己。die()方法是live()方法的反向操作,结果live()方法动态绑定的事件和unbind()方法一样。使用die()方法取法动态绑定后,所有动态绑定的事件将删除。

trigger()方法在匹配的元素上触发参数中的事件,该方法会触发浏览器默认事件,返回false阻止浏览器默认事件。trigger()方法格式如下:

$(selector).trigger([type],[data]);

trigger()方法示例:

$("form:first").trigger("submit");

该示例触发第一个from表单的submit操作。

triggerHandler()方法这个方法会触发绑定事件,但是不会触发浏览器默认事件。与trigger()方法触发后返回false效果一样。使用方法和trigger一样。

三、事件

事件处理中已经列出了主要的事件类型如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。各个事件类型主要是两种用法绑定事件、触发事件。以click事件为例,click方法格式如下:绑定事件$(selector).click(functiron(){//函数体}),触发事件$(selector).click()。例:

<input type="button" id="btn1" value="绑定事件"/>

<input type="button" id="btn2" value="触发事件"/>

$("#btn1").click(function(){alert("事件绑定");});

$("#btn2").click(function(){$("#btn1").click();})

该示例为第一个按钮btn1绑定事件,为按钮btn2绑定事件同时在绑定事件中触发第一个按钮的绑定事件。其余事件类型和click类似。

四、合成事件

合成事件也可以称为交互事件是JQuery自定义的方法,方法有两个hover()和toggle()。

hover()方法模仿鼠标悬停事件,方法格式如下:hover(enter,leave)。例:

$("ul li").hover(function(){alert("Enter");},functiron(){alert("leave");});

该示例为ul的li元素绑定悬停事件,当鼠标停上ul的子元素li上时候会触发enter()函数,打印“Enter”,当鼠标移出li元素时候会打印"leave"。

toggle()方法切换操作循环执行绑定的函数,方法格式如下:toggle(fun1,fun2,...,funN);例:

<input type="button" id="btn1" value="触发切换操作"/>

$("#btn1").toggle(function(){alert("开始");},function(){alert("继续");},function(){alert("结束");});

该示例为按钮btn1绑定切换事件每次单击都会顺序触发绑定事件中的一个。该示例第一次点击打印"开始",第二次点击打印"继续",第三次点击打印"结束",再次点击和第一次一样打印"开始",循环顺序执行函数。

五、事件属性

Jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能正常运行。各个事件属性的如下:

事件类型event.type.该属性用于获得触发该事件的类型,对不引发事件的不同操作返回不同的结果;例:

$("p").click(function(event){alert(event.type);});

该示例返回元素p单击事件的事件类型,结果打印是 "click";

事件类型event.target该属性用于获得触发事件的元素;例:

$("a").click(function(event){alert(event.target.href);});

该示例返回元素a的href属性。

事件默认行为event.preventDefault;该属性用于阻止事件的默认属性,例:

$("a").click(function(event){event.preventDefault;});

使用该属性阻止元素a的默认的跳转行为,结果和return false一样。

事件冒泡event.stropPropagation属性用于阻止事件冒泡,例:

$("div").click(function(event){alert("里层点击");event.stopPropagation;});

该示例中使用stopPropagation属性阻止div的父元素的click事件被触发。

event.pageX和event.pageY属性,使用这两个属性可以获得鼠标的相对于页面的当前位置。例:

$("p").click(function(event){alert("current mouse location "+event.pageX+" "+event.pageY);});

该示例当点击元素p的时候获得鼠标的当前位置,并打印出来。

event.witch属性,使用这个属性可以获得鼠标单击时候鼠标的左中右键,在键盘事件中获得键值。

$("p").mousedown(function(event){alert(event.witch);});

该示例当鼠标按下时候打印鼠标键值。左中右健分别对应值是1、2、3。

event.metaKey属性用于在事件获得键盘的ctrl键,例:

$("body").keydown(function(event){if(event.metaKey){alert("ctrl");}else{alert("no ctrl");}});

该示例当在页面中按下键盘时候如果按键为ctrl键就打印ctrl,否则打印"no ctrl".

六、事件冒泡

页面中有多个绑定事件因此可能出现多个元素响应同一个事件,由此引发了事件不是我们预期的,这种现象就是事件冒泡,要处理这个问题可以对事件的作用范围进行限制,Jquery中使得stopPropagation()方法停止事件的冒泡。事件冒泡示例:

<body><div><span>事件冒泡</span>div内容</div>body内容</body>

$("body").click(function(){alert("body");});

$("body div").click(function(){alert("div");});

$("span").click(function(){alert("span");});

在该示例中当点击span时候会触发三个打印事件 "span" "div" "body",如何阻止事件冒泡?可以使用Jquery事件中的stropPropagation()方法来停止事件冒泡。上面示例改成这样:

$("body").click(function(event){alert("body");event.stopPropagation();});

$("body div").click(function(event){alert("div");event.stopPropagation();});

$("span").click(function(event){alert("span");event.stopPropagation();});

这样当点击不同元素时候就不会发生冒泡事件。

七、事件命名空间

事件添加命名空间便于事件的管理:删除事件和触发事件。例:

<div>元素绑定多个事件</div>

$("div").bind("click.plugin",function(){alert("click.plugin");});

$("div").bind("click",function(){alert("click");});

$("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");});

$("div").bind("dbclick",function(){alert("dbclick");});

由于使用了命名空间可以删除指定命名空间中的事件,如移除所有plugin命名空间下的事件函数方法如下:$("button").click(function(){$("div").unbind(".plugin");});这样就移除了所有命名空间是plugin的事件函数。div中只剩下click和dbclick绑定事件。

使用命名空间对触发特定的事件了带来了方便,如为div绑定了两个click事件,一个是带命名空间的一个是不带命名空间。如果想要触发不包含在命名空间中的事件可以使用trigger("click!")方法,!感叹号的作用是匹配所有不包含在命名空间中的click方法。

以上这篇Jquery基础之事件操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
通过js给网页加上水印背景实例
Jun 17 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 #Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 #Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 #Javascript
返回函数的JavaScript函数
Jun 14 #Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 #Javascript
Web程序员必备的7个JavaScript函数
Jun 14 #Javascript
Javascript中的迭代、归并方法详解
Jun 14 #Javascript
You might like
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
javascript 写类方式之一
2009/07/05 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
domReady的实现案例
2016/11/23 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
实现vuex原理的示例
2020/10/21 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python监控nginx端口和进程状态
2019/09/06 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2014年国庆节庆祝建国65周年比赛演讲稿
2014/09/21 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
公司表扬信格式
2015/05/04 职场文书
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python