js事件对象

独自空忆成欢 提交于 2020-02-27 07:02:14
Evernote Export

js事件对象

在DOM元素触发事件时,事件处理函数中会产生的一个事件对象event。

事件对象获取方法

所有浏览器都支持event对象,只是支持的方式不一样
FireFox、Chrome等浏览器要获取到event对象,需要从函数中传入,参数名随意
而IE在浏览器中event作为window对象的一个属性存在,可以直接使用 event 或 window.event 获取到

//事件对象获取方法
document.onkeydown = function(ev){    //onkeydown 事件会在用户按下个键盘按键时发生
    var e = ev || event ;  //兼容各个浏览器
    console.log(e);
}

事件对象中与鼠标/键盘相关属性

clientX/clientY属性:返回当事件被触发时,鼠标指针的坐标(到浏览器窗口的坐标)
offsetX/offsetY属性:返回当事件被触发时,鼠标指针的坐标(在事件源元素中的坐标)
pageX/pageY属性:返回当事件被触发时,鼠标指针的坐标(整个页面中的坐标)
button属性:返回触发事件的鼠标按键
which属性:返回触发事件的按键码(针对键盘和鼠标事件) IE678不支持
keyCode属性:返回键盘按键的按键码
组合键:ctrlKey、altKey、shiftKey、metaKey(OS)

 document.onclick = function(ev){
            var e = ev || event;
            console.log(e.clientX , e.clientY);  //事件被触发时,鼠标指针的坐标(到浏览器窗口的坐标)
            console.log(e.offsetX , e.offsetY);  //返回当事件被触发时,鼠标指针的坐标(在事件源元素中的坐标)
            console.log(e.pageX , e.pageY);   //事件被触发时,鼠标指针的坐标(整个页面中的坐标,包含滚动高度)
            console.log(e.button);  //返回触发事件的鼠标按键
        }
        document.onkeydown = function(ev){
            var e = ev || event;
            console.log(e.which);  //返回触发事件的按键码(针对键盘和鼠标事件) IE678不支持
            console.log(e.keyCode);  //返回键盘按键的按键码
            console.log(e.ctrlKey);  //判断是否按下ctrl键,返回布尔值
            console.log(e.altKey);  //判断是否按下alt键,返回布尔值
            console.log(e.shiftKey);  //判断是否按下shift键,返回布尔值
            console.log(e.metaKey); //判断是否按下meta(windows键盘是Windows)键,返回布尔值
 }

事件源:target(触发事件的对象)

在谷歌、火狐中获得触发事件的元素(事件源)
使用:event.target
在IE中获得触发事件的元素
使用:event.srcElement
var Target = event.target || event.srcElement;//兼容写法


//event事件对象包含了跟事件相关的所有信息
btn.onclick = function(ev){      //低版本ie只识别window对象下的event属性
    var e = ev || event ;   //获取事件对象兼容写法
    console.log(e);
    var target = e.target || e.srcElement;  //获取事件源兼容写法
    console.log(target);
}

举例:
当两个有嵌套关系的div分别绑定点击事件,点击子元素box2,target指向box2。点击box1时,target指向box1。


<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        box2.onclick = function(ev){
            var e = ev || event;  //获取事件对象
            console.log(e.target);  //指向box2
        }
        box1.onclick = function(ev){
            var e = ev || event;  //获取事件对象
            console.log(e.target);  //指向box1
        }
    </script>
</body>

事件流

事件流:事件的流向,事件的执行顺序。

当子元素和父元素都定义了相同的事件,比如都定义了onclick事件,
点击子元素时,父元素的onclick事件也会被触发。

JS里称这种事件连续发生的机制为事件冒泡或者事件捕获。

事件冒泡:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发。

事件捕获:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(target)触发。

【W3C模型】
W3C将两者进行中和,在任何W3C的事件模型中,事件先进入捕获阶段,再进入冒泡阶段。

举例:
当在前有嵌套的结构中,点击box2,会按事件冒泡的方式,依次触发box2、box1的点击事件。


<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        box2.onclick = function(){
            alert('我是box2')
        }
        box1.onclick = function(){
            alert('我是box1')
        }
    </script>
</body>

阻止默认行为

event.preventDefault() //火狐
event.returnValue = false //IE
event.preventDefault ? event.preventDefault() : (event.returnValue = false); //兼容写法

阻止事件传播

event.stopPropagation() //火狐
event.cancelBubble = true //IE
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //兼容写法。

阻止事件传播:当前点击波box2,不会发生冒泡。也就不会触发box1的点击事件


<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        box2.onclick = function(ev){
            var e = ev || event;  //获取事件对象
            event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true); //阻止事件传播(兼容)
            alert('我是box2')
        }
        box1.onclick = function(){
            alert('我是box1')
        }
    </script>
</body>

总结

event对象,代表事件的状态。
event事件对象只在事件发生的过程中才有效。
event对象中包含了所有与事件相关的信息(私有的、共有的属性和方法)。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!