js事件对象

印度阿三17 2020-02-22

展开全文

在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>