将按钮绑定到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 点击（）

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

Answer 4

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

使用原始DOM非常简单：

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

Answer 5

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