十一、event事件(冒泡、默认行为、捕获)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/MASORL/article/details/80839550

1、事件对象

jQuery进行了必要的扩展和封装,从而使得在任何浏览器中都能很轻松地获取事件对象和它的一些属性

$("p").bind("click", function(event){});//只需往函数添加一个参数,event就是事件对象

2、停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。

使用stopPropagation();方法

$("p").bind("click", function(event){
    event.stopPropagation();//停止冒泡事件
});

3、阻止默认行为

使用event.preventDefault();

应用场景:1)表单提交,但表单不符合提交条件时,阻止。

                2)超链接跳转

4、同时停止冒泡和默认行为

方法:在事件处理函数中返回fasle即可

5、事件对象常用属性

    1)event.type:获取事件类型(如返回“click”)

    2)event.target:获取触发时间的元素

    3)event.relatedTarget:获取相关元素

    如:

<body>
    <div></div>
       <p></p>
<body/>

div绑定了mouseout事件,使用event.target获取到的就是div这个元素

如果是由div移到p元素,则event.relatedTarget获取到的就是p元素。

如果是由div移动body元素,则event.relatedTarget获取到的就是body元素。

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

    5)event.which:在鼠标单机事件中获取到鼠标的左中右键;(返回数字,1左,2中,3右)

    6)eventl.metaKey:键盘事件中获取<ctrl>按键

6、移除事件

使用方法:unbind([type], [data]);

    1)没有参数,删除所有绑定事件

    2)type参数:只删除该类型的绑定事件

    3)data参数:函数,作为第二参数传入,指定删除该函数

$(function(){
$("p").bind("click", fun1 = function(){})
.bind("click", fun1 = function(){})
})
$("p").unbind("click", fn2);//删除指定函数

7、只触发一次事件

使用one()方法:与bind()用法相同,为元素绑定好事件后,函数只执行一次,之后毫无作用。

   


猜你喜欢

转载自blog.csdn.net/MASORL/article/details/80839550
今日推荐