JavaScript事件

1、默認事件

阻止默認事件，主流瀏覽器使用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('右鍵菜單')
}
複製代碼

2、滾輪事件

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);
});
複製代碼

3、表單事件

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('重置表單')
});
複製代碼

4、鍵盤事件

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('文檔鍵盤松開');
});
複製代碼

5、事件委託

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標籤');
    }
}
複製代碼