事件2

• 事件的默认行为 `

    /* 当你鼠标右击的时候会发生的事件 */
    document.oncontextmenu = function (e){
        // alert('鼠标右击了')
        /* 禁用了右击鼠标出现的默认菜单 */
  
        /* 这两种禁用方式的区别是
        return false会阻止下面代码的执行 方法已经结束了
        e.preventDefault()不会阻止下面代码执行 */
        return false
        // e.preventDefault()
        console.log(1);
    }
  
    /* 鼠标右击 禁止出现默认的菜单
        显示一个自己的菜单 菜单A 菜单B 菜单C
        出现的位置就是 鼠标的位置 
        div postion:absolute
        top left clientX clientY
    */
  
  
  
  
  
    let a = document.querySelector('a');
    a.onclick = function (e){
        /* 取消默认事件 两种方法 */
        this.style.background = 'red'
        // return false
        /* 事件源对象里面的取消默认事件的方法 */
        // e.preventDefault();
        
    }
  

• 键盘事件 `

    t.onkeydown = function (e){
        /* 兼容写法 */
        let eobj = e||event;
        /* 事件源对象 */
        console.log(eobj);
        if(eobj.keyCode == 13){
            // alert(this.value)
            alert(eobj.target.value)
        }
    }
    /* 在输入框中输入 字符 按下回车的时候 把输入的字 alert出来 */
  
  
  
  
    /* 键盘按下的时候触发 */
    // t.onkeydown = function (){
    //     console.log('键盘我按下了');
    // }
    // /* 连续敲击的时候触发 */
    // t.onkeypress = function (){
    //     console.log('连续按下键盘并抬起的时候触发');
    // }
    // /* 键盘抬起的时候触发 */
    // t.onkeyup = function (){
    //     console.log('键盘我抬起了');
    // }
    /* 顺序 onkeydown > onkeypress > onkeyup */
  

• 鼠标点击的位置 `

  `

• 事件的冒泡和捕获

`

<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;
        /* stopPropagation 在低版本的ie下有可能无效 */
        // eObj.stopPropagation()
        /* cancelBubble在ie下也一直有效 */
        eObj.cancelBubble = true;
        alert(2)
        // return false;
        
        /* event是一个js的关键字 这个关键字变量保存了事件源对象的属性*/
        // console.log(event);
        // event.stopPropagation()
        // event.cancelBubble = true;

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