5,事件

推荐的学习资源来自:张子秋http://www.cnblogs.com/zhangziqiu/tag/jQuery%e6%95%99%e7%a8%8b/

概要:

       jQuery在写事件上比JavaScript方便。至少不必考虑浏览器兼容性问题而用js实现处理多播事件委托的函数了。

内容:

       一般在用修改属性的方式添加事件,是不好的:

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

    这种方式的弊端是:

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

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

使用jQuery添加事件的好处:

  1. 1.       添加的是多播事件委托.  也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.
  2. 统一了事件名称. 
    添加多播事件委托时, ie中是事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom ,  因为内部jQuery已经帮我们统一了事件的名称.
  3. 可以将对象行为全部用脚本控制.

 

例子:

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

 

常用事件:

       Bind(type,[data],fn),one(type,[data],fn)(只一次):

 

function show() {

           alert("鼠标移动div");

        }

       $("div").one("mousemove", show);//有几个绑定,几个各执行一次

       $("div").bind("click", function () {alert("点击了") });

              functionshow(event){

           alert(event.data.idd);

       }

       $("div").bind("click", { idd: "aaa" },show);

              $("div").bind("click",function () {alert("hehe") });

 

       Trigger(type,[data]),triggerHandler(type,[data]):

在程序中触发事件。Trigger默认触发浏览器动作,triggerHandler不会有浏览器默认动作。

              <buttonid="old">.trigger("focus")</button>

           <buttonid="new">.triggerHandler("focus")</button><br/><br/>

           <input type="text"value="To Be Focused"/>

           <scripttype="text/javascript">

       $("#old").click(function () {

           $("input").trigger("focus");    //会触发三次

       });

       $("#new").click(function () {

           $("input").triggerHandler("focus");//只触发一次

       });

       $("input").focus(function () {$("<span>Focused!</span>")

.appendTo("body").fadeOut(1000); }); //并在1000毫秒后消失

           </script>

 

       Unbind([type],[data]):

              删除绑定事件。

              .unbind();删除所有绑定事件

              .unbind(“click”);删除所有单击事件

              .unbind(show);删除绑定的show函数事件

 

快捷事件函数:

       click([fn]):没有数值为触发事件,有值为绑定事件

       Blur([fn]):失去焦点

       Change([fn]):$(“input[type=’text’]”).change(function(){//验证验证码代码});

Dblclick([fn]):双击

Error([fn]):

              $(window).error(function(msg,url,line){jQuery.post("

js_error_log.

 php",

msg: msg, url: url, line: line });}); //在服务器端记录错误

 

       $(window).error(function(){returntrue;})//隐藏错误

       $(“img”).error(function(){$(this).hide();})//隐藏无效图片

。。。。。。

 

交互处理:

       Hover(over,out):

              Over为鼠标进入时要触发的函数

              Out为鼠标离开时要出发的函数

       Toggle(fn,fn…..)

              点击依次触发的函数,直到最后一个,再循环。可以用unbind()删除

 

 

使用jquer事件对象:

       jQuery.event.*;事件对象的获取和事件对象属性的查询。用时参考官方文档。

posted @ 2010-09-06 23:30  耀哥  阅读(299)  评论(0编辑  收藏  举报