事件对象

1.event对象

document.onmouseup = function(evt){

var e = evt || window.event // 这里是为了兼容w3c和IE，因为ie有自己自定义的event

}

2.鼠标左中右键

1.event.button

window.onload = function() {
        document.onmousedown= function(event) {
            if (getButton(event) == 0) alert('左键');
            if (getButton(event) == 1) alert('中键');
            if (getButton(event) == 2) alert('右键');
        }       
    }
    function getButton(event) {
        var e = event || window.event;
        if (event) {
            return e.button;
        } else if (window.event) {   // IE
            switch (e.button) {
                case 1:
                    return 0;
                case 4:
                    return 1;
                case 0:   // 360
                    return 2
            }
        }
    }

2.键盘事件

keydown: 按下任意键立即触发

keyup: 弹起任意键立即触发

keypress: 按下字符键触发（1,2,3，a,b,c等等）

keycode: 键盘上的任意键，返回的是ASCLL的小写字母

charcode：只有在发生keypress事件的时候才包含值，返回的是那个键所代表的字符的ASCLL编码

3.冒泡

<body>
<div id="box">
    <input type="" name="" value="按钮">
</div>
    <script type="text/javascript">
    document.onclick = function(){
        alert('document');
    }
    document.body.onclick = function(){
        alert('body');
    }
    document.getElementById('box').onclick = function(){
        alert('div');
    }
    document.getElementsByTagName('input')[0].onclick = function(event){
        var e = event || window.event; 

        alert('input');
        e.stopPropagation();  // W3C取消冒泡
        e.cancelBubble = true;   // IE取消冒泡方式
    }
    </script>
</body>

4.检查入口函数是否重复

alert(window.onload)

5.w3c事件处理函数

1.addEventListener(method,function,bool) bool为false时为捕获，true时为冒泡

2.removeEventListener(method,function,bool)

3.相同函数屏蔽问题

<!DOCTYPE html>
<html>

<head>
    <title>fdfda</title>
    <meta charset="utf-8">
</head>

<body>
<div id="box">
    <input type="" name="" value="¹þ¹þ">
</div>
    <script type="text/javascript">
    window.onload = function(){
        window.addEventListener('click',init,false);
        window.addEventListener('click',init,false);
        window.addEventListener('click',init,false);
    }
    function init(){
        alert('hahah');   // 只弹出一次
    }

4.切换

<div id="box">ggggg</div>
    <script type="text/javascript">
    window.addEventListener('load',function(){
        var box = document.getElementById('box');
        box.addEventListener('click',change1,false)
    },false)
    function change1(){       
        this.innerHTML = '哈哈哈哈';
        this.addEventListener('click',change2,false);
        this.removeEventListener('click',change1,false);
    }
    function change2(){
        this.innerHTML = '嘻嘻嘻嘻';
        this.addEventListener('click',change1,false);
        this.removeEventListener('click',change2,false);
    }
    </script>

6.IE事件的处理函数

1.attachEvent(method,function), detachEvent(method,function)

注意： IE不支持捕获，只支持冒泡，IE添加时间不能屏蔽重复的函数，IE中的this指向的是window而不是dom对象，在传统时间上，IE是无法接收到event对象的，但使用了attachEvent却可以，但有些区别

<!DOCTYPE html>
<html>

<head>
    <title>fdfda</title>
    <meta charset="utf-8">
</head>

<body>
<div id="box">
    <input type="" name="" value="¹þ¹þ">
</div>
    <script type="text/javascript">
    window.onload = function(){
        window.addEventListener('click',init,false);
        window.addEventListener('click',init,false);
    }
    function init(){
        alert('hahah');  // 弹出两次，无法屏蔽
    }

// 在IE中
window.attachEvent('onload',function(){
        var box = document.getElementById('box');
        box.attachEvent('onclick',function(){
            // alert(this === box)   // 返回false
            alert(this === window)   // 返回true
            // ps: 可以用call()把this对象传过去
        })
    })

7.跨浏览器添加事件和移除事件

<div id="box">ggggg</div>
    <script type="text/javascript">
    // 添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false)
        }else if(obj.attachEvent){
            obj.attachEvent('on'+type,fn)
        }
    }
    // 移除事件
    function removeEvent(obj,type,fn){
        if(obj.removeEventListener){
            obj.removeEventListener(type,fn,false)
        }else if(obj.detachEvent){
            obj.detachEvent('on'+type,fn)
        }
    }
    // 跨浏览器获取目标对象 
    function getTarget(evt){
        if(evt.taget){   // w3c
            return evt.getTarget
        }else if(window.event.srcElement){
            return window.event.srcElement;
        }
    }
    addEvent(window,'load',function(){
        var box = document.getElementById('box');
        addEvent(box,'click',change1)
    })
    function change1(evt){   
        var that = getTarget(evt)   
        that.innerHTML = '哈哈哈哈';
        addEvent(that,'click',change2);
        removeEvent(that,'click',change1);
    }
    function change2(evt){
        var that = getTarget(evt)
        that.innerHTML = '嘻嘻嘻嘻';
        addEvent(that,'click',change1);
        removeEvent(that,'click',change2);
    }
    </script>

8.上下文菜单事件（contextmenu）

ps:contextmenu事件很常用，这直接导致浏览器兼容性较为稳定

<javascript>
addEvent(window,'load',function(){
            var text = document.getElementById('text');
            addEvent(text,'contextmenu',function(evt){
                evt.preventDefault();
                var menu = document.getElementById('menu');
                var e = evt || window.event;
                menu.style.display = 'block';
                menu.style.left = e.clientX+'px';
                menu.style.top = e.clientY+'px';
                addEvent(document,'click',function(){
                    menu.style.display = 'none';
                })
            })
        })
        function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false)
        }else if(obj.attachEvent){
            obj.attachEvent('on'+type,fn)
        }
    }

<javascript>

9.卸载前事件（当鼠标离开时进行提示）

<a href="http://www.baidu.com">baidu</a>
    <script type="text/javascript">
    addEvent(window, 'beforeunload', function(evt) {
        preDef(evt);
    })

    function addEvent(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false)
        } else if (obj.attachEvent) {
            obj.attachEvent('on' + type, fn)
        }
    }
    function preDef(evt){
        console.log('aaa');
        var e = event || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
            console.log(e.returnValue);
        }
    }
    </script>

10. 关于重复提交表单的问题（模拟延迟）

disabled = true （只限于按钮放置重复提交）