zoukankan      html  css  js  c++  java
  • jQuery(三)事件处理

    五、用jQuery处理事件

    事件的处理的一个难点就是IE浏览器和其他的浏览器的事件API不同,为了解决这个难题,jQuery定了一个统一的事件API在所有浏览器都可以工作,这个API比标准的事件API和IE定义的API更加容易使用,也比标准的API更加的强大。

    1、简单的事件处理器注册方法

    如:$("p").click(function(){$(this).css("backgroud-color","gray");});这种方式比一个一个地给p元素使用addEventListener()或者attachEvent()注册事件要方便多了。

    jQuery定义了如下简单事件的注册函数:

    blur(),  change(), click(),  dblclicl(), error(), focus(), focusin(),  focusout(), keydown(), keypress(),  keyup(),  load(),  mousedown(),  mouseenter(), mouseleave(), mouseover(), 

    mouseout(),  mouseup(),   resize(),  scroll(), select(),  submit(),  unload().

    jQuery还定义了2个特别的注册函数:

    hover(f,g),相当于注册了mouseenter和mouseleave,mouseenter调用f,mouseleave调用g,如果hover只提供一个参数的话,表示这两个事件的处理器是一样的。

    toggle(f,g,h,...),注册click事件的多个处理器,第一次点击使用处理器f,第二次点击使用g,第三次h,以此类推,到达最后一个处理器时,又从头开始。

    另外一个特别的注册方式为:$("<img/>",{src:"aa.png",alt:"img_desc",click:function(){$(this).css("opacity","50%");}});

    2、jQuery事件处理器

    jQuery事件处理器的第一个参数是jQuery的事件对象,封装了每个事件信息。处理器的返回值也很重要,如果返回false,那么事件的默认行为以及事件的传递都会被取消,相当于调用了本地浏览器事件对象Event的preventDefault()和stopPropagation()。如果返回值是一个除undefined以外的值,则该值存储在Event对象的result属性里。

    3、jQuery事件对象

    jQuery定义了自己的事件对象,屏蔽了不同浏览器的差异。jQuery事件对象作为第一个参数传递给事件处理器。jQuery把浏览器Event对象上的属性复制到jQuery事件对象里。

    4、更高级更灵活的事件处理器注册方法:bind()和one()

    上面提到的简单注册方法也是通过调用bind()方法实现的,bind()方法的使用非常灵活,以下是他的一些特性:

    (1)最简单的方式,2个参数,一个事件名称,一个事件处理器,如:$("p").bind("click",f),等同于上面的简单注册方式:$("p").clck(f);

    (2)使用3个参数,第一个为事件名称,第三个为事件处理器,中间第二个参数可以为任意值,jQuery会把它作为事件对象的data属性的值。

    (3)事件名称可以是用空格分隔的多个事件,比如:$("p").bind("mouseenter mouseleave",f) 其实是等同于:$("p").hover(f);

    (4)为事件处理器指定命名空间,事件处理器的命令空间可以方便事件处理器的调用和取消注册,事件处理器的命名空间看上去像css的类选择器。通过在事件名称后加一个点号和命名空间名称来绑定一个处于该命名空间里的事件处理器,例如:$("a").bind("mouseover.myMod",f);   命名空间可以是多个,如:$("a").bind("mouseover.myModular.yourModular",f);

    (5)bind的第一个参数也可以是一个对象,该对象是一个事件名称与处理器的映射对象,如:$('a').bind({mouseenter:f,mouseleave:g}); 等同于:$("a").hover(f,g),如果此时提供了第二个参数,那么第二个参数作为事件对象的data属性的值。

    one()和使用方法一模一样,只是由one()注册的处理器,在调用一次后就被取消了。

    值得注意的是:bind()和one()都没有addEventListener()方法具有的注册一个捕捉事件处理器。

    5、反注册/取消注册事件处理器

    使用unbind()方法取消通过bind()方法以及其他jQuery方法注册的事件处理器,由addEventListener(),attachEvent(),或者在html元素属性上定义的事件处理器不能通过该方式取消注册。

    (1)不带参数表示取消所有事件处理器的注册,如:$("*").unbind();取消文档中所有元素的jQuery方式事件处理器

    (2)参入事件名称或者空格分隔的事件名称,如:$("a").unbind("mouseenter mouseleave");取消对应事件的所有处理器

    (3)第二种方式因尽量避免使用,因为可能别人也使用了这个事件名称注册了事件处理器。如果可以的话,应该尽量只取消自己注册的事件处理器,前面说到了事件可以有命名空间,我们最好在自己的命名空间中注册事件处理器,然后通过命名空间来取消注册,如:

    $("a").unbind("mouseover.myModular mouseout.myModular");

    $("a").unbind(".myModular");

    $("a").unbind("mouseover.myModular.yourModular");

    (4)如果没有使用命名空间,最好是在注册是,保存处理器的引用。然后使用这种方法取消注册:$("#mybutton").unbind("click",myClickHandler);

    (5)和bind类似,unbind也可以参入一个映射对象来取消注册,如:$('a').unbind({mouseenter:f,mouseleave:g});

    (6)传入一个jQuery事件对象,即unbind(event),等同于:unbind(event.type,event.handler);

    6、触发事件:trigger(),jQuery.event.trigger(),triggerHandler()

    事件的触发一般是用户使用鼠标或者键盘或者发生其他事件时自动产生的。但是有时候,通过手动地触发事件会非常有用。

    手动触发事件最简单的方式就是,通过调用不带参数的简单事件注册函数,比如click,mouseover等。比如:$("#myform").submit();

    通过jQuery方法手动触发事件,不光会触发jQuery方式注册的事件处理器,也会触发通过html属性或者元素属性注册的事件处理器。但是不能触发通过addEventListener或者attachEvent注册的事件处理器(这些事件还得必须是真实的事件发生时才会触发)

    submit,click之类的方法既可以注册事件也可以触发事件,就像注册事件有通用的bind方法,jQuery对象定义了一个通用的触发事件的方法trigger(),用法为:

    (1)一个事件名称的参数,如: $("myform").trigger("submit");  不过不像bind和unbind,事件名称参数不能是空格隔开的多个事件名称。

    (2)事件名称可以有命名空间,或者用感叹号(!)后缀表示事件为非命名空间里的事件,通过元素属性注册的事件没有命名空间,比如onclick等。

    例子:$("mybtn").trigger("click.ns1");  $("mybtn").trigger("click!");

    (3)除了传事件名称参数,你还可以传一个Event对象;或者一个任意对象,只要该对象包含一个type属性,type属性用来表示事件名称,此时jQuery会新建一个Event对象,并把原对象的属性copy到这个Event对象上,这种方式可以在调用事件时传递更多额外的数据。例子:

    $("btn1").click(function(e){$(btn2).trigger(e);});  //传入Event对象,点击btn1同时触发btn2的点击事件

    $("btn1").trigger({type:"click",synthetic:true});    //传入带type属性的任意对象,并且附加其他属性。相应的注册方法是:$("btn1").click(function(e){if(e.synthetic){...}});

    (4)trigger也可以带两个参数,通过第二个参数传递额外的数据,这第二个参数作为事件处理器的第二个参数传过去。如:$("btn1").trigger("click",[x,y,z]);

    全局调用某个类型的事件,不管发生事件的元素类型,可以这样写:$("*").trigger(sometype); 不过这种方式效率低,jQuery完成这一功能的另一个更高效的方法是:jQuery.event.trigger(),这个方法的参数和trigger一样,不过只能调用通过jQuery方式注册的事件,不能调用通过DOM属性如onclick等方式注册的事件。

    (5)trigger方式调用事件处理器,会触发事件的默认行为。我们可以通过调用triggerHandler来触发事件,而不触发该事件的默认行为。其实该方法相当于trigger方法,只不过它首先调用了Event对象的preventDefault()和cancelBubble()方法。

    7、自定义事件

    jQuery事件系统不光是处理浏览器产生的鼠标或者键盘事件,我们也可以自定义自己的事件,使用任意的字符串作为事件名,使用bind绑定事件到处理器,使用trigger来触发事件。我们可以通过这种方法来写模块化的代码或者实现pub/sub模型和观察者模式。使用自定义事件,我们可以通过jQuery.event.trigger()来全局地调用他们,比如:

    $("#logoff").click(function(){$.event.trigger("logoff");});

    8、活动事件Live Events:delegate/undelegate, live/die

    bind等绑定事件事件都是静态的,如:$("a").bind("click",f); 为文档中的所有a元素注册了click事件,如果之后文档有新增了a元素,那么新的a元素是没有注册这个click事件的。为了解决这个问题,jQuery使用delegate和undelegate来注册和反注册活动事件。

    delegate可以是三个参数,此时分别为:一个jQuery的selector字符串,一个事件类型,一个事件处理器。delegate实际上是在document或者window或者jQuery对象中的所有元素上注册了一个内部的处理器,当事件发生时,冒泡到对应的元素上,然后调用这个内部处理器。

    如:$(document).delegate("a","mouseover",linkHandler);这样,所有旧的和新增的a元素,都注册了linkHandler处理器了。

    $(".dynamic").delegate("a","mouseover",linkHandler);  为所有新增的a元素注册处理器。

    正如bind一样,为了可以传递额外的数据到处理器,delegate也可以有4个参数,此时第三个为数据参数,第四个为处理器函数。

    值得注意的是,活动事件是基于冒泡事件模型的,如果在冒泡阶段,静态处理器取消了冒泡cancelBubble(),那么活动事件就失效了,处理函数不会被调用。

    注册活动事件的另一个方法是live,live没有delegate直观好理解,不过实际中经常使用,具有和bind方法一样的2个或者3个参数签名,如上面两个注册方法如果使用live方法来注册,分别为:

    $("a").live("mouseover",linkHandler); $("a",$(".dynamic")).live("mouseover",linkHandler);

    对应jQuery对象x,下面两句做的是同一件事:

    x.live(type,handler);  $(x.context).delegate(x.selector,type,handler);

    使用undelegate和die取消活动事件的注册,如:$("a").die("mouseover"); $("a").die("mouseover",linkHandler);

    等同于:$(document).undelegate("a","mouseover");$(document).undelegate("a","mouseover",linkHandler);

  • 相关阅读:
    Search Insert Position
    Sum Root to Leaf Numbers
    String to Integer (atoi)
    Populating Next Right Pointers in Each Node
    Triangle
    Pascal's Triangle II
    Longest Consecutive Sequence
    属性透明度
    ul的列表符号在IE6下显示不全
    table的属性border-collapse 设置边框是否合并
  • 原文地址:https://www.cnblogs.com/winson/p/3438019.html
Copyright © 2011-2022 走看看