从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理
大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公众号：Web前端之巅
- 博客园：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、事件冒泡与阻止事件冒泡
事件冒泡：当一个元素触发某个事件的时候，会把这个事件传播到其父元素，一直到顶层元素。
阻止事件冒泡：在被触发事件的子元素中添加 return false; 即可。
二、事件的触发
之前讲的绑定事件是事件触发后的事件处理过程，并且上面的事件触发是被动的事件触发，怎么可以主动触发事件呢？
文本框的获取焦点事件的触发：
// 方式一
文本框元素.focus();
// 方式二
文本框元素.trigger("focus");
// 方式三
文本框元素.triggerHandler("focus");
PS：方式一和方式二，都可以获取文本框的焦点，并且触发浏览器的默认行为（光标闪烁）；而方式三，可以获取文本框的焦点，但是不能触发浏览器的默认行为。
三、事件参数对象
事件处理函数有没有参数呢？
通过 arguement.length 可以得到有一个参数，这个参数是一个对象，里面有很多事件相关的属性。
获取用户按下的组合键
$(document).mousedown(function (e) {
if (e.altKey) {
console.log("alt按下了");
} else if (e.ctrlKey) {
console.log("ctrl按下了");
} else if (e.shiftKey) {
console.log("shift按下了");
} else {
console.log("鼠标按下");
}
});
altKey, ctrlKey, shiftKey 相应的按键按下后，对应事件的值为 true。
// 鼠标按下的键值
e.button
// 按键按下的键值
e.keyCode
// 触发该事件的目标对象，是一个 DOM 对象
// 当发生事件冒泡的时候，可以定位到具体发生事件的源对象，而不是冒泡的对象。（比如：p在div里面，那么点击p触发的事件下，e.target 是写在div事件处理函数里面的，此时 e.target 是p对象。）
e.target
// 触发事件的当前的对象
// （比如：p在div里面，那么点击p触发的事件下，e.currentTarget 是写在div事件处理函数里面的，此时 e.currentTarget 是div对象）
e.currenyTarget
// 代理的那个对象
e.delegateTarget
四、链式编程的原理
链式编程就是一个对象调用方法后还可以继续调用方法。这就要求对象调用方法后的返回值还是这个对象，那么这个方法内部是如何实现的呢？
其实很简单：就是在最后返回调用其的对象。return this; 就好了。
还有一个问题，就是 jQuery 中 val(); 在没有参数时时读取数值，不能链式编程；在有参数的时候是设置，可以链式编程。
所以方法的内部实现，在 return this; 之前还要做个判断，如果有参数才返回调用对象，否则不返回。
案例：五星好评
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
margin: 100px 0 0 300px;
}
li {
list-style: none;
font-size: 20px;
float: left;
color: #ff0000;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="uu">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.4.min.js"></script>
<script>
$("#uu>li").click(function () {
$("#uu>li").html("☆");
$(this).attr("index", 1).siblings("li").removeAttr("index");
$(this).html("★").prevAll("li").html("★");
}).mouseenter(function () {
$(this).html("★").prevAll("li").html("★");
}).mouseleave(function () {
$("#uu>li").html("☆");
$("#uu>li[index=1]").html("★").prevAll("li").html("★");
});
</script>
</body>
</html>
从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理的更多相关文章
- 从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（二）获取和操作元素的属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 jQuery（八）each，多库共存，包装集，插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
随机推荐
- ORACLE多表关联UPDATE 语句[z]
[z]https://www.cnblogs.com/franson-2016/p/5988303.html 1) 最简单的形式 SQL 代码 --经确认customers表中所有customer_i ...
- C# NPOI 日期格式
之前整理的NPOI导入导出Excel 在之前使用过程中没发现问题. 但是后来发现导入的文档如果有日期时间格式,导入时会有混乱 后来找了一下解决方案,最终将其中一段修改即可导入日期(导出未测试) 原因 ...
- MQ消息队列在软件开发中的作中
MQ的作用是非常之大的. 1.解耦. 当一个大型的系统.比如,商城系统.包括以下的功能: 1.发邮件 2.发短信 3.抽奖 4.搜索等 如果你都用一台服务器,做到一个程序里,代码会非常庞大,不利于维护 ...
- 洛谷4556 [Vani有约会]雨天的尾巴
原题链接 每个点开一个权值线段树,然后用树上差分的方法修改,最后自底向上暴力线段树合并即可. 不过空间较大,会\(MLE\),写个内存池就可以了. #include<cstdio> #in ...
- 微信小程序开发 - 用户授权登陆
准备:微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:htt ...
- 常用screen参数
摘自:https://www.cnblogs.com/webnote/p/5749675.html screen -S yourname -> 新建一个叫yourname的sessionscre ...
- Hadoop 系列文章(三) 配置部署启动YARN及在YARN上运行MapReduce程序
这篇文章里我们将用配置 YARN,在 YARN 上运行 MapReduce. 1.修改 yarn-env.sh 环境变量里的 JAVA_HOME 路径 [bamboo@hadoop-senior ha ...
- 前端vue框架 路由的安装及使用
安装: 1.cmd下输入: npm install vue-router --save //安装路由 2.npm run dev //重新启动 使用: 1.在mian.js下引入路由 import V ...
- Linux合上笔记本不进入休眠模式
最近一个问题困扰了我很久,入职之前和人事说过工作中会用自己的电脑,但是人事还是坚持要给我发一个电脑,没办法,公司没有补贴,那就领了吧,索性将这个笔记本配置成了Fedora系统,用来当测试机,但是一 ...
- [UWP] 用 AudioGraph 来增强 UWP 的音频处理能力
Audio Graph AudioGraph 是 Windows.Media.Audio 命名空间下提供的音频处理接口之一. 可以通过 AudioGraph 的静态方法 CreateAsync 来实例 ...