1. 程式人生 > >js中的事件添加和程序

js中的事件添加和程序

進入 mouseover 觸發 鼠標移出 use function 原則 事件驅動 使用

事件的基本使用方式:

事件源.事件類型 = function(){事件觸發後的操作};

點擊事件:click;

在js中點擊事件使用時前面要加on,為onclick;

例:點擊btn按鈕給box添加樣式;

btn.onclick = funciton(){

  box.style.width = ‘100px‘;

  box.style.height = ‘100px‘;

  box.style.backgroundColor = ‘red‘;

};

移入移出事件

mouseover :鼠標移入事件;

box.onmouseover = function(){

  this.style.backgroundColor = ‘blue‘;

}

mouseout :鼠標移出事件;

box.onmouseout = function(){

  this.style.backgroundColor = ‘red‘;

}

小例題;

  點擊按鈕實現頁面變色的效果;

1、首先獲取元素 btn 按鈕 ;

2、事件綁定 btn.onclick = funciton(){};

3、在{}中寫事件驅動程序;

  var btn = document.getElementById(‘btn‘);

  var flag = true; //為了實現上述效果我們采用一種簡便方式;開閉原則;

  btn.onclick = function (){

    if(flag){//由於上面已經給flag賦值了true;所以此次判斷可以進入;

      dcoument.body.className = ‘black‘;//給body賦值白色;

      btn.innerText = ‘變成白色‘;//給變按鈕的內容;

      flag = false;//將flag設為false;讓下次點擊不能進入if循環,只能進入else;

    }else{

      document.body.className = ‘white‘;

      btn.innerText = ‘變成黑色‘;

      flag = true;//當頁面設置為黑色時 給flag設置為true;讓下次點擊不能進入

            else只能進入if循環;

    }

  }

js中的事件添加和程序