javascript的事件

去年一直在学习框架的东西，比如VueJs,angularJs的东西，但感觉自己的基础知识还是很匮乏，因此想着该重新回归本质，多看看原生javascrip的东西，现在返回去学一些东西，感觉很多都豁然开朗的感觉。

所谓事件呢，就是可以被 JavaScript 侦测到的行为。而具体的事件有哪些呢

• 鼠标事件

• 键盘事件

• window事件

• media事件

• form事件

当触发事件时，就需要去处理他，而使用事件处理模型有三种

• html事件处理模型----定义：将事件直接绑定到html标签上----缺点：html和javascript耦合，无法处理多个事件程序

<input id="btn" value="按钮" type="button" onclick="showMessage();">
<script>
　function showMessage(){
　　 console.log("HTML添加事件处理");
　}
</script>

. DOM0级事件处理模型----定义:函数赋值给事件处理程序的方法

var btn=document.getElementById('btn');

 btn.onclick=function(){

 console.log('这是通过DOM 2级处理程序')

};

. DOM 2级事件处理程序----通过addEventListener 和 removeEventListener,这两个函数的参数要一致

function showMsg(){
console.log('msg')
}
btn.addEventListener('click', showMsg, false)
btn.removeEventListener('click', showMsg, false)

IE事件处理
IE8以下的版本不支持addEventListener
因此需要用attachEvent 添加事件处理程序

       detachEvent 删除事件处理程序    
       

而事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

事件捕获：不太具体的DOM节点，具体节点接收到事件

事件冒泡：由具体的DOM节点逐级向上传递至最不具体的节点

网上的图片更形象的表明了

    <div id='box'>
        <div id='father'>
            <div id='son'></div>
        </div>
    </div>
    <script>
        var box=documentGetById('box'),
            father=document.getElementById('father'),
            son=document.getElementById('son');
        father.addEventListener('click',function(){
            console.log('father msg');
        },false)    
        son.addEventListener('click',function(){
            console.log('son msg')
        },false)
    </script>

当我们点击son的时候，控制台会先后打出

som msg
father msg

可是我们只想显示son msg，应该怎么处理呢 ，接着往下看

DOM中的事件对象

在触发DOM上的事件时都会产生一个对象 
DOM中的 event事件对象
     type:事件类型，
     target:获取事件目标元素
     stopPropagation:方法 阻止事件冒泡
     preventDefault 方法 阻止事件的默认行为
IE中的事件对象
    type:事件类型
    srcElement 属性 获取事件目标元素
    cancleBubble 属性
    returnValue 属性 设置为true

通过以上知识，我们可以封装一个跨浏览器的事件对象

    var eventObj= {
         /**
         * 添加事件 
         * element 元素
         * 事件类型
         * 事件处理
         **/
        addEventHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler)
            } else {
                element['on' + type] = handler;
            }
        },
        /**
        * 移除事件
        * element 元素
        * 事件类型
        * 事件处理
        **/
        removeEventHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler)
            } else {
                element['on' + type] = null;
            }
        },
        /**
        *获取事件
        **/
        getEvent: function (e) {
            return e ? e : window.event;
        },
        /**
        * 阻止默认行为
        **/
        preventDefault: function (e) {
            if (e.preventDefault) {
                e.preventDefault()
            } else {
                e.returnValue = false;
            }
        },
        getElement: function (e) {
            return e.target || e.srcElement;
        },
        /** 
        * 阻止事件冒泡
        **/
        stopPropagation: function (e) {
            if (e.stopPropagation) {
                e.stopPropagation()
            } else {
                e.cancelBubble = true;
            }

        }
    };
    eventUtil.addHandler(btn2, 'click', showMessage);