Question

如同问题的标题一样我有很多元素，因为我使用了getElementsByTagName('*') 然后，我在每个元素上添加了一个click事件，并且我已经使用了循环。

请参阅代码：

HTML

<div id="box">
    <span class="box"> span</span><br/>
    <span class="box">span 2</span><br/>
    <span class="box">span 3</span><br/>
</div>
<div id="result"></div>

的Javascript

var element = document.getElementsByTagName('*'),
    len = element.length, result = document.getElementById('result'), i, timer;

for (i = 0; i < len; i++) {
    element[i].addEventListener('click', fn = function (e) {
        clearTimeout(timer);
        result.style.display = 'inline';
        result.innerHTML = "<pre>" + e.target.innerHTML + "</pre>";
        timer = window.setTimeout(function () {
            result.style.display = 'none';
        }, '2000');
        e.target.removeEventListener('click', fn);
    });
}

我想在用户点击特定元素时实现事件一次，然后仅从此元素中删除事件。
另外，我想自动将函数（回调）名称添加到removeEventListener函数，而不是e.target.removeEventListener('click', fn) //fn is the callback name。

Answer 1

使用元素的上下文调用事件回调，您已向其添加了侦听器，此处this将指向element[i]，因此您可以将其更改为：

element[i].addEventListener('click', function fn(e) {
    //your stuff
    this.removeEventListener('click', fn);
});

请注意，如果你以这种方式创建fn函数，它在函数体中是私有的，我们过去常常使用arguments.callee这不是一个好习惯，你不能使用它在strict mode。

我所说的就是strict mode出现以来的时间：

第5版ECMAScript（ES5）禁止使用arguments.callee（）严格模式。

我们可以这样做：

element[i].addEventListener('click', function(e) {
    //your stuff
    this.removeEventListener('click', arguments.callee);
});

但新的替代方案是使用函数的标签，例如，如果你这样做：

var myfunc = function func(){
     //you have access to the current function using func
     //and you can add or remove it to/from something
     someThing.removeEventListener('click', func);
};
//but if you want to do it here you can have it using myfunc
someOtherThing.removeEventListener('click', myfunc);

这就是我的意思：

函数体中的私有

您可以使用标签func访问函数体中的该函数，但是在代码中您没有它。

Answer 2

将函数定义为变量之前。 http://jsfiddle.net/m8UgC/

var element = document.getElementsByTagName('*'),
    len = element.length, result = document.getElementById('result'), i, timer;
var fn = function (e) {
        clearTimeout(timer);
        result.style.display = 'inline';
        result.innerHTML = "<pre>" + e.target.innerHTML + "</pre>";
        timer = window.setTimeout(function () {
            result.style.display = 'none';
        }, '2000');
        this.removeEventListener('click', fn);
    }
for (i = 0; i < len; i++) {
    element[i].addEventListener('click', fn);
}

我想单击以实现该事件一次，然后从单击的元素中删除事件

2 个答案: