事件对象e

最新推荐文章于 2023-06-10 17:28:29 发布

是要开心的婷婷呀~

最新推荐文章于 2023-06-10 17:28:29 发布

阅读量461

点赞数

文章标签： html5 css html

本文链接：https://blog.csdn.net/weixin_48837605/article/details/119994149

版权

一.事件对象是什么

事件对象本质是对象,这个对象中里有事件触发时的相关的信息

比如:鼠标点击事件的时候,事件对象中就保存了鼠标点在哪个位置的信息

一般命名为event,ev,e

二.部分常用的属性

type

获取当前的事件类型("click","mousemove" "keyup")等

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

offestX/offestY

获取光标相对于当前Dom元素左上角的位置

pageX/pageY

获取光标相对于文档所在的位置

e.target 是目标对象,事件委托中经常使用

e.path[0] 拿到数组中的第一位就是自己点击的dom对象,跟e.target 打印出来是一致的,没看出是啥区别,欢迎小伙伴评论处赐教

e.tartget.files[0] 用于上传的图片,文件等第一的数组就是上传的文件

如下图

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style >
    #box {
      width: 200px;
      height: 100px;
      background: blue;
      line-height: 100px;
    }

  </style>
  <script type="text/javascript">
    window.onload = function () {
      document.getElementById("box").addEventListener("click",function (e) {
        console.log(e.target);
        console.log(e.target.id);
        console.log(e.target.tagName);
        console.log(e.target.nodeName);
        console.log(e.target.classList);
        console.log(e.target.className);
        console.log(e.target.innerHTML);
        console.log(e.target.innerText);
        console.log(e.path[0]);
        console.log(e.type);
      })
    }

  </script>
</head>

<body>
  <div id="box" class="box  is  good"><span>我爱前端,前端爱我</span></div>
</body>

</html>

是要开心的婷婷呀~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件对象e

一.事件对象是什么事件对象本质是对象,这个对象中里有事件触发时的相关的信息比如:鼠标点击事件的时候,事件对象中就保存了鼠标点在哪个位置的信息一般命名为event,ev,e二.部分常用的属性type 获取当前的事件类型("click","mousemove" "keyup")等clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置offestX/offestY 获取光标相对于当前Dom元素左上角的位置page...
复制链接

扫一扫