在javascript或者jQuery中绑定按钮点击事件，和在HTML 标签中直接调用onclick属性有什么区别？

RT，做Web开发经常能遇到需要给一个按钮绑定一个点击事件的情况。

例如HTML标签：

<button type="submit" id="foo">Bar</button>
第一种，如果使用jQuery绑定点击事件的一种做法是：

$("#foo").click(function(event) {
/* Act on the event */});

第二种，纯js的做法可以是这样：

document.getElementById('#foo').addEventListener('click', function() {
/* Act on the event */}, false);

第三种，我们也可以直接在button标签中使用onclick，例如：

<button id="foo" onclick="dosomething()">Bar</button>
同时在head或者单独的js文件中定义dosomething()

function dosomething(){/* Act on the event */}
请问从响应速度，后期维护等方面来看哪一种方法是best practice? 或者在什么情况下这几种方法最合适？