专栏首页从零开始学 Web 前端从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

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

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

阻止事件冒泡:在被触发事件的子元素中添加 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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从零开始学 Web 之 DOM(四)节点

    页面中的所有内容,包括标签,属性,文本(文字,空格,回车,换行等),也就是说页面的所有内容都可以叫做节点。

    Daotin
  • 从零开始学 Web 之 jQuery(二)获取和操作元素的属性

    DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

    Daotin
  • 从零开始学 Web 之 移动Web(四)实现JD分类页面

    如下面的结构:大盒子1和大盒子2分为上下结构,小盒子3和小盒子4在大盒子2的内部,分为左右结构。

    Daotin
  • Python3解析库lxml

    lxml是python的一个解析库,支持HTML和XML的解析,支持XPath解析方式,而且解析效率非常高 XPath,全称XML Path Language...

    菲宇
  • python3解析库lxml

    lxml是python的一个解析库,支持HTML和XML的解析,支持XPath解析方式,而且解析效率非常高

    嘘、小点声
  • JS事件冒泡及阻止

    当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传...

    WindrunnerMax
  • 获取标签的那些事 之 动态集合

    HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真...

    HTML5学堂
  • 多媒体播放器 VLC 4.0 将引入新用户界面

    VLC 4.0 版本将增加对主流 VR 头显的支持,并带来全新的界面。在早前举行的 FOSDEM 2019 中,VLC 总裁兼开发负责人 Jean-Baptis...

    Debian社区
  • PCL中Kd树理论

     k-d树(k-dimensional树的简称),是一种分割k维数据空间的数据结构。主要应用于多维空间关键数据的搜索(如:范围搜索和最近邻搜索)。

    点云PCL博主
  • 为何艾伦·图灵想让AI智能体故意犯错

    人工智能的历史告诉我们:随着科技的进步,机器会越来越聪明,但却鲜少涉及人类在其中发挥的重要作用,包括怎么设计机器的原型,以及怎么训练它等等。

    大数据文摘

扫码关注云+社区

领取腾讯云代金券