click 與 onclick

1.onclick 事件會在對象被點擊時發生。

<input id="btn1" type="button" onclick="test();" />

function test() {
    alert("我是行間事件");
}

當點擊id="btn1"時,觸發onclick事件

2.onclick事件會在click事件之前執行

<input id="btn2" type="button" onclick="test();" />

var btn2 = document.getElementById(‘btn2‘);
btn2.addEventListener(
 
‘click‘, showMsg, false); //鼠標單擊的時候調用showMes這個函數  
function showMsg() {
    alert("事件監聽");
}

當點擊id="btn2"時,先執行onclick事件的方法test(),再執行click事件的showMsg()方法;

js 綁定點擊事件的方法

方法1:把onclick綁定在標簽上

不建議把onclick直接綁定在標簽上

HTML元素行間事件（也可以叫HTMl事件處理程序）,直接在html標簽裏添加事件。

缺點：html和js代碼緊密耦合

<input id="btn1" type="button" onclick="test();" />

方法二:onclick的js綁定辦法

//把一個函數賦值給一個事件處理程序屬性。（這種方式也叫做Dom0級事件處理程序）
var btn1 = document.getElementById(‘btn1‘);
function abc() {
    alert(‘abc‘);
}
btn1.onclick = abc; //當點擊的時候執行abc這個函數，等價於 btn1.onclick=function abc(){alert(‘abc‘);}
//btn1.onclick = null； //去掉綁定的事件

方法三:click的js綁定辦法(js的話推薦這種)

//通過“事件監聽”的方式來綁定事件（也叫Dom2級事件處理程序）
 

var btn2 = document.getElementById(‘btn2‘);
btn2.addEventListener(‘click‘, showMsg, false); //鼠標單擊的時候調用showMes這個函數  
function showMsg() {
    alert("事件監聽");
}
//btn2.removeEventListener(‘click‘, showMsg, false); //去除綁定

js 解綁點擊事件的方法

解綁onclick

btn1.onclick = null； //去掉綁定的事件

解綁click

btn2.removeEventListener(‘click‘, showMsg, false); //去除綁定

參考文章:http://blog.csdn.net/u014205965/article/details/45651875

js click 與 onclick 事件綁定與解綁