在JavaScript中，有三種常用的綁定事件的方法
第一種辦法
函數(shù)寫在結(jié)構(gòu)層里面
非常不好，使頁面很混亂，行為與結(jié)構(gòu)得不到分離
<input type="button" onclick="func();">
綁定事件的第二種辦法
好處：行為與結(jié)構(gòu)開始分離
缺點：
第二種綁定方式中只能給一個時間綁定一個處理函數(shù)
即.onclick = fn1; . onclick = fn2 最終的效果是onclick = fn2
<select name="xueli" > <option value="">請選擇學(xué)歷</option> <option value="大學(xué)" >大學(xué)</option> <option value="中學(xué)">中學(xué)</option> <option value="初中">初中</option> <option value="小學(xué)">小學(xué)</option> </select><form action=""> <p>Email:<input type="text" name="email"> 姓名：<input type="text" name="ming" > </p></form>
document.getElementsByTagName('select')[0].onclick= function (){ alert('嘻嘻'); }document.getElementsByName('email')[0].onblur=function (){ alert('哈哈哈');}window.onload = function(){ var d = document.getElementById('school'); function fn1(){ alert('hello'); } function fn2(){ alert('world'); } d.onclick = fn1;//賦值操作 最終顯示fn2 d.onclick = fn2;}綁定事件的第三種辦法
//錯誤寫法1window.onload = function(){ var d = document.getElementById('school'); function fn1(){//this此時指向window this.style.background = 'blue'; } function fn2(){//this此時指向window this.style.background = 'red'; } //寫一個匿名函數(shù) //最終的出現(xiàn)錯誤 d.onclick = function (){ fn1(); fn2(); //fn1 fn2是屬性window的 實際上是這樣 window.fn1() window.fn2() }}下面這種寫法沒有問題 但是給DOM樹額外增加了兩個變量
window.onload = function(){ var d = document.getElementById('school'); d.fn1 = function (){//fn1是d的屬性 最終this此時指向DOM對象 this.style.background = 'blue'; } d.fn2 = function (){//this此時指向DOM對象 this.style.background = 'red'; } //匿名函數(shù) 調(diào)用上面兩個函數(shù) d.onclick = function (){ this.fn1(); this.fn2(); }}不在使用onclick
window.onload = function(){ var d = document.getElementById('school'); //達到了一次綁定兩個函數(shù) d.addEventListener('click',function () {alert('blue');this.style.background ='blue'}); d.addEventListener('click',function () {alert('red');this.style.background ='red'}); }去除綁定 不能用匿名函數(shù) 匿名函數(shù) 當(dāng)時產(chǎn)生 當(dāng)時消失
var fn1 = function () {alert('blue');this.style.background ='blue'};var fn2 = function () {alert('red');this.style.background ='red'}; function adde(){ var d = document.getElementById('school'); d.addEventListener('click',fn1); d.addEventListener('click',fn2); }function reme(){ var d = document.getElementById('school'); //d.removeEventListener('click',fn1);//只剩fn1 d.removeEventListener('click',fn2);}在IE下第三種綁定事件的方法
<div id="school"> </div> <input type="button" value="加事件" onclick="adde();"> <input type="button" value="減事件" onclick="reme();">
var fn1 = function () {alert('blue');this.style.background ='blue'};var fn2 = function () {alert('red');this.style.background ='red'}; function adde(){ var d = document.getElementById('school'); // IE6,7是后綁定的事件先發(fā)生 d.attachEvent('onclick',fn1); d.attachEvent('onclick',fn2); //fn2先發(fā)生 }function reme(){ var d = document.getElementById('school'); //d.deltachEvent('click',fn1);//只剩fn1 d.deltachEvent('click',fn2);}總結(jié)
以上就是JavaScript中綁定事件與去除綁定的三種方式，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Javascript能有所幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點
疑難解答
