jQuery 事件的命名空间

suemi 发布于2019-08-19 14:23 / 3302人阅读

摘要：但是如果你不知道这个函数的名字，或者你用的是匿名函数怎样才能精确地解绑某一个事件监听器呢该了解一下的事件命名空间了先上代码这里不只是把事件作为参数传入方法，而是给事件指定了一个命名空间，然后监听了这个命名空间里的事件。

用 jQuery 绑定和解绑事件监听器都是非常简单的。但是当你为一个元素的一个事件绑定了多个监听器时，怎样精确地解绑其中一个监听器？我们需要了解一下事件的命名空间。

看下面这段代码：

$(“#element”)
    .on(“click”, doSomething)
    .on(“click”, doSomethingElse);

像上面这样绑定事件监听器，当元素被点击时，doSomething 和 doSomethingElse 这两个监听器都会被触发。这是使用 jQuery 的一个便利之处，可以随时给元素的同一个事件添加不同的监听器。不像用 onclick 那样，新的监听器会覆盖旧的。

如果你想解绑其中一个监听器，比如 doSomething，怎么做呢？

是这样吗？

$(“#element”).off(“click”);

注意！上面这行代码会把元素的 click 事件的所有监听器全部解绑，而这并不是我们要的结果。

幸运的是 jQuery 的 .off() 方法可以接受第二个参数，就像 .on() 一样。只要把监听器函数的名字作为第二个参数传入 .off() 方法，就能够解绑指定的监听器。

$(“#element”).off(“click”, doSomething);

但是如果你不知道这个函数的名字，或者你用的是匿名函数：

$(“#element”)
    .on(“click”, function() {
        console.log(“doSomething”);
    });

怎样才能精确地解绑某一个 click 事件监听器呢？该了解一下 jQuery 的事件命名空间了！

先上代码：

$(“#element”)
    .on(“click.myNamespace”, function() {
        console.log(“doSomething”);
    });

这里不只是把 click 事件作为参数传入 .on() 方法，而是给 click 事件指定了一个命名空间，然后监听了这个命名空间里的 click 事件。此时，即使监听器是匿名函数，实际上它也是“有名”的了。现在你可以像下面这样解绑某一个具体的命名空间里的事件监听器了。

$(“#element”).off(“click.myNamespace”);

这是 jQuery 为我们提供的又一个方便而强大的功能，它的内部实现肯定很有意思！

编译自：CSS-Tricks

云服务器 GPU云服务器 jquery的事件处理 webrtc的命名空间 js里的命名空间 c语言的命名空间

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77952.html

jQuery (二)

摘要：文件命名需要使用的库该库已经两年未更新了，不过依旧在回复中，对于库的检查，已经完全测试通过一个栗子，日期选择将为中的元素统统替换为日期选择组件使用jQuery处理事件事件处理一个栗子，单击p时背景变成灰色由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html hello world js // 单击...

asoren 2019-08-23 11:28 评论0 收藏0
jQuery扩展

摘要：传递一个可拓展的默认对象参数而不是大量的参数给插件。始终命名空间的方法，事件和数据。 jq--CDN jQ -- jQuery源码解析 1、jQuery.extend() 与 jQuery.fn.extend()把jQuery看成一个封装js类这样好理解$.extend是扩展的jQuery这个类为jQuery类添加类方法可以理解为静态方法只跟这个类本身有关跟具体的实例化对象是...

hss01248 2019-08-26 13:35 评论0 收藏0
jQuery之事件绑定到触发全过程及知识点补充

摘要：十的触发机制被点击了元素本身绑定了一个事件，但是是原生事件，它是靠绑定来触发事件的。 showImg(https://segmentfault.com/img/remote/1460000019505402); 前言：最重要的还是最后的流程图，可以试着根据流程图手写实现$().on()，下篇文章会放出模拟实现的代码。一、举例这是A 这是C ...

Jioby 2019-08-23 18:10 评论0 收藏0
jQuery源码学习之event

摘要：回调队列中的元素是对象，代表一个事件回调，拥有多个属性，如等等，其中是回调函数，在触发时通过传递，具体的在后面讲。类型是时键表示事件名，规则同上，键值表示事件触发时的回调函数。 jQuery源码学习之event jQuery的事件机制为异步回调，事件监听的属性、参数和回调的等保存在Data实例中，在元素上保存该对象的引用。有方法handle，内部执行dispatch；有属性events...

XboxYan 2019-08-26 12:11 评论0 收藏0