jQuery on 事件的灵活应用

Posted 2021-04-08 游弋耗子

“ 说爱不释手恐怕一点儿都不为过吧。。。”

        在之前的开发过程中会遇到这样的情况，我们需要想页面中动态的添加一些元素节点，然后在给新添加的元素节点添加事件。使用旧版本的jQuery插件解决的话会有一个 live()事件，当时感觉这个超级好用，后来被取消之后还略感惋惜，就在寻找新的替代方法，按照官方的推荐是使用on()事件代替，抱着试试的态度入了手，然后。。然后就黏上了。

        根据手册上的说明：

          on(events,[selector],[data],fn);
          events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
          selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
          data:当一个事件被触发时要传递event.data给事件处理函数。
          fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

            上面的藐视只是简单的说明，进行些实例模拟证明下这个方法的好用才是王道。
    html代码的话依赖于Bootstrap框架的导航组件。

01

—

on 事件的应用示例

1. 为导航菜单添加 hover 事件。

        html 代码：

    javasctipt 代码：

最终结果展示：

        在这个示例中直接定位到了需要添加事件的a标签元素上，如果想要为a标签元素添加鼠标划过事件还有另一种方法，利用 selector参数；

2. 使用选择器功能，为元素添加事件。

    javascript 代码：

    最终展示效果：

        从上面的示例中可以很明显的看出事件被委派到 a 元素标签上。那如果有个新添加一个元素会有怎样的效果呢？修改代码查看。

3. 为新元素添加事件：

    其实只要写好了事件委派，在新加元素节点之后，自然而然的就会有相应的事件产生作用。

    html 代码，添加一个按钮。

    javascript 代码，这段代码新加了一个事件，就是点击按钮以后向现有的导航中添加一向新的导航菜单项。

最终展示结果：

        由结果可以看出，新添加的元素也完全不受影响。

        既然示例使用的是导航，导航既有切换功能，让我们用上面介绍过的一起实现它。

4. 实现导航菜单的点击切换功能。

    利用上面所说的方法，实现菜单切换与选中。

    html 代码：

    javascript 代码：

    最终展示效果：

    即使新添加的菜单项也能正常使用。

        简单轻松的实现了菜单切换，但是需求往往并不总是尽人意，如果说排除某一项菜单的点击事件，总不能为了这一个事件做牺牲，依次给其他事件添加吧，其实 on 事件也有解决的方法，话不多说，示例如下。

5. 将某个子元素从委托事件中排除。

    在现有的需求中，给定 Fourth 这个菜单项不能被点击切换，安排其他的任务事件，这时该如何操作？

    一句话，将它排除出去就好了。

    javascript 代码，注意 selector 参数项的改变：

    点击 Fourth 项，最终展示效果：

        发现并没有效果和输出成功代码，点击其他项之后是有日志信息输出的，由此可以证明操作成功。

02

—

更多内容说明

        on 事件还有更多好玩有趣的使用方法，对于使用jQuery框架开发的小伙伴来说，使用on为元素添加事件是再方便不过的了，由于今天时间有限，先更新这么多，后期会有其他的使用方法进行介绍。