jacascript 事件对象event

Posted 学习的时候不说话

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jacascript 事件对象event相关的知识,希望对你有一定的参考价值。

前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!

  在触发DOM上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持 event 对象,但有兼容性问题。

 

获取事件对象

  一般地,event 对象是事件程序的第一个参数。IE8及以下浏览器不支持

  另一种方法是直接使用 event 变量,firefox 浏览器不支持

  获取事件对象的常见兼容写法:

        <div id="box" style="height:200px;width:200px;background:pink;"></div>
        <script>
            var oBox = document.getElementById(box);
            oBox.onclick = function(ev){
                ev = ev || event;//获取事件对象的常见兼容写法
                box.innerhtml = ev;
            }
        </script>

 

事件类型

  事件有很多类型,事件对象中的 type 属性表示被触发的事件类型;

        <div id="box" style="height:200px;width:200px;background:pink;"></div>
        <script>
            var oBox = document.getElementById(box);
            oBox.onclick = function(ev){
                ev = ev || event;//获取事件对象的常见兼容写法
                box.innerHTML = ev.type;//事件对象中的type属性表示被触发的事件类型
            }
        </script>

 

事件目标

  关于事件目标,共有 currentTarget、target 和 srcElement 这三个属性;

  currentTarget 属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点;IE8及以下浏览器不支持 ;

  currentTarget 与事件中的 this 指向相同;

  target 属性返回事件的实际目标节点;IE8及以下浏览器不支持

  srcElement 属性与 target 属性功能一致,返回事件的实际目标节点;firefox 浏览器不支持

        <style type="text/css">
            #box{height:200px;width:200px;background-color:pink;}
            #child{height: 100px;width: 100px;background-color: green;}
        </style>
        <div id="box">
            <div id="child"></div>
        </div>
        <script>
            var oBox = document.getElementById(box);
            var oChild = document.getElementById(child);
            oBox.onclick = function(ev){
                ev = ev || event;
                //currentTarget属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点
                console.log(ev.currentTarget);//<div id="box">...</div>
                
                //currentTarget与事件中的this指向相同
                console.log(ev.currentTarget === this);//true
                
                //target属性返回事件的实际目标节点,IE8及以下浏览器不支持
                //srcElement 属性与 target 属性功能一致,返回事件的实际目标节点;firefox 浏览器不支持;
                //兼容性写法:
                var target = ev.target || ev.srcElement;
                console.log(target);//<div id="child"></div>
            }
        </script>

 

事件代理

  由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation),也叫事件委托;

  事件代理应用事件目标的 target 和 srcElement 属性完成。利用事件代理,可以提高性能及降低代码复杂度

        <style>
            #box{background-color: pink;}
            .in{height: 30px;}
        </style>
        <ul id="box">
            <li class="in">1</li>
            <li class="in">2</li>
            <li class="in">3</li>
            <li class="in">4</li>
            <li class="in">5</li>
        </ul>
        <script>
            var oBox = document.getElementById(box);
            oBox.onmouseover = function(ev){
                ev = ev || event;
                var target = ev.target || ev.srcElement;
                target.style.backgroundColor = lightblue;
            }
            oBox.onmouseout = function(ev){
                ev = ev || event;
                var target = ev.target || ev.srcElement;
                target.style.backgroundColor = pink;
            }
        </script>

 

