JQuery基础之(六)JQuery事件与事件对象

一、    摘要

事件是脚本编程的灵魂. 所以本章内容也是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 );

});

结果:P

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 );

});

结果:"hey"

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来取消冒泡.

 

六、    我的学习笔记主要是参考“张子秋”的博客而来，而我的学习笔记会缩减很大一部分的内容，所以需要完整内容的请参看张子秋的博客。