Jquery 事件

本文摘自:http://kb.cnblogs.com/page/46546/

摘要：事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解.

[1] 事件与事件对象
[2] jQuery中的事件
[3] 常用事件函数举例
[4] 快捷事件 Event Helpers
[5] 交互帮助方法

首先看一下我们经常使用的添加事件的方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
l1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>javascript中的事件</title>

    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    <script type="text/javascript">
        $(function()
        {
            document.getElementById("testDiv2").onclick = showMsg;
        })

        function showMsg(event)
        {
            alert("!!!");
        }        
    </script>
</head>
<body>
    <div id="testDiv1" onclick="showMsg();">单击事件 1</div>
    <div id="testDiv2">单击事件 2</div>
</body>
</html>

我们最常使用为元素添加onclick元素属性的方式添加事件.

为testDiv2的添加onclick事件的方式是修改Dom属性.

请注意, 虽然效果相同, 但是并不等效. 

document.getElementById("testDiv2").onclick = showMsg;

等效于:

<div id="testDiv1" onclick="alert("!!!");">单击事件 1</div>

注意两者的区别了吗?  我们常用的修改元素属性添加事件的方式, 实际上是建立了一个匿名函数:　

document.getElementById("testDiv1").onclick = function(event)
{
    alert("!!!");
};

这个匿名函数的签名和我们手写的showMsg签名相同, 所以可以把showMsg直接赋值给onclick.

 

这种方式的弊端是:

1. 只能为一个事件绑定一个事件处理函数.  使用"="赋值会把前面为此时间绑定的所有事件处理函数冲掉.

2. 在事件函数(无论是匿名函数还是绑定的函数)中获取事件对象的方式在不同浏览器中要特殊处理:

 

3. 添加多播委托的函数在不同浏览器中是不一样的.

 

//统一的为对象添加多播事件委托的方法
/*  
    参数说明:
    oTarget     : 要添加事件的对象.比如"document".
    sEventType  : 事件类型.比如单击事件"click".
    fnHandler   : 发生事件时调用的方法. 比如一个静态函数"hideCalendar"
    
    使用举例:
    //单击页面的任何元素,只要没有取消冒泡,都可以关闭日历控件
    var cf = document.getElementById("CalFrame");
    if( cf != null && hideCalendar != null )
    {
        ScriptHelper.addEventListener( document, "click", hideCalendar );
    }
*/
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler)
{
    if( oTarget.addEventListener )//for dom
    {
        oTarget.addEventListener( sEventType, fnHandler, false )
    }
    else if( oTarget.attachEvent )//for ie
    {
        oTarget.attachEvent( "on" + sEventType, fnHandler);
    }
}

所以我们首先应该摒弃<div onclick="..."></div>这种通过修改元素属性添加事件的方式. 尽量使用添加多播事件委托的方式为一个事件绑定多个事件处理函数, 比如为document对象的单击事件添加一个关闭弹出层的方法, 使用多播就不会影响document对象原有的事件处理函数.　　

四. jQuery中的事件

有了jQuery,  我们有了处理对象事件的一系列函数.  上面基础知识还是要懂, 但是再也不用自己去实现处理多播事件委托的函数了.  正所谓有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法举例:

使用jQuery事件处理函数的好处:

1. 添加的是多播事件委托.  也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.

$("#testDiv2").bind("click", function (event) { alert("one"); });
$("#testDiv2").bind("click", function (event) { alert("two"); });

单击testDiv2对象时, 依次提示"one"和"two".

2. 统一了事件名称.  
添加多播事件委托时, ie中是事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom ,  因为内部jQuery已经帮我们统一了事件的名称.

3. 可以将对象行为全部用脚本控制. 
让HTML代码部分只注意"显示"逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.

五.常用事件函数举例

bind()是最常使用的函数,  注意方法签名上data参数, 可以在事件处理之前传递一些附加的数据:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

注意event参数的使用. jQuery中统一了事件对象, 将事件对象作为事件处理函数的唯一参数传递.

data参数我们也要通过event.data 进行访问.  为何要提供data参数呢?

