pau*_*reg 8 html javascript events event-binding
我看到了在JavaScript中设置事件的两种主要方法:
直接在标记内添加事件,如下所示:
<a href="" onclick="doFoo()">do foo</a>
通过JavaScript设置它们,如下所示:
<a id="bar" href="">do bar</a>
并在该<script>部分内部<head>或外部JavaScript文件中添加一个事件,如果您正在使用prototypeJS:
Event.observe(window, 'load', function() {
$('bar').observe('click', doBar);
}
我认为第一种方法更容易阅读和维护(因为JavaScript操作直接绑定到链接)但它不是那么干净(因为即使页面没有完全加载,用户也可以点击链接,这可能会导致JavaScript错误在某些情况下).
第二种方法更清晰(在页面完全加载时添加操作)但是更难以知道操作链接到标记.
哪种方法最好？
一个杀手的答案将完全赞赏!
我认为第一种方法更易于阅读和维护
我发现事实恰恰相反.请记住,有时会将多个事件处理程序绑定到给定控件.
在一个中心位置声明所有事件有助于组织网站上发生的操作.如果您需要更改某些内容而不必搜索所有调用函数的位置,则只需在一个位置进行更改即可.添加更多应该具有相同功能的元素时,您不必记住向它们添加处理程序; 相反,它通常足以让它们声明一个类,甚至根本不更改它们,因为它们逻辑上属于一个容器元素,所有子元素都连接到一个动作.从实际代码:
$$('#itemlist table th > a').invoke('observe', 'click', performSort);
这将事件处理程序连接到表中的所有列标题,以使表可排序.想象一下,努力使所有列标题可以单独排序.
根据我的经验，主要有两点：
1）最重要的是保持一致。我认为这两种方法不一定更容易阅读，只要你坚持下去。只有当这两种方法都在项目中使用时（或者在同一页面上使用更糟糕）时，我才会感到困惑，因为那时我必须开始搜索调用，并且不立即知道在哪里查找。
2) 第二种，Event.observe()即当对多个事件采取相同或非常相似的操作时具有优势，因为当所有这些调用都在同一位置时这变得明显。此外，正如康拉德指出的那样，在某些情况下，这可以通过一次调用来处理。