1.jQuery中的事件
传统的js事件是以on+事件名开头的，如onClick();onChange()等，
Jquery则是直接以事件名开头，如click();change()等；jquery中的事件尽可能的往兼容浏览器做努力，推荐使用Jquery中的事件
1.1加载 DOM（入口函数）
一个 DOM 事件可以分为捕获过程、触发过程、冒泡过程。 DOM 事件流为 DOM 事件的处理及执行的过程。
1.2绑定事件
bind(type,[data],fn)函数
one(type[ ,data], fn)：jQuery提供的one()方法，可以为元素绑定处理函数，当函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。
- 第一个参数type表示事件类型：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等
- 第二个为可选参数，为做 event.data 属性传递给事件对象的额外数据
- 第三个参数fn是用来绑定的处理函数
例：
$(function(){
$("#body h5.head").bind("click",function(){
$(this).next().show(); //获取$(this).next()元素
})
});
注意：
事件简写：$(variable).bind(type [, data], fn) 简写为 $(variable).type(fn)
1.3合成事件
(1)hover(fn, fn)方法-是 mouseover(fn) 和 mouseout(fn) 的合成
:hover() 用于模拟光标悬停事件，hover(enter,leave)，当光标移动到元素上时会触发第一个函数enter，当光标移除元素时触发第二个函数enter。例子如下：
//以下的hover函数写法其实等价于鼠标获取焦点和取消焦点事件
$(function(){
$("#panel h5.head").hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
});
//如果想把这种效果改成鼠标点击展现的话把mouseover和mouseout事件换成click就OK了。
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next("div.content").show();
});
$("#panel h5.head").bind("mouseout",function(){
$(this).next("div.content").hide();
});
});
(2)toggle(fn1, fn2, ...)
- ：toggle() 用于模拟鼠标连续单击事件。toggle(f1,f2,.....)，第一次单击时触发第一个函数f1，第二次单击时触发第二个函数f2以此类推直到最后一个。随后的每次单击事件循环这一过程。
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div.content").hide();
});
});
- 用于切换元素的可见状态(上面例子相当于）
$(function(){
$("#panel h5.head").toggle(function(){
$(this).next("div.content").toggle();
},function(){
$(this).next("div.content").toggle();
});
});
1.4 事件冒泡
冒泡事件就是点击子节点，会向上触发父节点、祖先节点的点击事件，造成了事件的多层并发。除了可能是包含、嵌套关系还有其它很多事件，比如鼠标的mouseover等等也都会触发冒泡事件。
(1)事件冒泡是指事件会按照 DOM 的层次结构像水泡一样不断向上直至顶端
(2)事件冒泡可能会引起预料之外的效果，可以使用
阻止事件冒泡:两种方式
- event.stopPropagation()-停止事件冒泡，不会阻止默认行为
ent.preventDefault()-阻止默认行为，如比如链接的跳转。 - return false-停止事件冒泡或者阻止默认行为
例：
下面是html代码部分：
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
对应的jQuery代码如下：
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息
$('#msg').html(txt);// 设置html信息
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
//当点击span时，会触发div与body 的点击事件。点击div时会触发body的点击事件。
阻止事件冒泡:
方式一：event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二：return false;
$("#div1").mousedown(function(event){
return false;
});
但是这两种方式是有区别的。
return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。
5. 事件对象的属性
+ event.type()-获取事件的类型
$("a").click(function(event) {
alert(event.type);
});
+ event.target()-获取到触发事件的dom对象
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);
});
+ event.relatedTarget()-获取触发事件的相关元素，对于鼠标事件, 标示触发事件时离开或者进入的DOM元素
$("a").mouseout(function(event) {
alert(event.relatedTarget);
});
+ event.pageX()-获取鼠标相对于页面的 x 坐标
event.pageY()-获取鼠标相对于页面的 y 坐标
$("a").click(function(event) {
alert("Current mouse position: " + event.pageX + ", " + event.pageY );
});
+ event.which()-在鼠标单击事件中获取鼠标的左(1)、中(2)、右健(3)；在键盘事件中获取键盘的按键
$(function(){
$("a").mousedown(function(e){
alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
return false;//阻止链接跳转
})
})
+ event.metaKey()
针对不同浏览器对键盘中的 ctrl 按键解释不同，jQuery也进行了封装，并规定event.metaKey()方法为键盘事件中获取 ctrl 按键。
+ event.originalEvent()-指向原始的事件对象
6. 移除事件
unbind([type][ ,data])
(1)第一个参数为事件类型，第二个参数为要移除的函数
(2)没有参数，删除所有绑定的事件
(3)提供事件类型为参数，只删除该类型的绑定事件
(4)提供处理函数作为第二个函数，只删除提供的特定事件
7. 模拟事件操作
(1)模拟点击事件
+ $(variable).trigger("click")
+ $(variable).click()
(2)触发自定义事件
+ $(variable).bind("customEvent", fn);
+ $(variable).trigger("customEvent");
网友评论