zoukankan      html  css  js  c++  java
  • 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、阻止默认行为(网页中的元素有自己默认的行为,比方单击超链接会跳转。单击提交button后。表单会提交,但有时须要阻止元素的默认行为【当表单不符合提交条件时,要阻止表单的提交】)        

         $(“#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>按键

  • 相关阅读:
    个人项目 源程序特征统计程序(C++)
    自我介绍+软工五问
    团队作业3——需求改进&系统设计
    Four Fundamental Operations(JS) --结对项目
    WordCount of Software Engineering
    代码开发、测试发布
    需求改进---系统设计
    综合系统开发---需求分析
    读书笔记---软件设计原则、设计模式
    自我介绍+课程六问
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6780008.html
Copyright © 2011-2022 走看看