0

在使用来自不同页面的不同 ID 时，我遇到了 DOMREADY 的问题。例如

JS

var clickFunction = function(){
//put whatever you want to happen in here
alert('this element now recognizes the click event');
}

window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});

window.addEvent('domready', function() {
$('id_2').addEvent('click', clickFunction);
});

HTML案例1

<body>    
<div id="id_name"> <a onclick="javascript:void(0);">link1</a></div>
<div id="id_2"> <a onclick="javascript:void(0);">link2</a></div> 
</body>

单击link2时它工作正常

案例2

<body>   
<div id="id_name"> <a onclick="javascript:void(0);">link1</a>     </div> 
</body>

当点击link1时它工作正常

案例3

<body>   
<div id="id_2"> <a onclick="javascript:void(0);">link2</a>     </div> 
</body>

它不起作用

4

1 回答 1

1

因为您实际上并没有保护自己免受异常的影响。

window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});

window.addEvent('domready', function() {
$('id_2').addEvent('click', clickFunction);
});

首先，你不需要 2 个 domready 函数。它们堆叠起来，但你可以使用一个。

window.addEvent('domready', function() {
    $('id_name').addEvent('click', clickFunction);
    $('id_2').addEvent('click', clickFunction);
});

但是，您所做的仍然是错误的，因为它在没有任何检查的情况下耦合到 DOM。

你假设$('id_name')将返回一个对象，然后你立即调用它的 .addEvent 方法。它适用于案例 1，因为这是在运行时评估的第一行。

在您的第二个文件中，如果不会到达 id_2 add 事件，因为 id1 将尝试在非元素上调用 addEvent （它不在 dom 中），所以为空。这会导致异常，并且您的 javascript 永远不会完成。

你有3种保护自己的方法。

1. 使用元素集合。

document.getElements('#id_2,#id_name').addEvent('click', clickFunction);

这将尝试同时获得两者，但它会在迭代结果时对其中一个或一个都不满意。如果选择器返回 0 个元素，它根本不会循环

2. 传递对 var 的引用，看看它是真还是空

var id_name = document.id('id_name');
if (id_name) {
    id_name.addEvent('click', clickFunction);
}

// or write as
id_name && id_name.addEvent();

3. 将事件委托给父元素。

好处是，只有 1 个事件绑定可以处理 n 个元素，这些元素稍后可能通过 ajax 或动态元素构造函数出现。

例如。

$('menu').addEvent('click:relay(#id_name,#id_2)', function(event, element){
    // do something.
});
于 2012-09-25T23:49:08.137 回答