event对象和DOM二级事件

1、event对象:

属性和方法:
属性:
    button:判断按鼠标上的哪个键
        0:没有按键
        1:左键
        2:右键
        3:中间键

    altKey:alt键 true    false
    ctrlKey:
    shiftKey:
    
    clientX/clientY:可视区域的坐标
    
    offsetX/offsetY:源元素的坐标
    
    pageX/pageY/x/y:整个页面的坐标
    
    screenX/screenY:相对于屏幕的坐标
    
    keyCode:返回键盘上对应的值
    
    target/srcElement:触发事件的对象
    
方法:
    addEventListener():添加监听事件
        btn.addEventListener('事件的类型',函数名,true/false)
        btn.addEventListener('click',function(){
            this.style.background = "yellow"
        })
        
        btn.addEventListener('click',fun)
        function fun(){
            this.style.background = "yellow"
        }
        可以添加多个事件,不会被覆盖

    removeEventListener():删除监听事件

        btn.removeEventListener()

        如果添加到监听函数是匿名的话就删除不了
    
    preventDefault():阻止默认事件

    stopPropagation():阻止冒泡
    
dom2级事件:
    事件流:
    事件冒泡:从里往外false,默认false
    事件捕获:从外往里true
    阻止事件冒泡:
        btn.addEventListener('click',function(event){
            var e = evrnt || window.event
            //this.style.border = "1px red solid";
            e.stopPropagation();
        })
    阻止默认事件:
        a   submit
        a.onclick=function(event){
            var e = evrnt || window.event
            //this.style.border = "1px red solid";
            e.preventDefault();
        }

你可能感兴趣的:(event对象和DOM二级事件)