js中的事件添加和程序
事件的基本使用方式:
事件源.事件類型 = 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中的事件添加和程序