我正在使用addEvent("keydown", function() {});
将事件动态添加到元素。我的问题是,有时在同一元素上两次或多次运行此代码。由于为该事件注册的函数运行了几次,因此行为变得笨拙。
我是否有办法只在一个元素上仅运行一次以上代码?也许检查事件是否已经添加过?
要么不要每次都使用新功能,要么不使用类或其他东西告诉您已添加它。
MooTools的addEvent
是addEventListener
/ attachEvent
上的一个相当薄的包装器,它不会两次添加相同的功能。因此,如果确保使用相同的功能,则可以再次调用addEvent
,而无需执行任何操作:
// Somewhere it's created **once**
function keyDownHandler() {
// ....
}
然后:
element.addEvent("keydown", keyDownHandler); // Adds it only if not there
实时示例:
addIt();
addIt();
function addIt() {
$("foo").addEvent("click", handler);
}
function handler() {
var p = document.createElement('p');
p.innerHTML = new Date();
document.body.appendChild(p);
}
<div id="foo">Click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.0/mootools-yui-compressed.js"></script>
if (!element.hasClass("keydown-handler")) {
element.addClass("keydown-handler").addEvent("keydown", function() { /*...*/});
}
实时示例:
addIt();
addIt();
function addIt() {
var element = $("foo");
if (!element.hasClass("click-handler")) {
element.addClass("click-handler").addEvent(
"click",
function() {
var p = document.createElement('p');
p.innerHTML = new Date();
document.body.appendChild(p);
}
);
}
}
<div id="foo">Click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.0/mootools-yui-compressed.js"></script>
也许您的问题不是添加事件处理程序的位置或时间,而是如何添加。可以将事件委托给父元素。例如,这是将事件处理程序直接添加到目标元素的经典方法。
new Element( 'p', { 'text': 'Some Text' } ).inject( $( 'container' ) );
$$( '#container p' ).addEvent( 'click', function() {
console.log( this );
});
new Element( 'p', { 'text': 'Some Text' } ).inject( $( 'container' ) );
当然,只有第一段具有单击事件。
下面是事件委托的示例。
$( 'container' ).addEvent( 'click:relay(p)', function() {
console.log( this );
});
$( 'container' ).adopt([
new Element( 'p', { 'text': 'Some Text' } ),
new Element( 'p', { 'text': 'Some Text' } )
]);
由于将事件侦听器分配给了其所有子级的父级,所以无论在何时何地创建它们,所有段落都将具有click事件。将元素动态添加到页面中时,这非常有用。
我不知道这有多大帮助,但是很高兴知道。