常规样式
<a href="#" id="myLink" onclick="myFunc();">click me</a>
function myFunc() {
alert('hello!');
}
jQuery风格
<a href="#" id="myLink">click me</a>
$(document).ready(function() {
$("#myLink").click(function() {
alert('hello!');
});
});
我刚开始使用jQuery，但我想知道这两者之间的区别。我应该选择jQuery方法吗？这样做有什么优势吗？
在我看来，使用jQuery方法阅读html时，无法了解链接的作用，这一点我不太喜欢。当需要绑定多个元素时（例如：$("#myTable tr").click(function(e) {...});），我发现jQuery附加方法非常有用，但是当处理单个元素时，我不知道应该使用哪种方法。
我喜欢第二种方法，有几个原因。
把所有的javascript内容放在一个地方，这样当你阅读HTML时不知道点击链接会发生什么，但反过来，如果你在内联中定义事件处理程序，那么当你阅读javascript时，你也不知道函数将在何时被调用。我喜欢尽可能地将我的“层”分开。
它促进了所谓的“不冒犯性JavaScript”，以及应用的优雅退化。 优雅退化（或“渐进增强”）的想法是，您使链接成为一个真正的链接，可以转到单独的页面，但然后您使用javascript劫持单击事件，并提供相同的功能而不离开页面。 这样，如果用户没有javascript（例如他们是使用屏幕阅读器的残障用户），应用程序仍然可以工作。
它使javascript更具可重用性。例如，假设我基于一些通用的东西（如CSS类）定义要绑定事件处理程序的元素。 然后，我可以将该javascript放置在各种页面上并使其“正常工作”。 我经常为自动保存等事情做到这一点。
我知道你的顾虑，因为我曾经有过类似的担忧，并决定使用Jquery和命名空间来绑定来自JavaScript命名空间的事件。这就是我如何解决将事件钩子绑定到单个元素以及将事件钩子绑定到具有相同类或标记名称的多个元素。
基本上，我给我的点击、悬停、鼠标悬停等事件命名空间，然后在我的document.ready中调用这些命名空间事件。这样做的原因是我可以从一个地方查看所有的点击、悬停、鼠标悬停事件。
<script type="text/javascript">
var Page1 = {
Events: {
click: {
elementid: {
func: function(evt) { //where elementname is the id of your element
//your code here
},
selector: "#someId"
}
elementclass: {
func: function(evt) { //where elementclass is the class of your element(s)
//your code here
},
selector: ".someClass"
},
mouseover: {
//similar to click namespace
},
mouseout: {
//similar to click namespace
},
....
}
};
$(document).ready(function() {
for (var key in Page1.Events) {
for (var eventKey in Page1.Events[key]) {
$(Page1.Events[key][eventKey].selector).bind(key, Page1.Events[key][eventKey].func);
}
}
});
</script>
现在这个好处是你只需将事件添加到你的命名空间中，它们就会自动在文档准备好时被挂钩上。你还可以用Live或delegate替换$.bind调用，以便挂钩到未来的DOM元素。
myLink并不能说明太多问题，但是helloLink能清晰表达其目的。 - user113716