将按钮绑定到javascript函数

Question

我在html中有一个按钮：

<button id="MyButton" onclick="return DoSomething()">Click Me</button>

将“onclick”属性放入html或使用javascript / DOM将回调附加到按钮点击是否更好？

Answer 1

最好通过JavaScript附加它。这属于“Unobtrusive JavaScript”类别。 （更具体地说，这里是行为与布局的分离）

document.getElementById('YourID').onclick = nameOfFunctionToBeCalled;

Answer 2

赞成分离表示和逻辑，我建议你通过Javascript绑定事件：

document.getElementById("MyButton").onclick = function(){
  alert("Button Clicked");
}

将您的Javascript和CSS保留在HTML之外，您将成为更快乐的开发人员。这种方法允许程序员编写Javascript和设计师来构建结构和样式。你不想把编程放到设计师手中（这就是内联javascript所发生的事情）。

Answer 3

jQuery click()

怎么样？

$('#MyButton').click(DoSomething);

Answer 4

这是一个更好的做法，纯粹在Javascript中执行此操作，并保持您的标记清洁。如果您使用单独的.js文件，这也可以避免担心HTML中的内联JS代码问题。

使用原始DOM非常简单：

document.getElementById( "MyButton" ).onclick = DoSomething;

Answer 5

我使用ondomready事件来分配我的所有事件，通常在一个单独的脚本中进行squirreled。我的所有逻辑都在一个地方，我的标记看起来也更加整洁。我认为标记仅用于描述页面的初始结构。代码存在于代码文件中，样式属于css文件。