如何在javascript中创建一次性事件

有时候在我们页面中,一个事件只需要被调用一次。例如,点击一个缩略图来载入播放的视频,或者点击'more'标签用AJAX获取更多内容。然而,你可能会定义一个每次事件发生时都能被调用的事件。这样可能会产生一些问题,可能你的程序效率不高,浏览器占用了一些不必要的资源。最坏的情况可能会出现一些意想不到的事,或者重复载入已经存在的内容。

幸运的是,在javascript中建立一次性事件是比较简单的事。过程如下:

  • 将一个事件处理器分配给一个元素,例如点击一个元素
  • 元素被点击时,处理器被调用
  • 移除处理器。未来在元素上执行点击操作时不再调用函数

jQuery

让我们来看一个最简单的实现方法。如果你使用jQuery,那么你就可以直接使用jQuery中的one()事件来创建一个一次性事件了。

$("#myElement").one("click",function(){
	alert("该事件只会被执行一次!");
})

它和其他jQuery事件方法类似。更多内容可以查看官方API

###自移除事件处理器

如果你使用原生的javascript,任何移除自身的处理函数都可以直接使用一条简单的代码。

document.getElementById("myElement").addEventListenter("click",handler);
// handler函数
function handler(e){
	// 移除这个函数
	e.target.removeEventListenter(e.type,auguments.callee);

	alert("该事件只会被执行一次!");
}

假设你的事件处理器的参数为e,下面这行代码:

e.target.removeEventListenter(e.type,auguments.callee);

将会在它第一次调用时移除事件处理器。无论你的事件类型以及处理器名称是什么都没关系,它甚至可以是一个行内匿名函数。

注意我的这个标准事件处理程序在IE8以下是不能工作的。旧版IE需要用一个叫做detachEventand的方法来调用并且事件类型需要加上on前缀。例如:onclick。但是,如果你是想支持旧版IE浏览器,你可能会使用jQuery,或者使用你自己定义的事件处理程序。

如果你比较注重灵活的话,自移除事件处理器是最好的选择。

一个一次性事件创建函数

就像我一样,你可能会偷懒,或者忘了给这些一次性的事件处理器挨个加上移除处理器的方法。现在我直接创建一个函数来为我们完成这项烦人的工作。

function onetime(node,type,callback) {
	// 创建事件
	node.addEventListenter(type,function(e) {
		// 移除事件
		e.target.removeEventListenter(e.type,arguments.callee);
		// 回调函数
		return callback(e);
	})
}

我们现在就可以使用这个函数了,当我们需要创建一次性处理程序:

// 调用onetime函数
onetime(document.getElementById("myElement"),"click",handler);
// handler函数
function handler(e) {
	alert("该事件只会被执行一次!");
}

即使你并不需要在每个页面中都使用一次性事件,为JavaScript提供多种解决方案也是一件好事吧!


 

原文:《How to Create One-Time Events in JavaScript

译者:卓文理

如需转载烦请注明出处:www.zhuowenli.com