事件

shuoxi666

于 2019-10-26 16:21:05 发布

阅读量99

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/shuoxi666/article/details/102757093

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、事件对象：

jquery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器的兼容性处理

事件对象中有包含事件相关信息的属性：

**event对象的常用属性**
event.type	获取到事件的类型
event.preventDefault()	阻止默认的事件行为，js中该方法在IE浏览器中无效，jquery对其进行了封装，使之能兼容各种浏览器，该方法在下文中有详细介绍
event.stopPropagation()	js中该方法在IE浏览器中无效，jquery对其进行了封装，使之能兼容各种浏览器，该方法在下文中有详细介绍
event.target	获取触发事件的元素
event.relatedTarget
event.pageX和event.pageY	获取到光标相对与页面的x坐标和y坐标
event.which	在鼠标单击事件中获取到鼠标的左.右.中键，在键盘事件中获取键盘的按键
event.mateKey	键盘事件中获取<ctrl>按键

二、事件冒泡：

网页中子元素嵌套在父元素里，并且都被绑定了click事件，点击子元素，会先触发子元素上的click事件，然后会触发父元素上的click事件，这就叫做事件冒泡。

例子：

<html>

<head>
    <title>事件冒泡</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
</head>
<script>
    $(function () {
        $("body").click(function(){
            console.log("我是body点击事件");
        })
        $("div").click(function () {
            console.log("我是div点击事件");
        })
        $("span").click(function(){
            console.log("我是span点击事件");
        })
    })
</script>

<body>
    <div class="mapper">
        <span>点击触发事件冒泡</span>
    </div>
</body>

</html>

运行效果：

点击span标签时,结果为：

触发顺序：

1.<span>

2.<div>

3.<body>

事件会按照DOM的层次结构像水泡一样不断向上直到顶端.

点击span标签,依次触发了span,div,body标签上的事件,这就是事件冒泡.

解决方法：

jquery中提供了stopPropagation()方法来结束事件冒泡,将上面的代码中的span标签的click事件修改为：

$("span").click(function(event){
            console.log("我是span点击事件");
            event.stopPropagation();
        })

这样再点击span标签时，就不会触发div，body上的click事件，结果如下：

三、阻止默认事件

网页中的元素有自己的默认行为，例如点击超链接后会跳转，点击form表单中的"提交"按钮，表单会提交,有时需要阻止元素的默认行为

解决方法：

jquery中提供了preventDefault()方法来阻止元素的默认行为。

例子：


<html>

<head>
    <title>事件冒泡</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
</head>

<script>
    $(function () {
        $("#sub").click(function(event){
            if($("#username").val()==""){   //判断用户名是否为空
                event.preventDefault();      //阻止默认行为(表单提交)
            }
        })
    })
</script>

<body>
    <form action="分页查询.html">
        用户名:<input type="text" id="username"><br>
        <input id="sub" type="submit" value="提交">
    </form>
</body>

</html>

当用户名为空时，点击"提交"按钮，表单不会被提交，只有在用户名不为空时，才能提交表单

四、同时阻止事件冒泡和默认事件

return false; 在事件处理函数中返回false,这是同时调用stopPrapagation()和preventDefault()方法的一种简写方式.

在第一个例子中，将span标签中的单击函数修改为：

<script>

$("span").click(function(){
            console.log("我是span点击事件");
            return false;
        })

</script>

这样也可以阻止事件冒泡.

在第二个例子中,将"提交"按钮的单击事件修改为:

<script>
$("#sub").click(function(event){
            if($("#username").val()==""){   //判断用户名是否为空
                return false;      //阻止默认行为(表单提交),阻止事件冒泡
            }
        })
</script>

这样也可以阻止form表单的默认行为(表单提交)

五、移除事件

unbind() 用于移除事件

unbind([type],[data]);第一个参数是事件类型，第二个参数是将要移除的函数

shuoxi666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件

一、事件对象：jquery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器的兼容性处理事件对象中有包含事件相关信息的属性：event对象的常用属性 event.type 获取到事件的类型 event.preventDefault() 阻止默认的事件行为，js中该方法在IE浏览器中无效，jquer...
复制链接

扫一扫