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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
12306验证码破解思路分享
Mar 25 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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
mac下安装nginx和php
2013/11/04 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php制作文本式留言板
2015/03/18 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
推荐11个实用Python库
2015/01/23 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Django 自定义分页器的实现代码
2019/11/24 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
最新pycharm安装教程
2020/11/18 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
复古服装:RetroStage
2019/05/10 全球购物
SQL面试题
2013/04/30 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
领导检查欢迎词
2014/01/14 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
房屋公证委托书
2014/04/03 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
学习心得体会
2019/06/20 职场文书
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers
JavaScript前端面试组合函数
2022/06/21 Javascript