checkbox核取方塊onchange事件觸發在各瀏覽器中的區別

antzone發表於2017-03-21
事件瀏覽器

關於onchange事件這裡就不多介紹了，具體可以參閱javascript change 事件一章節，下面就介紹一下checkbox核取方塊onchange事件觸發在各個瀏覽器上的表現差異，希望能夠給需要的朋友帶來幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){
  var ck=document.getElementById("ck");
  var result=document.getElementById("result")
  var num=0;
  ck.onchange=function(){
    if(num%2==0){
      result.innerHTML="事件觸發";
    }
    else{
      result.innerHTML="螞蟻部落";
    }
    num++;
  }
}
</script> 
</head> 
<body> 
<input type="checkbox" value="1" id="ck"/>
<span id="result">螞蟻部落</span>
</body> 
</html>

以上程式碼中，選中和取消選中核取方塊能夠實現span元素中的文字切換效果。在谷歌、火狐或者IE8以上的瀏覽器中，只要改變核取方塊的狀態就可以出發事件，但是在IE8和IE8以下瀏覽器中不但要改變控制元件的值，而且要將焦點從控制元件移開才可以觸發事件。

相關文章