事件对象的属性和方法

最新推荐文章于 2024-06-28 16:45:56 发布

南南合作

最新推荐文章于 2024-06-28 16:45:56 发布

阅读量890

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42442123/article/details/83792314

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

 <body>
    <input type="button" value="按钮" id="btn">
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function(e) {
            console.log(e)           
        }
    </script>
</body>

e就是事件对象，有浏览器兼容问题，在老版本的IE中获取事件对象方式是window.event
处理事件对象的浏览器兼容性：e=e||window.event

e.eventPhase查看事件触发时所处的阶段。值为1是捕获阶段，值为2是目标阶段，值为3是冒泡阶段
e.target 获取真正触发事件的对象，有浏览器兼容问题，在老版本的IE中用e.srcElement。兼容处理： var target = e.target || e.srcElement;
e.currentTarget事件处理函数所属的对象this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="box2">
      <div id="box3">
      </div>
    </div>
  </div>
  <script>
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3'); 
    var array = [box1, box2, box3];
    for (var i = 0; i < array.length; i++) {
      var box = array[i];
      box.onclick = function (e) {
        e = e || window.event;
        // 事件的阶段
        console.log(e.eventPhase);
        // e.target 获取真正触发事件的对象
        var target = e.target || e.srcElement;
        console.log(target);
        // e.curentTarget   和this一样 获取事件处理函数所属的对象
        console.log(e.currentTarget);
        console.log(this);
      }
    }    
  </script>
</body>
</html>

点击蓝色box3返回结果如图
在这里插入图片描述
4. e.type获取事件名称

 <div id="box"></div> 
  <script>
    var box = document.getElementById('box');    
    box.onclick = fn;
    box.onmouseover = fn;
    box.onmouseout = fn;
    
    function fn(e) {
      e = e || window.event;
      switch (e.type) {
        case 'click': 
          console.log('点击box');
          break;
        case 'mouseover': 
          console.log('鼠标经过box');
          break;
        case 'mouseout': 
          console.log('鼠标离开box');
          break;
      }
    }
  </script>

e.preventDefault() 取消默认行为
e.clientX/e.clientY 所有浏览器都支持，窗口位置，浏览器可视区域的位置
e.pageX/e.pageY IE8以前不支持，页面位置

南南合作

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件对象的属性和方法

&amp;lt;body&amp;gt; &amp;lt;input type=&quot;button&quot; value=&quot;按钮&quot; id=&quot;btn&quot;&amp;gt; &amp;lt;script&amp;gt; var btn = document.getElementById('btn'); btn.onclick
复制链接

扫一扫

专栏目录