• DOM之事件对象

    目录

    1.什么是事件对象（Event对象）

    2.Event事件对象的使用

    1.事件对象的获取方式

    2.event中常用的属性和方法

    1.type属性

    2.target 属性和 currentTarget 属性

    3.key属性和keyCode属性

     4.获取当前坐标的属性

    5. bubbles属性

    6.eventPhase 属性

     7.event中常用的方法

    3.IE中的event对象的常用属性和方法

    1.IE中event对象的常用属性

    1.srcElement （target）属性：返回的是目标对象

    2.IE中event对象的常用方法

    1.cancelBubble 方法:取消冒泡

    2.returnValue方法：默认阻止

    4.兼容性写法

    1.事件对象的兼容性写法

    2.属性的兼容性写法

    3.方法的兼容性写法

    5.target和this

    1.什么是事件对象（Event对象）

    概念： Event 对象代表事件的状态，当DOM tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。

    2.Event事件对象的使用

    1.事件对象的获取方式

    1.直接通过event来获取

    2.     <div id="d1">666div>
    3.     <script>
    4.         var d1 = document.querySelector("#d1")
    5.         d1.onclick = function () {
    6.             console.log(event);
    7.         };
    8.     script>

    2.通过函数传参数的形式。还可以通过函数传参数的形式来使用，一般而言我们使用【形参e或event】来代替。

    2.     <div id="d1">666div>
    3.     <script>
    4.         var d1 = document.querySelector("#d1")
    5.         d1.onclick = function (e) {
    6.             console.log(e);
    7.         };
    8.     script>

     结果：

     因为event对象是用来描述【发生的事件的信息】的，而event对象当中所提供的一系列属性和方法正是用来获取这些信息的途径。

    1.     
    2.     <script>
    3.         var btn2 = document.querySelector('#btn2');
    4.         btn2.addEventListener('click',(e)=>{
    5.             console.log(e);  //PointerEvent{}  
    6.         })
    7.     script>

    2.event中常用的属性和方法

    1.type属性

     type属性用来获得 当前触发事件的类型，此属性只读（不能进行修改操作）。

    2.     <div id="d1">666div>
    3.     <script>
    4.         var d1 = document.querySelector("#d1")
    5.         d1.onclick = function () {
    6.             console.log(event);
    7.             console.log(event.type);  // //依赖于事件的触发而存在，只读属性
    8.         };
    9.     script>

    2.target 属性和 currentTarget 属性

    target：返回事件真正的触发者（事件的触发对象） 

    • this 返回的是事件绑定对象

    currentTarget：返回事件的监听者(触发的事件绑定到了哪个节点，就返回谁)

    2.     <div id="d1">d1
    3.         <div id="d2">d2div>
    4.     div>
    5.     <script>
    6.         document.getElementById("d1").onclick = function (e) {
    7.             console.log(e.target);
    8.             console.log(e.currentTarget);
    9.         };
    10.     script>

    分析：target返回的是触发点击事件使其发生的对象， 点击d2，返回的是

    d2
    ，

    currentTarget返回的是：触发的事件绑定到了哪个节点，就返回谁，触发的事件绑定到了d1那个节点，就返回d1。点击d1，target返回d1，currentTarget也返回d1

    3.button属性

    button 返回当事件被触发时，哪个鼠标按钮被点击。

    注意：DOM3标准规定：click事件只能监听左键，mousedown和 mouseup事件来判断鼠标键按下和松开,event.button属性值来区分鼠标的按键，0/1/2

    event.button=0|1|2

    参数 描述

    0 指定鼠标左键。

    1 指定鼠标中键。

    2 指定鼠标右键。

    1.     
      "d1">点我
    2.     <script>
    3.             var d1 = document.getElementById("d1");
    4.             d1.onmousedown = function(){
    5.                 if(event.button == 0){
    6.                     console.log('你按下了鼠标左键');
    7.                 }
    8.                 else if(event.button == 2){
    9.                     console.log('你按下了鼠标右键');
    10.                 }else{
    11.                     console.log('你按下了其它键');
    12.                 }
    13.             }
    14.     script>

    注意点：IE8 及更早IE版本有不同的参数：

    参数 描述

    1 指定鼠标左键。 (IE8及更早IE版本)

    4 指定鼠标中键。 (IE8及更早IE版本)

    2 指定鼠标右键。

    3.key属性和keyCode属性

    key是哪个键，返回的是按下的键的键名(键码)

    keyCode返回keydown和keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符(ASCII码值)；(firefox2不支持 event.keycode，可以用 event.which替代 )

     4.获取当前坐标的属性

    pageX  鼠标点击的  X 坐标；(包含body隐藏的)
    pageY  鼠标点击的  Y 坐标；(包含body隐藏的)
    clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
    screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
    movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离
    offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关

    5. bubbles属性

    bubbles属性用来获得 当前触发事件的类型是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false。

    必须注意的是：bubbles属性指的是该事件是否冒泡。和事件处理机制无关！！！！

    2.     <style>
    3.         #d1 {
    4.             width: 200px;
    5.             height: 200px;
    6.             background-color: blue;
    7.         }
    8.     style>
    9.     <div id="d1">div>
    10.     <script>
    11.         document.getElementById('d1').onclick = function () {
    12.             console.log(event.bubbles);   //true
    13.         };
    14.  
    15.         document.getElementById('d1').addEventListener('mouseenter', function (e) {
    16.             console.log(event.bubbles);   //false
    17.         });
    18.     script>

     分析：点击事件支持冒泡，所以返回true，鼠标移动事件mouseenter不支持冒泡，所以返回false。

    6.eventPhase 属性

    eventPhase：事件传导至【当前节点】时处于什么的状态。

    1：事件处于捕获状态

    2：事件处于真正的触发者

    3：事件处于冒泡状态

     7.event中常用的方法

    stopPropgation()：阻止冒泡。

    preventDefault()：默认阻止。

    eg： 下面代码能够监测右键单击操作，并阻止发生默认行为。

    1. document.onclick = function (e) {
    2.     var e = e || window.event;  //标准化事件对象
    3.     if (e.button == 2) {
    4.         e.preventDefault();
    5.         return false;
    6.     }
    7. }

    3.IE中的event对象的常用属性和方法

    1.IE中event对象的常用属性

    1.srcElement （target）属性：返回的是目标对象

    2.IE中event对象的常用方法

    1.cancelBubble 方法:取消冒泡

    2.returnValue方法：默认阻止

    4.兼容性写法

    通过对IE下event的方法和属性和非IE的方法和属性的学习，能够感觉到两种情况的很多属性和方法大致都相同，只不过会在某些特殊方法和属性上面存在不同的兼容性写法。因此我们可以提出一些同时满足不同浏览器兼容性的写法。

    1.事件对象的兼容性写法

    a) 事件处理函数形参ev(event)，W3C制定的标准，IE9以下不行
    b) 全局对象 window.event用于IE9以下
    // 兼容性写法 var event= ev|| window.event 

     分析：如果事件处理函数没有设置形参ev，因为事件会经过事件链传递，会经过window，window有个属性event，此时事件对象就是window.event,就是event。

    1.     
    2.     <script>
    3.         function fn(){
    4.             console.log(event);   //PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
    5.         }
    6.     script>

    如果设置了形参，上面的兼容性写法就不对，例如：

    1.     
    2.     <script>
    3.         function fn(ev){
    4.             console.log(ev);   //100
    5.         }
    6.     script>

    怎么能又设置了形参，又想兼容呢？

    1.     
    2.     <script>
    3.         function fn(e){
    4.             ev = (e.constructor == PointerEvent && e)||window.event ;   //PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
    5.             console.log(ev);
    6.         }
    7.     script>

    分析：判定参数e的构造对象是不是跟 事件对象的构造函数 PointerEvent 一样，一样的花就是参数e，不一样就是window.event

    1.         
      "d1">666
    2.         <script>
    3.             var d1 = document.querySelector("#d1")
    4.             d1.onclick = function (e) {
    5.                 e = (e.constructor == PointerEvent && e)||window.event ;
    6.                 console.log(e);PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
    7.             };
    8.         script>

    2.属性的兼容性写法

        event.target    火狐只有这个
        event.srcElement    IE6/78只有这个
        这两个chrome都有    
        兼容性写法 var ele=event.target|| event.srcElement

    3.方法的兼容性写法

    (1)因为两种情况下的event对象获取方式并不同，所以希望能够自定义一个对象来替代event对象的使用。

    2)因为想要自定义对象在功能上和系统event对象的方法相同，所以要给自定义对象添加方法

    1.

    5.target和this

    targt属性：谁触发了事件target就是谁

    this： 谁绑定了事件，其执行函数里面的this就是谁

    2.     <style>
    3.         *{margin: 0;}
    4.         .box1{
    5.             width: 400px;
    6.             height: 300px;
    7.             background-color: brown;
    8.             cursor: pointer;
    9.             position:relative;
    10.             left: 100px;
    11.             top: 20px;
    12.         }
    13.         .box2{
    14.             width: 200px;
    15.             height: 200px;
    16.             background-color: red;
    17.             cursor: pointer;
    18.             /* 让box2带着box3从box1的区域出去 */
    19.             position:absolute;
    20.             left: 500px;
    21.             top: 20px;
    22.         }
    23.         .box3{
    24.             width: 100px;
    25.             height: 100px;
    26.             background-color: gold;
    27.             cursor: pointer;
    28.             margin: 10px;
    29.             padding: 5px;
    30.             border: 3px solid saddlebrown;
    31.         }
    32.     style>
    33.     <div class="box1">
    34.         <div class="box2">
    35.             <div class="box3">div>
    36.         div>
    37.     div>
    38.     <script>
    39.         var box1 = document.querySelector('.box1');
    40.         var box2 = document.querySelector('.box2');
    41.         var box3 = document.querySelector('.box3');
    42.         box1.onclick = function(e){
    43.             //e是事件对象
    44.             console.log(this);
    45.             console.log('box111111',e.target);
    46.         }
    47.     script>

    分析：只给了box1绑定点击事件，点击box2和box3时，target分别打印box2 和box2 ，但this一直指向box1

    1.正常的属性绑定，this指向绑定的那个元素

    2.     <style>
    3.         .box{
    4.             width: 200px;
    5.             height: 200px;
    6.             background-color: blue;
    7.         }
    8.     style>
    9.     <div class="box">666div>
    10.     <script>
    11.         var box = document.querySelector('.box');
    12.         box.onclick = function(){
    13.             console.log(this); //
      666
    14.         }
    15.     script>

    2.行内式绑定的 this指向

    1.     
    2.     <script>
    3.         function fn(e){
    4.             console.log(e);  // button
    5.         }
    6.     script>
    1.     
    2.     <script>
    3.         function fn(e){
    4.             console.log(e,this);  // button   window
    5.         }
    6.     script>

    分析： console.log(e,this);里面的this，function函数里面的，其在script全局作用域下，所以是window

    1.     
    2.     <script>
    3.         var btn2 = document.querySelector('#btn2');
    4.         btn2.addEventListener('click',(e)=>{
    5.             console.log(e,this);  //PointerEvent{}  window
    6.         })
    7.     script>

  • 相关阅读:
    WPF dataGrid初步使用案例
    R语言向前或者向后移动时间序列数据（自定义滞后或者超前的期数）：使用lag函数将时间序列数据向后移动一天（设置参数k为负值）
    基于 Android 的文件同步设计方案
    K8S kubesphere安装mysql
    redis运维(七)基础通用命令
    css-pseudo-class锚伪类
    YBTOJ 贪心算法合集
    egg中的一些基本使用注意事项以及如何跨域（CORS）、JSONP、Proxy
    Explain详解与索引最佳实践
    HDFS将普通用户添加到超级用户组
  • 原文地址：https://blog.csdn.net/weixin_47075145/article/details/125873613