事件冒泡

  事件冒泡是事件流的第三个阶段,通过事件冒泡可以在这个阶段对事件做出响应;

  关于冒泡,事件对象中包含 bubbles、cancelBubble、stopPropagation() 和 stopImmediatePropagation() 这四个相关的属性和方法;

  bubbles 属性返回一个布尔值,表示当前事件是否会冒泡。该属性为只读属性。发生在文档元素上的大部分事件都会冒泡,但 focus、blur 和 scroll 事件不会冒泡。所以,除了这三个事件 bubbles 属性返回 false 外,其他事件该属性都为true;

  stopPropagation() 方法表示取消事件的进一步捕获或冒泡,但无法阻止同一事件的其他监听函数被调用,无返回值。IE8及以下浏览器不支持

  stopImmediatePropagation() 方法不仅可以取消事件的进一步捕获或冒泡,而且可以阻止同一个事件的其他监听函数被调用,无返回值。IE8及以下浏览器不支持

        <div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
        <script>
            var oBox = document.getElementById(box);
            oBox.onclick = function(ev){
                ev = ev || event;
                //bubbles 属性返回一个布尔值,表示当前事件是否会冒泡
                console.log(ev.bubbles);//true
            }
            oBox.addEventListener(click,function(ev){
                ev = ev || event;
                //stopPropagation() 方法表示取消事件的进一步捕获或冒泡,
                ev.stopPropagation();
                oBox.innerHTML +=stopPropagation() 方法表示取消事件的进一步捕获或冒泡<br/>;    
            })
            
            //stopPropagation() 方法表示取消事件的进一步捕获或冒泡,但无法阻止同一事件的其他监听函数被调用
            oBox.addEventListener(click,function(ev){
                ev = ev || event;
                oBox.innerHTML += 但无法阻止同一事件的其他监听函数被调用;    
            })
            
            document.body.onclick = function(ev){
                oBox.innerHTML += 冒泡已被阻止;
            }
        </script>

  cancelBubble 属性只能用于阻止冒泡,无法阻止捕获阶段。该值可读写,默认值是false。当设置为 true 时,cancelBubble 可以取消事件冒泡;该属性全浏览器支持,但并不是标准写法

        <script type="text/javascript">
            var handler = function(ev){
                ev = ev || event;
                if(ev.stopPropagation){
                    ev.stopPropagation();
                }else{
                    ev.cancelBubble = true;
                }
            }
        </script>

 

事件流

  eventPhase 属性返回一个整数值,表示事件目前所处的事件流阶段,IE8及以下浏览器不支持

  0表示事件没有发生,1表示捕获阶段,2表示目标阶段,3表示冒泡阶段;

取消默认行为

  关于取消默认行为的属性包括 cancelable、defaultPrevented、preventDefault() 和 returnValue ;

  cancelable 属性返回一个布尔值,表示事件是否可以取消。该属性为只读属性。返回true时,表示可以取消。否则,表示不可取消;IE8及以下浏览器不支持

  defaultPrevented 属性表示默认行为是否被阻止,返回 true 时表示被阻止,返回 false 时,表示未被阻止;IE8及以下浏览器不支持

        <div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
        <script>
            var oBox = document.getElementById(box);
            oBox.onclick = function(ev){
                ev = ev || event;
                //cancelable 属性返回一个布尔值,表示事件是否可以取消
                console.log(ev.cancelable );//true
                //defaultPrevented 属性表示默认行为是否被阻止
                console.log(ev.defaultPrevented );//false
            }
        </script>

 

  preventDefault() 方法取消浏览器对当前事件的默认行为,无返回值;IE8及以下浏览器不支持

        <div id="box" style="height: 200px;width: 200px; background-color: pink;"></div>
        <script>
            var oBox = document.getElementById(box);
            oBox.onclick = function(ev){
                ev = ev || event;
                //cancelable 属性返回一个布尔值,表示事件是否可以取消
                console.log(ev.cancelable );//true
                //defaultPrevented 属性表示默认行为是否被阻止
                console.log(ev.defaultPrevented );//false
                
                //preventDefault() 方法取消浏览器对当前事件的默认行为
                ev.preventDefault();
                //defaultPrevented 属性表示默认行为是否被阻止
                console.log(ev.defaultPrevented );//true
            }
        </script>

 

  returnValue 属性可读写,默认值是true,但将其设置为 false 就可以取消事件的默认行为,与 preventDefault() 方法的作用相同;firefox 和 IE9及以上浏览器不支持

  兼容性写法:

        <script type="text/javascript">
            var handler = function(e){
                ev = ev || event;
                if(ev.preventDefault){
                    ev.preventDefault();
                }else{
                    ev.returnValue = false;
                }
            }
        </script>

 

以上是关于jacascript 事件对象event的主要内容,如果未能解决你的问题,请参考以下文章

jacascript 事件流

jacascript document对象

jquery之event与originalEvent的关系event事件对象用法浅析

jacascript JSON对象的学习

jacascript 函数参数与 arguments 对象

trigger()的event事件对象之坑