11月18号（本周知识总结）

11月13号

11月14号

1.event:一定是在事件发生的时候会产生event

 

var btn = document.querySelector('div');
        btn.onmouseover = function(){
            console.log(event);
        }

   1)event兼容     

     

var btn = document.querySelector('div');
        btn.onmouseover = function(event){
            var e = event || window.event;
            console.log(e);
        }

  2）e.target 触发事件的元素本身（返回的是一个标签）

e.returnValue 阻止默认事件的发生(ie6-8),等价于 return false;

e.preventDefault() 阻止默认事件的发生(标准浏览器)

 

var btn = document.querySelector('.box');
        btn.onclick = function(event){
            var e = event || window.event;
            // console.log(e.target);
            // console.log(e.type);
            // console.log(e);
            // return false;
            // e.returnValue = false;
            // 跳转到京东
            window.location = "http://www.jd.com";
            // e.preventDefault();
        }

2.事件冒泡

1）冒泡:

        必须是嵌套的元素

        必须触发相同的事件

    2）捕获阶段:

        从外向里:warp - inner - button

    3）冒泡阶段:

        从里向外:button - inner - warp

   4） 阻止冒泡:

        使用ev.stopPropagation();

        不想让那个元素有冒泡,就给那个元素添加

var warp = document.querySelector('.warp');
    var inner = document.querySelector('.inner');
    var button = document.querySelector('button');
    warp.onclick = function(event){
        var ev = event || window.event;
        console.log('warp');
        // ev.stopPropagation();
    }
    inner.onclick = function(event){
        var ev = event || window.event;
        console.log('inner');
        ev.stopPropagation();
    }
    button.onclick = function(event){
        var ev = event || window.event;
        console.log('button');
        ev.stopPropagation();
    }

   3. 元素添加的方式

     1. on+关键词

           添加不同的事件,两个事件都有作用

           添加相同的事件,后面的事件会覆盖前面的事件

// 添加事件关联
            oneDiv.onclick = function() {
                console.log("+++++");
            }
            oneDiv.onclick = function() {
                console.log("-----");
            }
            // 取消事件关联
            // oneDiv.onclick = null;
            // oneDiv.onclick = false;
            // oneDiv.onclick = function(){
            //     return false;
            // }
        */
        /*

2. addEventListener

 添加相同的事件,不会被覆盖,都会触发

  addEventListener('click',show1) 可以使用 removeEventListener移除事件;

  如果直接写函数体,则不能被移除

oneDiv.addEventListener('click',show1);
        oneDiv.addEventListener('click',show2);
        oneDiv.addEventListener('click',function(){
            console.log('1111111');
        });
        function show1(){
            console.log('+++++++');
        }
        function show2(){
            console.log('------');
        }

移除事件

oneDiv.removeEventListener('click',show1);
        oneDiv.removeEventListener('click',show2);
        oneDiv.removeEventListener('click',function(){
            console.log('1111111');
        });

 3. addEventListener 第三个参数值

       默认是按照冒泡的方式返回

       设置为true,是以捕获的方式返回

        跟on+关键词阻止冒泡的方式是一样的

var warp = document.querySelector('.warp');
        var inner = document.querySelector('.inner');
        var button = document.querySelector('button');
        warp.addEventListener('click',function(event){
            console.log('warp');
            var ev = event || window.event;
            ev.stopPropagation();
        },false)
        inner.addEventListener('click',function(event){
            console.log('inner');
            var ev = event || window.event;
            ev.stopPropagation();
        },false)
        button.addEventListener('click',function(event){
            console.log('button');
            var ev = event || window.event;
            ev.stopPropagation();
        },false)