一、 摘要
事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解.
二、 旧有的事件与事件对象
首先来做个测试,代码如下:
<div id="divEvent" style="background-color:Silver;">点击我</div>
<script type="text/javascript">
document.getElementById("divEvent").onclick = alertFirst;
document.getElementById("divEvent").onclick = alertSecond;
function alertFirst(){ alert("first"); }
function alertSecond(){ alert("second"); }
</script>
测试会发现,点击后页面只弹出了second没有弹出first,因为这种方式不支持多播而后面的赋值会覆盖之前的赋值。而如果要实现多播的话,在不同浏览器中又有不同的实现,这是非常麻烦的,但是在jQuery中,我们便可以非常简单的进行操作。
三、 jQuery中的事件
还是来先做个测试,代码如下:
<div id="divEvent" style="background-color:Silver;">点击我</div>
<script type="text/javascript">
$("#divEvent").bind("click", alertFirst)
.bind("click", alertSecond);
function alertFirst(){ alert("first"); }
function alertSecond(){ alert("second"); }
</script>
测试后发现,我们为divEvent控件的click事件添加的两个事件执行函数都执行了,这说明,jQuery包装集是直接支持多播的,并且如上面的代码所示,编写也非常简介明了。
使用jQuery的事件处理有以下几个优点:
1) 以简单统一的方式支持多播
2) 统一了事件名称,jQuery中的所有事件都不需要on,其它基本不变
四、 常用事件函数
bind( type, [data], fn )函数是最常使用的函数, 注意方法签名上data参数, 可以在事件处理之前传递一些附加的数据,如下:
<div id="divEvent" style="background-color:Silver;">点击我</div>
<script type="text/javascript">
$("#divEvent").bind("click", {x:"valueFromWhere"}, alertFirst)
.bind("click", alertSecond);
function alertFirst(event){ alert(event.data.x); }
function alertSecond(event){ alert(event.data); }
</script>
传递的参数是可选的,而对于传递的参数,我们可以通过event.data来获取。
五、 jQuery事件对象
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象.
jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQuery格式化后的事件对象作为唯一参数传入:
$("#testDiv").bind("click", function(event) { });
关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event
jQuery事件对象将不同浏览器的差异进行了合并, 比如可以在所有浏览器中通过 event.target 属性来获取事件的触发者(在IE中使用原生的事件对象, 需要访问event.srcElement).
下面是jQuery事件对象可以在扩浏览器支持的属性:
属性名称 | 描述 | 举例 |
type | 事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. | $("a").click(function(event) { alert(event.type); }); |
target | 获取事件触发者DOM对象 | $("a[href=http://google.com]").click(function(event) { alert(event.target.href); }); |
data | 事件调用时传入额外参数. | $("a").each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); }); }); |
relatedTarget | 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 | $("a").mouseout(function(event) { alert(event.relatedTarget); }); |
currentTarget | 冒泡前的当前触发事件的DOM对象, 等同于this. | $("p").click(function(event) { alert( event.currentTarget.nodeName ); });
|
pageX/Y | 鼠标事件中, 事件相对于页面原点的水平/垂直坐标. | $("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY ); }); |
result | 上一个事件处理函数返回的值 | $("p").click(function(event) { return "hey" }); $("p").click(function(event) { alert( event.result ); });
|
timeStamp | 事件发生时的时间戳. | var last; $("p").click(function(event) { if( last ) alert( "time since last event " + event.timeStamp - last ); last = event.timeStamp; }); |
事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:
名称 | 说明 | 举例 |
preventDefault() | 取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换. | $("a").click(function(event){ event.preventDefault(); // do something }); |
isDefaultPrevented() | 是否调用过 preventDefault() 方法 | $("a").click(function(event){ alert( event.isDefaultPrevented() ); event.preventDefault(); alert( event.isDefaultPrevented() ); }); |
stopPropagation() | 取消事件冒泡 | $("p").click(function(event){ event.stopPropagation(); // do something }); |
isPropagationStopped() | 是否调用过 stopPropagation() 方法 | $("p").click(function(event){ alert( event.isPropagationStopped() ); event.stopPropagation(); alert( event.isPropagationStopped() ); }); |
stopImmediatePropagation() | 取消执行其他的事件处理函数并取消事件冒泡. | $("p").click(function(event){ event.stopImmediatePropagation(); }); $("p").click(function(event){ // This function won't be executed }); |
isImmediatePropagationStopped() | 是否调用过 stopImmediatePropagation() 方法 | $("p").click(function(event){ alert( event.isImmediatePropagationStopped() ); event.stopImmediatePropagation(); alert( event.isImmediatePropagationStopped() ); }); |
这些函数中 stopPropagation() 是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.
六、 我的学习笔记主要是参考“张子秋”的博客而来,而我的学习笔记会缩减很大一部分的内容,所以需要完整内容的请参看张子秋的博客。