jQuery--事件相关

技术2022-07-11 76

事件处理

事件绑定

有两种绑定事件方式

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)

事件冒泡和默认行为

什么是事件冒泡?

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

如何阻止事件冒泡

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

什么是默认行为?

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

如何阻止默认行为

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

事件自动触发

事件冒泡

trigger: 如果利用trigger自动触发事件,会触发事件冒泡triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡 $(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会遍历所有找到的元素,给所有找到的元素添加事件

$(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>  <a href="http://www.baidu.com">点击登录</a> <div><img src="images/06.gif" width="100%" height="100%"></div> </body> </html>

移入移出事件

mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件 $(function () { $(".father").mouseover(function () { console.log("father被移入了") }) $(".father").mouseout(function () { console.log("father被移出了") }) }) mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件(推荐) $(function () { $(".father").mouseenter(function () { console.log("father被移入了") }) $(".father").mouseleave(function () { console.log("father被移出了") }) })

Processed: 0.013, SQL: 9