JavaScript事件

一、預設事件

阻止預設事件，主流瀏覽器使用preventDefault()，IE8及其以下，設定returnValue屬性，false取消預設事件，true不取消預設事件。

document.onselectstart = function(e) {
    e = e || window.event;
    //取消預設行為
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    console.log('文字選中')
};

document.oncontextmenu = function(e){
    e = e || window.event;
    //取消預設行為
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    console.log('右鍵選單')
}

二、滾輪事件

1. IE/Chrome使用onmousewheel，滾輪屬性event.wheelDelta，向上為120，向下為-120。
2. Firefox使用DOMMouseScroll，必須使用addEventListener()新增，滾輪屬性event.detail向上為-3，向下為3。

//滑鼠滾輪事件
function mousewheelEvent(ele,fn,boole){

    //判斷是否為IE瀏覽器
    if(ele.addEventListener){
        //判斷是否為火狐瀏覽器
        if(ele.onmousewheel === undefined){//火狐
            ele.addEventListener('DOMMouseScroll',fn,boole);
        }else{//谷歌
            ele.addEventListener('mousewheel',fn,boole);
        }
    }else if(ele.attachEvent){//ie瀏覽器
        ele.attachEvent('onmousewheel',function(){
            fn.call(ele);
        });
    }
}

mousewheelEvent(document,function(){
    console.log(this);
});

三、表單事件

1. 獲取焦點事件，onfocus獲取焦點事件 <input>、<textarea> 以及 <select> <a/> 元素。

obj.focus() //給指定的元素設定焦點，主動觸發。

2. 失去焦點事件，onblur失去焦點事件<input>、<textarea> 以及 <select> <a/> 元素。

obj.blur() //取消指定元素的焦點，主動觸發。

3. onchange內容改變觸發 <input>、<textarea> 以及 <select> 元素。
4. onsubmit 提交事件，submit() 提交表單 。
5. onreset重置事件，reset()重置表單。

var oForm = document.querySelector('.user-reg'),
    oUserName = oForm.querySelector('input[name=username]'),//使用css選擇器的方式獲取
    oPassword = oForm.querySelector('input[name=psw]'),
    oNum = oForm.querySelector('input[name=num]'),
    oDes = oForm.querySelector('textarea'),
    oLike = oForm.querySelector('select'),
    oBtnBox = oForm.querySelector('.form-btn'),
    oBtns = oBtnBox.querySelectorAll('button');

//監聽一個獲取焦點事件
oUserName.addEventListener('focus',function(){
    console.log('獲取焦點');
    //this.value 就是input控制元件輸入的值
    if(this.value.length >= 10){
        //主動失去焦點
    }
});
oUserName.focus();//主動觸發

//失去焦點事件
oUserName.addEventListener('blur',function(){
    console.log('失去焦點');
});

//監聽年齡的改變事件
oNum.addEventListener('change',function(){
    //年齡必須是數字
    if(parseInt(this.value)){
        this.value = parseInt(this.value);
    }else {
        this.value = 0;
        alert("請輸入整型");
    }
    //this.value = parseInt(this.value) || 0;
    console.log('改變事件');
});

//提交事件
oForm.addEventListener('submit',function(e){
    //取消預設行為
    e.preventDefault();
    console.log('提交了');
});

//重置事件
oForm.addEventListener('reset',function(e){
    //取消預設行為
    e.preventDefault();
    console.log('重置表單')
});

四、鍵盤事件

1. 不是所有元素都能夠接收鍵盤事件，能夠響應使用者輸入的元素，能夠接收焦點的元素就能夠接收鍵盤事件，document能夠響應。
2. keydown：使用者在鍵盤上按下某按鍵時發生，一直按著某按鍵則會不斷觸發（opera瀏覽器除外）。
3. keypress：使用者按下一個按鍵，併產生一個字元時發生（也就是不管類似shift、alt、ctrl之類的鍵，就是說使用者按了一個能在螢幕上輸出字元的按鍵keypress事件才會觸發）。一直按著某按鍵則會不斷觸發。
4. keyup：使用者釋放某一個按鍵時觸發。
5. event.keyCode : 數字型別，鍵盤按鍵的值，鍵值。
6. ctrlKey,shiftKey,altKey 布林值，當一個事件發生的時候，如果ctrl || shift || alt 是按下的狀態，返回true，否則返回false。

//鍵盤按下
oDes.addEventListener('keydown',function(){
    console.log('鍵盤按下');
    console.log(e.keyCode);
});

//鍵盤輸入
oDes.addEventListener('keypress',function(){
    console.log('鍵盤輸入')
});

//鍵盤釋放
document.addEventListener('keyup',function(e){
    console.log('文件鍵盤松開');
});

五、事件委託

1. e.target 主流瀏覽器下，觸發事件最底的標籤節點，返回的即使一個標籤節點。
2. e.srcElementIE瀏覽器下。

var index = null;
var oBox = document.querySelector('.box');

oBox.onclick = function(e) {
    e = e || window.event;
            
    //不存在就證明是ie
    if(e.target === undefined){
        e.target = e.srcElement;
    }

    //是li標籤節點就新增class類名
    if(e.target.nodeName == 'LI'){
        if(index != null){
            index.className = '';
        }
        e.target.className="on";
        index = e.target;               
    }else{
        console.log('不是li標籤');
    }
}