Js之事件 事件对象 事件委托 事件流 事件冒泡 绑定事件的方法

一、事件

什么是事件？

事件：事件发生了并得到处理

        事件：事件源 + 事件类型 + 事件处理函数

事件处理函数是异步的

这个匿名函数是在事件发生以后，由系统调用

一般事件处理函数没有特定的返回值，但是也可以使用return

事件处理函数的参数问题：事件处理函数只有一个参数

                                           事件处理函数的第一个参数表示的是事件对象

                                           事件对象是用户记录事情发生的整个过程

二、事件对象

大多数浏览器支持事件处理函数的第一个参数做事件对象

document.onclick = function(e){

}

低版本浏览器只能使用event来记录事件对象

 // console.log(event)

                                           

  document.onclick = function(e) {

                // 大多数浏览器支持事件处理函数的第一个参数做事件对象
                // console.log(e) 

                // 低版本浏览器只能使用event来记录事件对象
                // console.log(event)


                e = e || event 

                // target目标 --- 具体是由哪个标签触发的
                console.log(e.target);  // <h3>333</h3>
                // this 指向事件源      
                console.log(this);      // #document 

                console.log(e.clientX); // 20 x轴距离
        }

    三、绑定事件的方法

        1.行内js       onclick = 'fn()'

        2.事件绑定   oDiv.onclick = function(){}

        3.事件监听   oDiv.addEventListener(类型，事件处理函数) --- 不会覆盖

            低版本IE事件监听  oDiv.attachEventListener

         oDiv.onclick = function () {

             console.log(1);

         }    

        // 后面的事件覆盖前面的

         oDiv.onclick = function () {

             console.log(2);

         }

        // 不会覆盖

         oDiv.addEventListener('click',function () {

            console.log(4);

        })

        // 低版本IE

        oDiv.attachEvent('onclick', function () {

            console.log(6);
        })

        fn1(oDiv,'click',function () {

            console.log(4);
        })

        function fn1(ele , type , cb) {  

            console.log(ele);

            // 先判断window对象下是否存在这个方法

            if(window.addEventListener) {

                ele.addEventListener(type,cb)

            } else {

                ele.attachEvent('on' + type , cb)
            }
        }

四、移除事件

        行内js和普通事件绑定都可以通过重新赋值的方式，以覆盖的方式移除  

        // oDiv.onclick = null

        事件监听的方式，需要写成具名函数才能被移除（注意：移除的时候，需要一个一

个的移除）        

        // removeEventListener()

IE兼容事件监听

oDiv.attachEvent('onclick',fn)

oDiv.detachEvent('onclick',fn)

            addEvent(oDiv,'click',fn)
            removeEvent(oDiv,'click',fn)

            
            // 添加事件监听 
            function addEvent(ele,type,cb){
                if(window.addEventListener){
                    ele.addEventListener(type,cb)
                }else{
                    ele.attachEvent('on'+ type , cb)
                }
            }

            // 移除事件监听
            function removeEvent(ele,type,cb) {
                if(window.removeEventListener){
                    ele.removeEventListener(type,cb)
                }else{
                    ele.detachEvent('on' + type,cb)
                }
            }

 五、事件流

// 事件流：

        //    事件冒泡：从里向外

        //    事件捕获：从外向内

        //    主要使用事件冒泡

        //    实现事件捕获的方式

        //        addEventListener(type , fn ,true) 第三个参数表示是否支持事件捕获

        // 什么是事件流：事件流描述的是从页面中接受事件的顺序

        // 但有意思的是，微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)      

        // 事件捕获：事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件    

        // 事件冒泡：IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

        // IE提出的是冒泡流，而网景提出的是捕获流,后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流),所以为了能够兼容更多的浏览器，建议大家使用冒泡流

        // 事件流包含的三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段

六、事件冒泡与事件捕获

    事件冒泡：IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

        // 默认是事件冒泡 --- 从里向外
        // oDiv.addEventlistener('click',function()
        // {
        //     console.log('我是最外面的');
        // })

        // oP.addEventListener('click',function () {
        //     console.log('我是中间的');
        // })

        // oSpan.addEventListener('click',function () {
        //     console.log('我是最里面的');
        // })

事件捕获：事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件 

        // 事件捕获 --- 从外向内
        oDiv.addEventListener('click',function () {
            console.log('我是最外面的');
        },true)

        oP.addEventListener('click',function () {
            console.log('我是中间的');
        },true)

        oSpan.addEventListener('click',function () {
            console.log('我是最里面的');
        },true)

   七、阻止事件冒泡

阻止事件冒泡

        利用事件对象

        e.stopPropagation()             主流浏览器的写法

        e.cancelBubble = true          低版本IE取消事件冒泡的写法 

        var oDiv = document.querySelector('.a')
        var oP = document.querySelector('p')
        var oSpan = document.querySelector('span')

        oDiv.onclick = function () {
            console.log('div');
        }

        oP.onclick = function (e) {
            e = e || event ;
            //  阻止事件冒泡
            //  主流浏览器的写法
            //  e.stopPropagation()
            //  低版本IE取消事件冒泡的方法
            //  e.cancelBubble = true
            if(e.stopPropagation){
                e.stopPropagation()
            }else{
                e.cancelBubble = true 
            }
            console.log("p");
        }
        

 八、事件委托

        // 如果页面上的事件处理函数过多,会对性能造成影响

        // 如果需要让每个li都有点击事件，循环绑定事件 --- 页面上实际会有很多的事件处理函数

        // 循环绑定事件无法给将来的对象绑定事件

        //    解决方案：事件委托

        //            子元素的事件都会触发父元素的事件

        //            事件委托的实现:

        //               找到所有需要绑定事件的父元素,给父元素绑定事件,然后根据

           targe来判断具体是由谁触发的