从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理

时间 2019-11-17

标签开始 web jquery 事件冒泡参数对象链式编程原理栏目 HTML 繁體版

原文原文链接

你们好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新......html

github：https://github.com/Daotin/Web

微信公众号：Web前端之巅

博客园：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！前端

1、事件冒泡与阻止事件冒泡

事件冒泡：当一个元素触发某个事件的时候，会把这个事件传播到其父元素，一直到顶层元素。jquery

阻止事件冒泡：在被触发事件的子元素中添加 return false; 便可。git

2、事件的触发

以前讲的绑定事件是事件触发后的事件处理过程，而且上面的事件触发是被动的事件触发，怎么能够主动触发事件呢？github

文本框的获取焦点事件的触发：编程

// 方式一
文本框元素.focus();
// 方式二
文本框元素.trigger("focus");
// 方式三
文本框元素.triggerHandler("focus");

PS：方式一和方式二，均可以获取文本框的焦点，而且触发浏览器的默认行为（光标闪烁）；而方式三，能够获取文本框的焦点，可是不能触发浏览器的默认行为。浏览器

3、事件参数对象

事件处理函数有没有参数呢？微信

经过 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

4、链式编程的原理

链式编程就是一个对象调用方法后还能够继续调用方法。这就要求对象调用方法后的返回值仍是这个对象，那么这个方法内部是如何实现的呢？

其实很简单：就是在最后返回调用其的对象。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>