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>按键

  • 相关阅读:
    前端与算法 leetcode 344. 反转字符串
    JavaScript闭包使用姿势指南
    前端与算法 leetcode 48. 旋转图像
    前端与算法 leetcode 36. 有效的数独
    前端与算法 leetcode 1. 两数之和
    前端与算法 leetcode 283. 移动零
    前端与编译原理 用js去运行js代码 js2run
    前端与算法 leetcode 66. 加一
    前端与算法 leetcode 350. 两个数组的交集 II
    前端与算法 leetcode 26. 删除排序数组中的重复项
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6780008.html
Copyright © 2011-2022 走看看