事件

• 鼠标事件

<script>
    let h1 = document.querySelector('h1');
    /* 鼠标双击 */
    // h1.ondblclick = function(){
    //     alert('我双击了')
    // }
    // h1.addEventListener('dblclick',function(){
    //     alert('我双击了')
    // })
    /* 鼠标在指定的区域内移动事件 */
    // h1.onmousemove = function (){
    //     console.log('我移动了');
    // }
    // h1.addEventListener('mousemove',function(){
    //     console.log('我移动了');
    // })
</script>

<button>点我</button>
<script>
    let btn = document.querySelector('button');
    /* 点击一下 分别alert出 1 2 3 */
    // btn.onclick = function () {
    //     alert(1)
    // }
    // btn.onclick = function () {
    //     alert(2)
    // }
    // /* 这样设置会被覆盖 只保留最后一个 */
    // btn.onclick = function () {
    //     alert(3)
    // }
    /* 监听onclick事件 */
    /* 和onclick的区别 区别一 写的方法不会被覆盖 */
     /* 区别二 false表示冒泡（从里到外触发事件） */
    /* true表示捕获 （从外到里触发事件） */
    // window.addEventListener('click',function(){
    //     alert(1)
    // })
    // window.addEventListener('click',function(){
    //     alert(2)
    // })
    // window.addEventListener('click',function(){
    //     alert(3)
    // })
</script>

• 冒泡和捕获

<div class="div1">

    <div class="div2"></div>
</div>
<script>
    /* 点击子元素 把父元素的事件也调用了 事件冒泡 */
    let div1 = document.querySelector('.div1')
    let div2 = document.querySelector('.div2')
    div1.onclick = function(){
        alert(1)
    }
    div2.onclick = function(e){
        /* 兼容写法 让谷歌和ie都支持 */
        let eObj = e || event;
        // eObj.stopPropagation()
        eObj.cancelBubble = true;
        
        /* event是一个js的关键字 这个关键字变量保存了事件源对象的属性*/
        // console.log(event);
        // event.stopPropagation()
        // event.cancelBubble = true;

        /* 事件源对象 */
        // console.log(e);
        /* 阻止事件冒泡的方法 */
        // e.stopPropagation();
        /* 取消冒泡属性 */
        // e.cancelBubble = true;
        alert(2)
    }
    /* false表示冒泡（从里到外触发事件） */
    /* true表示捕获 （从外到里触发事件） */
    // div1.addEventListener('click',function (){
    //     alert(1)
    // },true)
    // div2.addEventListener('click',function (){
    //     alert(2)
    // },true)
</script>

• 表单事件 ` `