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标签');
    }
}