jQuery——事件处理
1、事件流模型
如果单击一次在HTML页面上的某个按钮,不仅会触发按钮的单击事件,还将触发按钮所属容器(div、span)等的单击事件,同时还将触发父级容器的单击事件,直至body、html和document,这一动作造成一脸串的事件触发,形成一个事件流。因为事件流模型不同,总体可以分为冒泡型事件流和捕获型事件流两种。
1)冒泡型事件流:冒泡型事件流将从下到上一级一级的触发事件流。
2)捕获型事件流:捕获型事件流将从上到下一级一级的触发事件流。
一般使用的是冒泡型事件流。
2、js事件种类
1)鼠标事件: ondbclick(双击)、 onmouseout(光标离开某对象范围)
2)键盘事件
onkeydown:当键盘上的某个键被按下时触发此事件。
onkeypress: 当键盘上的某个键被按下以后触发此事件。
onkeyup:当键盘上的某个按键被释放时触发此事件 。
3)页面事件
onerror:出现错误时触发此事件
onload:页面内容完成时触发此事件
onresize:当浏览器的窗口大小被改变时触发此事件
onscroll:浏览器的滚动条位置发生变化时触发
onunload:当前页面被改变时触发
4)表单事件
onblur:当前元素失去焦点时触发
onchange:当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus:当某个元素获得焦点时触发
onsubmit:当某个表单被提交时触发此事件
3、jQuery事件
jQuery提供了一个DOM加载完成的事件,即ready事件,ready事件是一个可以在DOM加载完成后执行的事件,该事件可以绑定多个响应函数,这个事件
是window.onload一样,ready事件是在所有DOM标记就绪时就被触发,而不一定与之关联的其他资源文件也能就绪。
/* document 对象加载成功 */
$(document).ready(function(){
alert('document load');
});
/* window 加载成功 */
$(window).ready(function(){
alert('window load');
});
/* ID为show的DIV加载成功 */
$("#show").ready(function(){
//...
});
/* html 标签加载成功 */
$("html").ready(function(){
//...
});
//...对于任何dom都可以使用这个方法,当该节点加载成功执行方法。
1)表单事件
a、focus: 控件获得焦点时触发
blur: 控件失去焦点时触发
$("input").focus(function(){
/* 获得焦点 */
})
.blur(function(){
/* 失去焦点 */
});
b、change: 控件值改变时触发
$("input[name=username]").change(function(){
/* 值改变时触发 */
alert("用户名文本框内容已改变。");
});
c、select: 空间内容被选中时触发
d、submit: 表单提交时触发
e、focusin: 当前元素或其子元素获得焦点时触发
focusout: 当前元素或其子元素失去焦点时触发
2)其他事件
load:当该元素加载就绪后触发
upload: 当该元素卸载后触发
error:当该元素发生错误时触发
resize:当浏览器改变大小时触发
scroll:当浏览器滚动条位置改变时触发
3、JQuery事件处理
1)事件绑订 event / e1.html
bind(type,[data],fn)
type:事件类型
data:可省略,{参数:值,...}
fn:事件处理函数
bind(map)
一次绑定多个事件map是键值对{click:function1,...}也可以直接写匿名方法。
2)绑订方式的简写形式
click(function(){});
3)合成事件 event/e2.html e3.html
hover(enter,leave) : 模拟光标悬停事件,即mouseover事件和mouseout事件
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
toggle(fn1,fn2...):模拟鼠标连续单击事件
live(type, fn): 该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序
4)删除事件
unbind([type], data):删除匹配对象的事件处理程序,对应bind方法,它可以删除所有以bind方式绑定的自定义事件处理程序
$("#b").unbind("click");
die([type][,fn]):die方法与live方法对应,用于解除用live注册的自定义事件 ,type用于指定要删除的事件类型,fn用于指定要删除的事件处理程序的名称。
4、jQuery事件对象的属性与方法
属性:
type:获得该事件对象的事件类型,如click、focus、mouseover等
target:获得事件触发者(DOM对象)
data:获得调用事件时传入的额外参数集合
relatedTarget:获得触发鼠标事件的DOM元素
currentTarget:获得当前DOM元素(等同于this关键字)
pageX/pageY:获得鼠标事件中,鼠标光标相对于页面左上角的位置
result:获得上一个事件处理函数返回的值
timeStamp:获得事件发生的事件戳
方法:
preventDefault():阻止默认的事件行为
isDefaultPrevent():是否执行过preventDefault()方法
stopPropagation():停止事件冒泡
isPropagationStopped():是否调用了stopPropagation()方法
stopImmediatePropagation():中止处理该事件,该方法将停止该事件的其他事件处理程序,并且停止事件冒泡
isImmediatePropagationStopped():是否调用了stopImmediatePropagation()方法
例:
$(function(){
$('#a1').click(function(e){
alert("你点击了一个链接");
//停止冒泡
e.stopPropagation();
});
$('#a2').click(function(e){
var flag = confirm('确定删除吗');
if(!flag){
e.preventDefault();
}
});
});
4、事件冒泡 event/ e4.html
a,什么是事件冒泡?
子节点产生的事件会依次向上抛给相应的父节点。
b,如何取消事件冒泡?
event.cancelBubble = true;
c, 如何获得事件对象?
只需要给事件处理函数添加event作为参数,比如
d, 事件对象的作用?
作用1: 找到事件源
event.target; firefox,chrome支持
event.srcElement; ie支持
event.target || event.srcElement
作用2: 获得鼠标点击的坐标
event.clientX;
event.clientY;
(1)获得事件对象 event / e5.html
只需要给事件处理函数传一个参数。
click(function(event){});
(2)事件对象的作用
a,获得事件源
event.target;
b,获得鼠标点击的坐标
event.pageX
event.pageY
c,事件类型
event.type
(3)停止冒泡 event / e6.html
event.stopPropagation()
(4) 停止默认行为
event.preventDefault()
5)模拟操作 event / e7.html
trigger('click')
//$('#username').trigger('focus');
//也可以简化成
$('#username').focus();
公司主营业务:成都做网站、成都网站制作、成都外贸网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出垣曲免费做网站回馈大家。
网站栏目:jQuery——事件处理
网页路径:http://scyanting.com/article/ieesic.html