javascript - 原型(prototype)因更改事件问题而起火

Question

这是我的js文件内容:

window.onload = function() {
    obj = document.getElementById("_accountwebsite_id");
    Event.observe(obj, 'change', function () {
        alert('hi');
    });
}

我想触发我的下拉菜单的更改事件: _accountwebsite_id 。原型(prototype)库是在此文件之前加载的。我在控制台中没有收到任何错误。我哪里错了？谢谢

Answer 1

您在这里做了很多 Prototype 为您做的额外工作。首先，设置文档的 onload 方法不仅非常老式，而且还会破坏之前设置的该事件的观察者。

$(document).observe('dom:loaded', function( ... ){...});

...是将一个(或多个)事件监听器注册到文档加载事件的现代方法。

接下来，您将在此处使用 getElementById，该方法可以工作，但在某些浏览器中不会返回原型(prototype)扩展对象。

$('element-id'); 

...如果您的浏览器未能尊重原型(prototype)继承的各个方面，则将获取元素引用并扩展它。

最后，通过使用延迟观察者，整个事情可以变得更简单、更安全。想象一下，如果您的界面 DOM 通过 Ajax 进行了更新，那么您的观察者就会错过此 select 元素触发的事件，因为即使 ID 匹配，它也没有引用相同的 (===) 元素。

$(document).on('change', '#_accountwebsite_id', function(evt, elm){
  alert(elm.inspect());
});

该观察者将响应具有正确 ID 的元素上的任何更改事件，即使它是在观察者注册到文档之后添加的。