因为我们经常碰到这样的问题: 希望在事件处理中根据事件源的某些数据进行特殊处理.

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )

虽然为元素绑定了某些事件, 比如click, 但是有时希望在程序中触发这些事件,  这两个函数可以实现此功能.

主要区别是trigger会出发浏览器默认的动作, 而triggerHandler不会出发.

通过下面的实例可以明确的区分这两个函数:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht
ml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery事件处理:trigger和triggerHandler示例</title>

    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>

    <script type="text/javascript">
        $(function()
        {
            $("#old").click(function()
            {
                $("#divResult").html("");
                $("input").trigger("focus");
            });
            $("#new").click(function()
            {
                $("#divResult").html("");
                $("input").triggerHandler("focus");
            });
            $("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); });
        })
        
    </script>

</head>
<body>
    <button id="old">
        .trigger("focus")</button>
    <button id="new">
        .triggerHandler("focus")</button><br />
    <br />
    <input type="text" value="To Be Focused" />
    <div id="divResult"></div>
</body>
</html>

　

当单击".trigger"按钮时, 会调用两次Focesed, 并且input元素获得了焦点:

　

单击".triggerHandler"按钮时, 只调用一次,并且input元素没有获得焦点:

　　

也就是说, trigger函数出发了浏览器默认的获取焦点的行为,让input元素获得了焦点, 所以再次调用了focus事件处理函数.

triggerHandler只调用为focus事件绑定的事件处理函数, 而不引发浏览器行为, 所以最后input元素没有获得焦点.

六.快捷事件 Event Helpers 

BUG提示:jquery-1.3.2-vsdoc2.js 这个最新的官方带智能提示的类库, 无法使用快捷事件, 比如click(), focus(). 使用其他版本的类库则没有问题.

虽然我们可以使用事件处理函数完成对象事件的几乎所有操作, 但是jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.

设置单击事件:

$("#testDiv").click(function(event) { alert("test div clicked ! "); });

等效于:

$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });

触发单击事件:　

$("#testDiv").click();

等效于

$("#testDiv").trigger("click");

注意这里等效的是trigger而不是triggerHandler.

此类方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻译方式, 所以按照功能称其为"快捷方法",  征集好的翻译名称!

七. 交互帮助方法

这里不列出来，需要用的时候再看

http://kb.cnblogs.com/page/46546/5/

八.使用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 )
      aler
t( "time since last event " + event.timeStamp - last );
   last = event.timeStamp;
});

上面是jQuery官方文档中提供的event对象的属性. 在"jQuery实战"一书中还提供了下面的多浏览器支持的属性, 时间关系我没有尝试每一个属性, 大家可以帮忙验证是否在所有浏览器下可用:

属性名称 描述 举例
altKey Alt键是否被按下. 按下返回true  
ctrlKey ctrl键是否被按下, 按下返回true  
metaKey Meta键是否被按下, 按下返回true.
meta键就是PC机器的Ctrl键,或者Mac机器上面的Command键		  
shiftKey Shift键是否被按下, 按下返回true  
keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65. 

对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠.		  
which 对于键盘事件, 返回触发事件的键的数字编码. 对于鼠标事件, 返回鼠标按键号(1左,2中,3右).  
screenX/Y 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标  

事件对象除了拥有属性, 还拥有事件. 有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件对象的函数列表:

名称 说明 举例
preventDefault()
 取消可能引起任何语意操作的事件. 比如元素的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来取消冒泡.

九. 总结

事件是javascript的灵魂, 我花了很久写这篇文章,翻译jQuery官方的API文档. 列表中的很多例子直接从官网上摘抄的,  有些列表中的方法我也没有用过, 所以如果大家发现问题请及时通知我修改.

接下来的文章将分别讲解Ajax和动画效果.  最后通过讲解两个我修改的jQuery插件来学习jQuery的插件开发.

　　

　　

　　

　　

　　

 

 

 

 

 

posted @ 2014-03-11 15:50  chengdu.jack.li  阅读(201)  评论(0)    收藏  举报