有没有办法在Web浏览器中一次删除所有事件侦听器?

时间:2014-07-30 10:03:30

标签: javascript

这里简单的好奇心。没什么太严重的。

构建新应用。客户端配置文件应提供terminateOnError参数。如果设置为true,则在记录错误后,整个世界应该停止。

离开我的showTerminationScreen函数而不执行任何后续代码应该非常简单:只需抛出未处理的异常。

然而,该应用程序可能(将...)持续异步事件,其中一些我无法控制(我拥有应用程序的一半;另一半是或多或少的封闭源代码):计时器,http请求等待回来等。

是否有一种简单的方法可以告诉浏览器停止收听到目前为止一直在跟踪的任何内容?

2 个答案:

答案 0 :(得分:1)

这个问题有两个基本的解决方案:

  1. 使用event delegation,这样整个页面上只有一个元素可以附加事件处理程序。

  2. 确保每个JavaScript功能都是模块化的,可以随心所欲地分离事件处理程序,然后在以后重新附加它们。

  3. 活动委派

    Just searching GitHub为您提供了大量的事件委派选项。有些需要jQuery。有些人不会。

    <self-promotion type="shameless">

    我创建了Oxydizr,这是一个不需要jQuery的事件委托库,但确实需要面向对象的JavaScript。它利用HTML5属性来定义哪些用户操作导致JavaScript中的方法调用。

    </self-promotion>

    编写模块JavaScript代码

    您可能需要重构JavaScript,以便初始化和取消初始化:

    示例JavaScript:

    function Foo(element) {
        this.element = typeof element === "string"
            ? document.getElementById(element)
            : element;
        this.handleDeleteItem = this.handleDeleteItem.bind(this);
        this.init();
    }
    
    Foo.prototype = {
    
        constructor: Foo,
    
        init: function() {
            var items = this.element.querySelectorAll("button.delete-item"),
                length = items.length, i = 0;
    
            for (i; i < length; i++) {
                items[i].addEventListener("click", this.handleDeleteItem, false);
            }
        },
    
        uninit: function() {
            var items = this.element.querySelectorAll("button.delete-item"),
                length = items.length, i = 0;
    
            for (i; i < length; i++) {
                items[i].removeEventListener("click", this.handleDeleteItem, false);
            }
        },
    
        handleDeleteItem: function(event) {
            event.preventDefault();
            // ... do other stuff
        }
    
    };
    

    HTML:

    <ul id="foo">
        <li>Item 1
            <button class="delete-item">X</button>
        </li>
        <li>Item 2
            <button class="delete-item">X</button>
        </li>
    </ul>
    

    用JavaScript来解决问题:

    var foo = new Foo("items");
    

    发生错误时:

    foo.uninit();
    

    如果您可以继续使用该页面:

    foo.init();
    

    对于定时器和Ajax请求,您需要跟踪所有这些对象并清除定时器,并手动取消AJAX请求。

    编辑#1

    由于应用程序的大部分基本上是黑盒子,因此这成为架构和通信问题。如果&#34;黑暗的一半&#34;是您的公司控制的东西,您需要与该团队合作并制定解决方案。如果他们使用JavaScript框架,请询问他们使用哪个框架并开始学习该框架。您可以深入了解框架的低级API并发现解决方案。在这种情况下,逆向工程的艺术是你的朋友。

答案 1 :(得分:0)

不是100%肯定,但我认为

  

$(&#34; *&#34)。取消绑定();

应该有效。