[jQuery基础] jQuery事件相关

最新推荐文章于 2021-09-01 16:31:17 发布

^ω^奋斗小青年

最新推荐文章于 2021-09-01 16:31:17 发布

阅读量326

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/DeathDomain/article/details/106805373

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件绑定

有两种绑定事件方式

eventName(fn)

编码效率略高/ 部分事件jQuery没有实现,所以不能添加

在这里插入图片描述

$(function () {
    $("button").click(function () {
    	alert("hello lnj")
    })
    $("button").click(function () {
    	alert("hello 123")
    })
    $("button").mouseleave(function () {
    	alert("hello mouseleave")
    })
    $("button").mouseenter(function () {
    	alert("hello mouseenter")
    })
})

on(eventName, fn)

编码效率略低/ 所有js事件都可以添加

可以添加多个相同或者不同类型的事件,不会覆盖

在这里插入图片描述

$(function () {
    $("button").on("click", function () {
    	alert("hello click1")
    })
    $("button").on("click", function () {
    	alert("hello click2")
    })
    $("button").on("mouseleave", function () {
    	alert("hello mouseleave")
    })
    $("button").on("mouseenter", function () {
    	alert("hello mouseenter")
    })
})

事件移除

off方法如果不传递参数, 会移除所有的事件

在这里插入图片描述

$("button").off()

off方法如果传递一个参数, 会移除所有指定类型的事件

在这里插入图片描述

$("button").off("click")

off方法如果传递两个参数, 会移除所有指定类型的指定事件

在这里插入图片描述

("button").off("click", test1)

事件冒泡和默认行为

什么是事件冒泡?

GIF 2020 6 17 12 43 20

$(function () {
    $(".son").click(function (event) {
    	alert("son")
    })
    $(".father").click(function () {
    	alert("father")
    })
})

如何阻止事件冒泡

return false
event.stopPropagation()

GIF 2020 6 17 12 46 29

$(function () {
    $(".son").click(function (event) {
    	alert("son")
    	// return false
		event.stopPropagation()
    })
    $(".father").click(function () {
    	alert("father")
    })
})

什么是默认行为?

在这里插入图片描述

$(function () {
    $("a").click(function (event) {
    	alert("弹出注册框")
    })
})

如何阻止默认行为

return false
event.stopPropagation()

GIF 2020 6 17 12 51 17

$(function () {
    $("a").click(function (event) {
    	alert("弹出注册框")
    	// return false
		event.preventDefault()
    })
})

事件自动触发

事件冒泡

trigger: 如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡

GIF 2020 6 17 13 00 22

$(function () {
    $(".son").click(function (event) {
    	alert("son")
    })
    $(".father").click(function () {
    	alert("father")
    })
    $(".father").trigger("click")
    $(".father").triggerHandler("click")
    // $(".son").trigger("click")
    // $(".son").triggerHandler("click")
})

默认行为

trigger: 如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为

在这里插入图片描述

$(function () {
    $("input[type='submit']").click(function () {
    	alert("submit")
    })
    $("input[type='submit']").trigger("click")
    $("input[type='submit']").triggerHandler("click")
    $("span").click(function () {
    	alert("a")
    })
    // $("a").triggerHandler("click")
    $("span").trigger("click")
})

自定义事件

满足条件

事件必须是通过on绑定的
事件必须通过trigger来触发

在这里插入图片描述

$(function () {
    $(".son").on("myClick", function () {
    	alert("son")
    })
    $(".son").triggerHandler("myClick")
})

事件命名空间

满足条件

事件是通过on来绑定的
通过trigger触发事件

在这里插入图片描述

$(function () {
    $(".son").on("click.zs", function () {
    	alert("click1")
    })
    $(".son").on("click.ls", function () {
    	alert("click2")
    })
    // $(".son").trigger("click.zs")
    $(".son").trigger("click.ls")
})

事件委托

什么是事件委托

请别人帮忙做事情, 然后将做完的结果反馈给我们

在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件

GIF 2020 6 17 13 16 16

$(function () {
    $(".son").on("click.zs", function () {
    	alert("click1")
    })
    $(".son").on("click.ls", function () {
    	alert("click2")
    })
    // $(".son").trigger("click.zs")
    $(".son").trigger("click.ls")
})

事件委托练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
        }
        .login{
            width: 521px;
            height: 292px;
            margin: 100px auto;
            position: relative;
        }
        .login>span{
            width: 50px;
            height: 50px;
            /*background: red;*/
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            $("a").click(function () {
                var $mask = $("<div class=\"mask\">\n" +
                    "    <div class=\"login\">\n" +
                    "        <img src=\"images/login.png\" alt=\"\">\n" +
                    "        <span></span>\n" +
                    "    </div>\n" +
                    "</div>")
                // 添加蒙版
                $("body").append($mask);
                $("body").delegate(".login>span", "click", function () {
                    // 移除蒙版
                    $mask.remove()
                })
                return false
            })
        })
    </script>
</head>
<body>
    <!-- <div class="mask">
        <div class="login">
            <images src="images/login.png" alt="">
            <span></span>
        </div>
    </div> -->
    <a href="http://www.baidu.com">点击登录</a>
    <div><img src="images/06.gif" width="100%" height="100%"></div>
</body>
</html>

移入移出事件

mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件

GIF 2020 6 17 13 22 28

$(function () {
    $(".father").mouseover(function () {
    	console.log("father被移入了")
    })
    $(".father").mouseout(function () {
    	console.log("father被移出了")
    })
})

mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件(推荐)

GIF 2020 6 17 13 23 35

$(function () {
    $(".father").mouseenter(function () {
    	console.log("father被移入了")
    })
    $(".father").mouseleave(function () {
    	console.log("father被移出了")
    })
})