DOM事件第一弹

近期温习了部分w3c上关于DOM事件的规范，发现以前有些模糊的概念更加清晰，以及受到罗胖（罗辑思维）的影响，很是想分享自己的了解的东西，希望大家给予指正或补充。

一、事件类型

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	iniEvent()
MouseEvents	MouseEvent	iniMouseEvent()
UIEvents	UIEvent	iniUIEvent()

此处为DOM2级事件，DOM3级对事件分解更加详细，后续文章继续整理。

二、事件对象

也就是所谓的event对象。标准浏览器的event对象是通过方法的参数传入的，而ie则是window.event来获取。现将常用的一些事件对象操作总结如下：

标准属性或者方法名	作用	IE兼容事件名
bubbles	判断事件是否冒泡阶段，true表示冒泡阶段
cancelable	指示事件是否可以取消默认动作
target	返回触发此事件的元素（事件的目标节点）	srcElement
type	返回事件的类型
preventDefault()	阻止默认事件的执行	returnValue为false表示
stopPropagation()	阻止事件的传播	cancelBubble属性为false

三、如何自定义一个事件

1. 使用document.createEvent创建一个事件。

2.通过对应的“初始化方法”初始化事件对象

3.使用dispatchEvent初始化事件

示例代码如下：

<input type="text" value="text" id="text" />
    <button type="button" id="btn">按钮</button>
    <div id="foo" style="width: 200px; height: 200px; background: red;" contenteditable="true" ></div>
    <script>
        var text = document.getElementById('text');
        var foo = document.getElementById('foo');
        var btn = document.getElementById('btn');

        //自定义focus事件
        foo.onfocus = function(evt){
            evt = evt || window.event;
            console.log(evt);
            foo.innerHTML += "<br/>发生了focus事件" + ( evt.view ? 'view' : 'dispatch' );
        }
        if(document.createEvent){
            var cFocus = document.createEvent('HTMLEvents');
            //参数全是为了兼容IE9+
            cFocus.initEvent('focus',true, false);
            foo.dispatchEvent(cFocus);
        }else{
            foo.focus(); //Ie8-下会触发两个
        }

        //dispatch触发按钮事件

        btn.onclick = function(){
            alert('text: ' + text.value);
            text.focus();
        }
        if(document.createEvent){
            var clickHandle = document.createEvent('MouseEvents');
            //参数全是为了兼容IE9+
            clickHandle.initMouseEvent('click',true,false,window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
            btn.dispatchEvent(clickHandle);
        }else{
            btn.click(); //Ie8-下也只有一次
        }

    </script>

1. 如果是view触发的事件，event对象上也会有view(视图对象)和which(按的哪个键)，而通过dispatchEvent触发的则没有这两个属性
2. 兼容Ie8-的浏览器，把事件委托当作一个方法调用即可，如我想调用click事件(不带on前缀)

   foo.click