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 相关文章推荐
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
php中switch语句用法详解
2015/08/17 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JS继承 笔记
2011/07/13 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python如何生成网页验证码
2018/07/28 Python
详解python中*号的用法
2019/10/21 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
大码女装:Ulla Popken
2019/08/06 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
行政专员岗位职责
2014/01/02 职场文书
珠宝店促销方案
2014/03/21 职场文书
秘书英文求职信
2014/04/16 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python