jQuery中的事件——《锋利的JQuery》
虽然利用原生的JavaScript事件能完成一些交互,但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力。
1、加载DOM
在JavaScript中,通常用window.onload方法,而在jQuery中,使用的是$(document).ready()方法。下面来看看这两种方法的不同之处:
1.1 执行时机
window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行。而通过jQuery的$(document).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用。jQuery中提供了一个与window.onload相同的方法——load()方法。
$(window).load(function(){ //编写代码 }) 等价于 window.onload = function() { //编写代码 } .
1.2 多次使用
window.onload方法只能使用一次,再次使用将会被重写。而$(document).ready().可以被多次使用.
1.3 简写方式
/* 第一种 */
$(document).ready(function() {
//编写代码
}) /* 第一种 */
$().ready(function() {
//编写代码
}) /* 第三种 */
$(function() {
//编写代码
})
2、事件绑定
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:如需移除事件处理程序,请使用off()方法。
提示:如需添加只运行一次的事件然后移除,请使用 one()方法。
语法:
参数 | 描述 |
---|---|
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。 |
childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 |
data | 可选。规定传递到函数的额外数据。 |
function | 可选。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
简写绑定事件:像click、mouseover、mouseout这类常用事件,jQuery为此提供了一套简写方法。
$("#id").mouseover(function() {
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
});
3、合成事件
jQuery有两个合成事件——hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()方法和toggle方法都属于jQuery自定义方法。
3.1 hover()方法
语法结构: hover(enter, leave);
$(function(){
$("#id").hover(functioin(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});
3.2 toggle()方法
语法结构: toggle(fn1,fn2,...fnN);
toggle()方法在jQuery中还有另外一个作用:切换元素的可见状态。如果可见,单击会隐藏;反之亦然。
$(function(){
$("#id").toggle(function(){
$(this).next().show(); //$(this).next().toggle();
},function(){
$(this).next().hide(); //$(this).next().toggle();
})
})
4、事件冒泡
4.1 事件对象
由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件对象变得比较困难。针对这个问题,jQuery进行了封装,从而使得任何浏览器都能轻松地获取事件对象以及事件的一些属性。
4.2 停止事件冒泡
$("#content").on("click",function(event){ // event: 事件对象
var txt = $('#msg').html() + "<p>外层div元素被单击。</p>";
$('#msg').html(txt);
event.stopPropagation(); // 停止事件冒泡
});
4.3 阻止默认行为
网页中的元素有自己的默认行为,例如,单击超链接会跳转、单击“提交”按钮后表单会提交,有时需要阻止元素的默认行为。
$("#submit").on("click",function(event){
var username = $("#username").val(); // 获取元素的值
if(username == ""){ //提示信息
$("#msg").html("<p>文本框不能为空</p>"); //提示信息
event.preventDefault(); // 阻止默认行为(表单提交)
}
});
附:并非所有主浏览器都支持事件捕获,并且这个缺陷无法通过JavaScript弥补。jQuery不支持事件捕获,如需要,请直接使用原生JavaScript。
5、事件对象的属性
5.1 event.type
$("a").click(function(event){
alert(event.type); //获取事件类型
return false; // 阻止链接跳转
});
5.2 event.preventDefault()方法:阻止默认行为
5.3 event.stopPropagation()方法:阻止事件的冒泡
5.4 event.target:获取触发事件的元素
5.5 event.relatedTarget:在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素用event.relatedTarget来访问。event.relatedTarget在mouseover中相当于IE的event.fromElement,在mouseout中相当于IE的event.toElement,jQuery对其进行了封装,使之能兼容任何浏览器。
5.6 event.pageX和event.pageY:相对于页面文档的坐标
5.7 event.which:该方法作用是鼠标点击事件中获取鼠标的左、中、右键,返回数值。
5.8 event.metaKey:jQuery也封装event.metaKey属性,返回布尔值。
6、移除事件
在绑定事件的过程中,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件:
/* 依次弹出 */
$("p").on("click",function(){
alert(1);
}).on("click",function(){
alert(2);
}).on("click",function(){
alert(3);
});
移除按钮元素上以前注册的事件 —— off()方法
off() 方法通常用于移除通过on()方法添加的事件处理程序。
自 jQuery 版本 1.7 起,off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。
提示:如需添加只运行一次的事件然后移除,请使用 one()方法。
语法:
参数 | 描述 |
---|---|
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值。必须是有效的事件。 |
selector | 可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。 |
function(eventObj) | 可选。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
7、模拟事件
7.1 常用模拟
$("#btn").trigger("click"); //页面加载完毕后,立即执行点击事件 $("#btn").click(); //和上面效果一样
7.2 触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称事件。
$('#btn').on("myClick",function(){ //定义一个自定义事件
alert("自定义事件执行");
}); $('#btn').trigger("myClick"); // 触发自定义事件
7.3 传递数据
trigger(type,[data])方法有俩个参数,第一个参数是要触发的事件类型,第二个是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调数来区别这次事件是代码触发还是用户触发。
$('#btn').on("myClick",fucntion(event,message1,message2){ //获取数据
$('#test').append("<p>"+message1+message2+"</p>");
}); $('#btn').trigger("myClick",["我的自定义","事件"]); //传递俩个数据
7.4 执行默认操作
trigger()和triggerHandler()方法都可以触发事件程序执行,但后者不会执行浏览器默认操作。比如:
/* 仅触发获取焦点事件程序,input不会获取焦点 */
$('input').triggerHandler("focus");
8、其他用法
8.1 绑定多个事件类型:为一个元素一次性绑定多个事件类型
/* 为一个元素一次性绑定多个事件类型 */
$('div').on("mouseover mouseout",function(){
$(this).toggleClass("over");
}); /* 和下面的相同 */
$('div').on("mouseover",function(){
$(this).toggleClass("over");
}).on("mouseout",function(){
$(this).toggleClass("over");
});
8.2 添加事件命名空间,便于管理:为元素绑定的多个事件类型用命名空间规范起来。
$('div').on("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$('div').on("mouseover.plugin",function(){
$("body").append("<p>mouseover事件</p>");
});
$('div').on("dblclick.plugin",function(){
$("body").append("<p>dblclick事件</p>");
});
$('button').click(function(){
$("div").off(".plugin"); //前面添加的事件都会被删除
});
8.3 相同事件名称,不同命名空间执行方法:为元素绑定相同的事件类型,然后以命名空间的不同按需调用。
$('div').on("click",function(){
$('body').append("<p>click事件</p>");
});
$('div').on("click.plugin",function(){
$('body').append("<p>click.plugin事件</p>");
});
$('button').click(functiion(){
$('div').trigger("click!"); //注意click后面的感叹号
});
/* 当点击<div>,会触发click事件和click.plugin事件。如果只点击<button>,则只触发click事件。注意:trigger("click")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。 */
事件部分到此结束,下期更新jQuery中的动画!
jQuery中的事件——《锋利的JQuery》的更多相关文章
- jQuery中的事件绑定方法
在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:详解jQuery中的事件(一)
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...
- jQuery学习笔记(三)jQuery中的事件
目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一.加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
- jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
随机推荐
- .Net Core 项目引用本地类库方式(一)
最近了解到.NET Core 项目,引用本地类库DLL的方式有三种 1.非同解决方案下的引用,直接引用,浏览,找到对应的DLL,然后确定引用. 这种方式有个不好的地方就是,如果引用的DLL文件里面,也 ...
- 汇编工具安装一:MASM32的安装!
MASM32是一款汇编开发工具,网址:http://www.masm32.com/ ,它是集合了很多开发汇编程序的工具,windows下汇编程序的开发,很多人都在使用它. 直接下载:http://we ...
- Kylin -- Dup key found 问题
kylin 构建 cube 时,抛出了如下的错误: org.apache.kylin.engine.mr.exception.HadoopShellException: java.lang.Runti ...
- model中的Meta类
通过一个内嵌类 "class Meta" 给你的 model 定义元数据, 类似下面这样: class Foo(models.Model): bar = models.CharFi ...
- SHELL编程之条件测试
条件测试 (一)概念:对特定的条件进行判断,以决定如何执行操作,当条件成立时,测试语句的返回值为0,否则为其他数值,意思就是如果 echo $? 的值是0,那么条件成立.条件测试的分类:文件测试.整数 ...
- Android Studio for windows环境搭建
Android Studio环境搭建 个人博客 欢迎大家多多关注该独立博客: csdn博客 一直想把自己的经验分享出来,记得上次写博客还是ok6410的笔记,感觉时代久远啊.记得那个时候我还一心 ...
- Python操作hdfs
Python直接操作hdfs,包括追加数据文件到hdfs文件 #!coding:utf-8 import sys from hdfs.client import Client #设置utf-8模式 r ...
- 学习markdown语法,易读易写,放2个教程地址
http://wowubuntu.com/markdown/basic.html http://wowubuntu.com/markdown/basic.html
- ES6,CommonJS 区别
Javascript,javascript是一种脚本编程语言,有自己独立的语法与语义,没有javascript,也就没有其他的那些概念了. 关于ES6,可直接理解为javascript的增强版(增加了 ...
- R语言学习笔记(三)
5. 数据结构 5.1 数据结构简介 (1)向量 一个向量的所有元素必须有相同的类型(模式) (2)列表 列表可以非同质的 列表可按位置索引:lst[[2]] 抽取子列表:lst[c(2,5)] 列表 ...