原型JavaScript Event.observe-如何观察可能存在或不存在的元素

Question

我使用的是Prototype JavaScript，我有一个按钮，我想使用Event.observe方法来观察点击操作。

问题是，我想根据PHP代码中的if语句调用两个函数中的一个。我对Javascript和Event.observe方法的理解非常有限，但当试图观察不存在的元素时，代码似乎不起作用。我可以用一种非常巧妙的方式来实现这一点，如下所示：

<?php if ($_type == "forward_second"):?>
    <input type="button" id="week_backward_second" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward" value="&lt;&lt;" />
<?php else: ?>
    <input type="button" id="week_backward" value="&lt;&lt;" disabled/>
    <input type="hidden" id="week_backward_second" value="&lt;&lt;" />
<?php endif; ?>

在JavaScript中：

initialize: function {    
    Event.observe('week_backward', 'click', this.backward.bind(this));
    Event.observe('week_backward_second', 'click', this.backwardSecond.bind(this));
},

通过有一个隐藏的字段，"不必要的"Event.observe有一个元素可以观察，代码也可以工作。

有人能提出更好的方法吗？

Answer 1

我希望我能理解你的问题：）

var element = $('week_backward'),
    method = this.backward;
// Get a second element if first doesn't exist.
if (!element) {
    element = $('week_backward_second');
    method = this.backwardSecond;
}
element.observe('click', method.bind(this));

我使用了较短的Prototype API-除非你与其他库没有冲突，否则我推荐它

PS。我忘了提一下，现在你只需要打印一个按钮，而不需要隐藏的按钮。

Answer 2

1. 没有隐藏字段。观察前检查元素的存在（正如Reinmar所写）：

   initialize: function {    
       if ($('week_backward')) $('week_backward').observe('click', this.backward.bind(this));
       if ($('week_backward_second')) $('week_backward_second').observe('click', this.backwardSecond.bind(this));
   },
   

2. 没有隐藏字段。使用事件委派：

   initialize: function {
       document.on('click', '#week_backward', this.backward.bind(this));
       document.on('click', '#week_backward_second', this.backwardSecond.bind(this));
   },
   

   Observer附加到document，并接收从元素中冒出的click事件（如果存在的话）。

Answer 3

处理此问题的另一种方法是使用$$和invoke。这样，您就可以在一个只有一个或没有元素的数组上迭代，并在需要时应用该方法。

$$('#week_backward').invoke('observe', 'click', this.backward);
$$('#week_backward_second').invoke('observe', 'click', this.backwardSecond);