Jquery李炎恢——18,19事件对象

    xiaoxiao2025-02-16  8

    学习要点:

    1.事件对象

    2.冒泡和默认行为

    javaScript在事件处理函数中默认传递了event对象,也就是事件对象。但由于浏览器的兼容性,开发者总是会做兼容性方面的处理。jquery在封装的时候,解决了这些问题,并且还创建了一些非常好用的属性和方法。

    一、事件对象

    事件对象就是event对象,通过处理函数默认传递接受。之前处理函数的e就是event事件对象,event对象有很多可用的属性和方法,我们在javaScript的课程中已经详细的了解过这些常用的属性和方法。这里,我们再演示一下。

    //通过处理函数传递事件对象

    $("input").bind("click",function(e){       //接受事件对象参数

            alert(e);

    });

    event对象的属性 属性名type:获取这个事件的事件类型的字符串。例如click 属性名target:获取触发事件的DOM元素 属性名data:获取事件调用时间的额外数据 属性名relatedTarget:获取移入移出目标点离开或进入的那个最相邻的DOM元素 属性名currentTarget:获取绑定触发的DOM元素,等同于this 属性名pageX/pageY:获取相对于页面原点的水平/垂直坐标 属性名screenX/screenY:获取显示器屏幕位置的水平/垂直坐标(非jquery封装) 属性名clientX/clientY:获取相对于页面视口的水平/垂直坐标(非jquery封装) 属性名result:获取上一个相同事件的返回值 属性名timeStamp:获取事件触发的时间戳 属性名which:获取鼠标左中右键(1,2,3),或获取键盘按键 属性名altKey/shiftKey/ctrlKey/metaKey:获取是否按下了alt,shift,ctrl(这三个非jquery封装)或meta键(IE原生meta键,jquery做了封装)

    //通过event.type属性获取触发事件名

    $("input").click(function(e){

              alert(e.type);

    });

    //通过event.target获取绑定的DOM元素

    $("input").click(function(e){

           alert(e.target);

    });

    //通过event.data获取额外数据,可以是数字,字符串,数组,对象

    $("input").bind("click",123,function(){             //传递daga数据

            alert(e.data);                                          //获取数字数据

    });

    注意:如果字符串就传递:“123”,如果是数组就传递:[123,"abc"],如果是对象就传递:{user:"Lee",age:100}。数组的调用方式是:e.data[1],对象的调用方式是:e.data.user

    //event.data获取额外数据,对于封装的简写事件也可以使用

    $("input").click({user:"Lee",age:"100"},function(e){

               alert(e.data.user);

    });

    注意:键值对的键可以加上引号,也可以不加;在调用的时候也可以使用数组的方式:alert(e.data["user"]);

    //获取移入到div之前的那个DOM元素

    $("div").mouseover(function(e){

            alert(e.relatedTarget);

    });

    //获取移出div之后到达最近的那个DOM元素

    $("div").mouseout(function(e){

            alert(e.relatedTarget);

    });

    //获取绑定的那个DOM元素,相当于this,区别与event.target

    $("div").click(function(e){

            alert(e.currentTarget);

    });

    注意:event.target得到的是触发元素的DOM,event.currentTarget得到的是监听元素的DOM,而this也是得到监听元素的DOM.

    //获取上一次事件的返回值

    $("div").click(function(e){

          return "123";

    });

    $("div").click(function(e){

          alert(e.result);

    });

    //获取当前的时间戳

    $("div").click(function(e){

             alert(e.timeStamp);

    });

    //获取鼠标的左中右键

    $("div").mousedown(function(e){

           alert(e.which);

    });

    //获取键盘的按键

    $("input").keyup(function(e){

          alert(e.which);

    });

    //获取是否按下了ctrl键,meta键不存在,导致无法使用

    $("input").click(function(e){

           alert(e.ctrlKey);

    });

    //获取触发元素鼠标的当前的位置

    $(document).click(function(e){

            alert(e.screenY+","+e.pageY+","+e.clientY);

    });

    二、冒泡和默认行为 如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出现冒泡问题 //HTML页面 <div style="width:200px;height:200px;background:red;">        <input type="button" value="按钮"/> </div> //三个不同元素触发事件 $("input").click(function(){         alert("按钮被触发了!"); }); $("div").click(function(){        alert("div层被触发了!"); }); $(document).click(function(){        alert("文档页面被触发了!"); }); 注意:当我们点击文档的时候,只触发文档事件;当我们点击div层时,触发了div和文档两个;当我们点击按钮时, 触发了按钮,div和文档。触发的顺序是从小范围到大范围。这就是所谓的冒泡现象,一层一层往上。 jquery提供了一个事件对象的方法:event.stopPropagation(),这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消。 $("input").click(function(){          alert("按钮被触发了!");          e.stopPropagation(); }); //禁止提交表单跳转 $("form").sumbit(function(e){        e.preventDefault(); }); 网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹出系统菜单,点击超链接会跳转到指定页面、点击提交按钮会提交数据。 $("a").click(function(e){        e.preventDefault(); }); 注意:如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时写上:event.stopPropagation()和event.preventDefault()。这两个方法如果需要同时启用的时候,还有一种简写方案代替,就是直接return false. $("a").click(function(e){          return false; }); 冒泡和默认行为的一些方法 preventDefault():取消某个元素的默认行为 isDefaultPrevented():判断是否调用了preventDefault()方法 stopPropagation():取消事件冒泡 isPropagationStopped():判断是否调用了stopPropagation()方法 stopImmediatePropagation():取消事件冒泡并取消该事件的后续事件处理函数 isImmediatePropagationStopped():判断是否调用了stopImmediatePropagation()方法 //判断是否取消某个元素的默认行为 $("input").keyup(function(e){          e.preventDefault();          alert(e.isDefaultPrevented()); }) //取消事件冒泡并取消该事件的后续事件处理函数 $("input").click(function(e){          alert("input");          e.stopImmediatePropagation(); }); $("input").click(function(){          alert("input2"); }); $(document).click(function(){         alert("document"); }); //判断是否调用了stopPropagation()方法 $("input").click(function(e){          e.stopPropagation();          alert(e.isPropagationStopped()); }); //判断是否调用了stopImmediatePropagation()方法 $("input").click(function(e){        e.stopImmediatePropagation();        alert(e.isImmediatePropagationStopped()); });

    转载请注明原文地址: https://ju.6miu.com/read-1296501.html
    最新回复(0)