js click 與 onclick 事件綁定,觸發與解綁

 

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 綁定點擊事件的方法

方法一:把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 觸發點擊事件

除了手動點擊外,js也可以觸發點擊事件

1. .onclick()

document.getElementById("btn2").onclick();

這種只會觸發onclick事件

 

2. .click()

document.getElementById("btn2").click();

這種會先出發onclick事件,再觸發click事件

 

js  解綁點擊事件的方法

解綁onclick

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

 

解綁click

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

 

 

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