大家好，这里是「 从零开始学 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（七）事件冒泡，事件参数对象，链式编程原理
原文地址：https://www.cnblogs.com/lvonve/p/9300412.html