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();
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容