Question

我试图通过阅读dom0 event model中有关javascript的一些文章来表达我的理解。如果有错误，请纠正我。

在dom0模型中，事件处理程序可以附加到元素。只能附加一个处理程序。当事件发生时，浏览器会调用该事件处理程序。

有两种方法可以做到这一点

1.在线模型

处理程序被添加为元素的属性。例如，link element（即<a>）具有一个名为onclick的属性。我们添加一个函数hello，就像这样

<a href="#" onclick="hello();"> say hello </a>
...
<script type="text/javascript">
   function hello(){
      window.alert("Hello");
   }
</script>

这个模型的问题在于它是侵入性的，因为hello（）被放在元素的主体中。

2.traditional model

不是在元素的主体中添加事件处理程序作为元素的属性，而是通过脚本添加/删除处理程序。处理程序被分配给元素的属性，如下所示

<a href="#" id="hellolink">  say hello </a>
...
<script type="text/javascript">
    function hello(){
        window.alert("Hello");
    }
    //adding handler
    document.getElementById('hellolink').onclick=hello;
</script>

Answer 1

似乎是正确的。

您可能需要阅读： http://www.cross-browser.com/talk/event_interface_soup.php http://en.wikipedia.org/wiki/DOM_events#Traditional_model

对于传统模型中的代码，您应该有一个window.onload事件

所以

window.onload = function () {

    var el = document.getElementById('hellolink');
    if (el) {
        el.onclick = hello;
    }
};

取决于你正在使用什么浏览器函数hello可能会收到元素对象，所以如果你使用像jQuery这样的东西来处理你的dom事件，它可能会更容易。

http://api.jquery.com/click/

了解javascript的dom0事件模型

1 个答案: