[jQuery基础] jQuery事件相关

事件绑定

有两种绑定事件方式

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 false
event.stopPropagation()

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

什么是默认行为?

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

如何阻止默认行为

return false
event.stopPropagation()

$(function () {$("a").click(function (event) {alert("弹出注册框")// return falseevent.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><!-- <div class="mask"><div class="login"><images src="data:images/login.png" alt=""><span></span></div></div> --><a href="http://www.baidu.com">点击登录</a><div><img src="data: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被移出了")})
})

[jQuery基础] jQuery事件相关相关推荐

JQuery | JQuery语言 | JQuery基础 | JQuery语言基础
文章目录前言一.JQuery语言介绍一.JQuery版本: 二.JQuery源文件说明: 三.JQuery使用条件: 二.入口函数一.第一种入口函数二.第二种入口函数三.JavaScrip ...
[jQuery基础] jQuery核心函数和工具方法
核心函数核心函数调用jQuery的核心函数 $() jQuery 传递一个函数 $(function () {alert("hello lnj") } 接受一个字符串选择器返 ...
[jQuery基础] jQuery事件相关案例 -- 电影排行榜、Tab选项卡
电影排行榜实现效果展示实现步骤第一步(实现静态效果) css部分 *{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: ...
JQuery属性、事件相关操作
JQuery属性相关操作文章目录 JQuery属性相关操作一.尺寸相关.滚动事件 1.获取和设置元素的尺寸 2.获取元素相对页面的绝对位置 3.获取浏览器可视区宽度高度 4.获取页面文档的宽度高度 ...
[jQuery基础] jQuery对象 -- CSS相关
CSS相关操作CSS 逐个设置 $(function () {$("div").css("width", "100px")$(" ...
[jQuery基础] jQuery案例 -- qq音乐以及初步解决Ajax 跨域问题
qq音乐案例案例效果展示案例效果结构划分整体布局歌曲条目部分顶部栏底部栏歌词显示部分案例实现功能 a. QQ音乐播放器静态页面布局 * 页面整体布局规划和实现 * 页面顶部布局和静态效 ...
[jQuery基础] jQuery动效
显示和隐藏动画 show() – 显示 hide() – 隐藏 $(function () {// 编写jQuery相关代码$("button").eq(0).click(func ...
[jQuery基础] jQuery对象 -- 选择器
jQuery对象选择器基础选择器主要有通过id名查询的id选择器.类选择器.标签选择器以及通用选择器层次选择器常见有后代选择器.子选择器 .相邻兄弟选择器.同胞选择器序选择器等待更新属 ...
[jQuery基础] jQuery案例 -- 新浪微博
新浪微博案例思路主要说说JavaScript的思路随时要监听内容的输入有内容输入添加,按钮可以点击没有内容输入禁止点击按钮监听点击发布按钮拿到用户输入的内容根据内容创建节点插入微 ...

[jQuery基础] jQuery事件相关

事件绑定

事件移除

事件冒泡和默认行为

什么是事件冒泡?

如何阻止事件冒泡

什么是默认行为?

如何阻止默认行为

事件自动触发

事件冒泡

默认行为

自定义事件

事件命名空间

事件委托

什么是事件委托

移入移出事件

[jQuery基础] jQuery事件相关相关推荐

最新文章

热门文章