jQuery中的事件

1、事件绑定     bind(type[,data],fn)

     bind()方法有3个参数：

     a、第1个参数是事件类型，包括 blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，也可以是自定义名称。

     b、第2个参数为可选参数，做完event.data属性值传递给事件对象的额外数据对象。

     c、第3个参数是用来绑定的处理函数。   

$("#panel h5.head").bind("click",function(){});

2、合成事件    hover()和toggle()

     a、hover()模拟光标悬停事件

     $("#panel h5.head").hover(function(){
         $(this).next().show();
     },function(){
         $(this).next().hide();
     });

      b、toggle()方法基本同上，交替操作

3、事件冒泡--停止事件冒泡--阻止默认行为

     事件冒泡：事件按照DOM的层次结构像水泡一样不断向上直至顶端。 例：body内有个div，div中有个span，三个元素均绑定的有click事件，点击span，则会弹出3条记录，依次为内层span被点击，外层div被点击，body被点击，   这就是所谓的冒泡。                             

     a、事件对象：即为函数添加一个参数，jQuery代码如下：

     $(“element”).bind("click",function(event){          //事件对象
          //…… 
     })

     b、停止事件冒泡        

     $(“element”).bind("click",function(event){          //事件对象
         var txt=$("#msg").html() + "<p>内层实盘元素被单击。</p>"
         s("#msg").html(txt);
         event.stopPropagation();                          //停止事件冒泡
     })

     c、阻止默认行为（网页中的元素有自己默认的行为，比如单击超链接会跳转，单击提交按钮后，表单会提交，但有时需要阻止元素的默认行为【当表单不符合提交条件时，要阻止表单的提交】）        

     $(“#sub”).bind("click",function(event){          //事件对象
        var username=$("#username").val();              //获取元素的值
        if(username==""){                 //判断值是否为空
            $("#msg").html("<p>文本框内容不能为空！<p>"");            //提示信息
            event.preventDefault();          //阻止默认行为（表单提交）
         }             
     })

       d、如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对同事调用stopPrapagation()方法和preventDefault()方法的一种简写方式。

4、事件对象的属性

      a、event.type  获取到事件的类型

     $("#a").click(function(event){
        alert(event.type);           //获取事件类型
        return false;            //阻止跳转链接
     });

          代码运行后，输出：click

       b、event.preventDefault()  阻止默认的事件行为

       c、event.stopPropagation()   阻止事件的冒泡

       d、event.target     获取到触发事件的元素

         $("a[href='http://google.com']").click(function(event){
             var tg=event.target;
             alert(tg.href);
             return false;
         });

             代码运行后输出：http://google.com

5、event.pageX和event.pageY    获取到光标相对于页面的x、y坐标。

6、event.which    在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。

        $("a").mousedown(function(e){
            alert(e.which);         //1=鼠标左键；2=鼠标中键；3=鼠标右键              
        });

        $("a").keyup(function(e){
            alert(e.which);         //获取键盘的按键；              
        });

7、event.metaKey     键盘事件中获取<ctrl>按键

jQuery中的事件,古老的榕树,5-wow.com