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://6mz.cn/article/ieesic.html