点击事件 事件监听 event两件事情同时发生出现的结果

    // 上方创建了是三个 warp inner 按钮
    // 当你再点击某一个div时 显示
    one.onclick=function(){
        console.log('1111');
    }
    one.onclick=function(){
        console.log('2222');
    }

当你如果操作该点击时你想出来1111和222但是控制台出现

所以这个时候应该

    // 当你点击第一个时候和第二个时候都出现了222第一个被覆盖
    // 所以这个时候添加关联  取消关联
    one.onclick=null//点击事件后直接跟null控制
    one.onclick=false
    one.onclick=function(){
        // return 是函数结束的意思添加false是阻止事件
        return  false; 

    }

addEventListener  指的是再添加相同事件后不会被覆盖还会触发

// 用法 addEventListener（'事件名去掉on'，函数、函数调用）

one.addEventListener('click',show1)
function show1(){
    console.log('77777');
}

one.addEventListener('click',function(){
    console.log('88888');
})

 removeEventListener移除事件

one.removeEventListener('click',show1)

one.removeEventListener('click',function(){
    console.log('88888');
})

 addEventListener

  false 是冒泡的形式 ture是铺捉的形式

 例子： warp.addEventListener('click', show1, false)

  // addEventListener    false 是冒泡的形式 ture是铺捉的形式
    var warp = document.querySelector('.warp')
    var inner = document.querySelector('.inner')
    var button = document.querySelector('button')
    // 创建warp相同事件触发不会被覆盖
    // addEventListener('click', show1, false) 里面包时间名称  函数调用 
    warp.addEventListener('click', show1, false)
    function show1(event) {
        console.log('warp');
// 在这里event||window.event;是固定搭配
        var e= event || window.event;
        e.stopPropagation();
    }
    // inner.addEventListener('click', show2, false)
    // function show2 (event) {
    //     console.log('inner');
    //     var e = event || window.event;
    //     e.stopPropagation();
    // }
    // button.addEventListener('click',show3,false)
    // function show3(event){
    //         console.log('button');
            
    //         var e = event || window.event;
    //         e.stopPropagation();
    //     }