在JavaScript中，有三種常用的綁定事件的方法
第一種辦法
函數寫在結構層里面
非常不好，使頁面很混亂，行為與結構得不到分離
<input type="button" onclick="func();">
綁定事件的第二種辦法
好處：行為與結構開始分離
缺點：
第二種綁定方式中只能給一個時間綁定一個處理函數
即.onclick = fn1; . onclick = fn2 最終的效果是onclick = fn2
<select name="xueli" > <option value="">請選擇學歷</option> <option value="大學" >大學</option> <option value="中學">中學</option> <option value="初中">初中</option> <option value="小學">小學</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'; } //寫一個匿名函數 //最終的出現錯誤 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'; } //匿名函數 調用上面兩個函數 d.onclick = function (){ this.fn1(); this.fn2(); }}不在使用onclick
window.onload = function(){ var d = document.getElementById('school'); //達到了一次綁定兩個函數 d.addEventListener('click',function () {alert('blue');this.style.background ='blue'}); d.addEventListener('click',function () {alert('red');this.style.background ='red'}); }去除綁定 不能用匿名函數 匿名函數 當時產生 當時消失
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是后綁定的事件先發生 d.attachEvent('onclick',fn1); d.attachEvent('onclick',fn2); //fn2先發生 }function reme(){ var d = document.getElementById('school'); //d.deltachEvent('click',fn1);//只剩fn1 d.deltachEvent('click',fn2);}總結
以上就是JavaScript中綁定事件與去除綁定的三種方式，希望本文的內容對大家學習或者使用Javascript能有所幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
