javascript - prototypejs - 使用类为按钮创建点击事件

Question

我尝试过这样的:

Event.observe('.add_select_row', 'click', function() {
    console.log("KLICK!");
});

但我得到“未捕获的类型错误:无法读取未定义的属性'get'”

我也尝试过:

Event.observe('add_select_row', 'click', function() {
    console.log("KLICK!");
});

...和...

Event.observe($('.add_select_row'), 'click', function() {
    console.log("KLICK!");
});

http://api.prototypejs.org/dom/Event/observe/

Answer 1

Event.observe 需要 DOM 元素或 DOM 元素的 id 才能工作。如果要将单击事件监听器绑定(bind)到共享相同类名的一个或多个元素的集合，则需要以不同的方式构造监听器，或者将唯一的监听器绑定(bind)到共享该类名的每个元素。

执行您在此处描述的操作的最简单方法是将 ID 添加到您要监听的元素。如果您做不到这一点，那么您可以重写您的监听器，以便它以不同的级别进行响应:

$(document).observe('click', '.add_select_row', function(evt, elm){
  // evt is now bound to the click event, so you could keep it from bubbling:
  evt.stop();
  // elm is now bound to the element with the classname add_select_row
  // that triggered the click, so you can do something with that
  elm.addClassName('clicked');
  console.log('CLICK');
});

这种模式被称为“惰性观察者”，它利用了点击事件冒泡并最终被文档本身捕获的事实。您也不限于为此使用该文档。您还可以在按钮的任何父元素上设置这种观察者，例如:

$('foo').on('click', '.add_select_row', function(evt, elm){});

如果您在该按钮的某个祖先级别上有一个 div#foo。

此模式的好处是，您最终不会将单独的观察者绑定(bind)到页面中共享该类名的每个元素。只要您希望每个观察者都做同样的事情，一个观察者就可以处理任意数量的可观察元素。

如果您确实希望每个按钮都有一个单独的观察者，您可以为每个按钮指定一个唯一的 ID。如果这不切实际，您可以这样做(但不要这样做——当您只对一个元素感兴趣时，为多个元素创建观察者是一种浪费):

$$('.add_select_row').each(function(elm){
  elm.observe('click', function(evt){
    console.log('CLICK');
  });
});

Prototype 中的“双元”方法允许您使用类名或任何其他 CSS 选择器来标识页面上的元素集合。即使页面上只有一个返回的匹配元素，它也总是返回一个包含该元素的数组。这类似于 jQuery 如何看待 DOM，在 Prototype 1.7 及更高版本中，使用相同的 Sizzle CSS 选择器库来选择元素。