问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JavaScript事件对象

头像
timeofsunrise
    1.6k1089136

    clipboard.png

    event对象包含与创建它的特定事件有关的属性和方法。
触发事件的类型不一样，可用的属性和方法也不一样。
下表中列出了通用的属性和方法。


属性/方法              类型          读/写   描述
bubbles                Boolean       只读    事件是否冒泡
cancelable             Boolean       只读    是否可以取消事件的默认行为
curentTarget           Element       只读    当前正在处理事件的事件处理程序的元素
detail                 Integer       只读    与事件相关的细节信息
eventPhase             Integer       只读    调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”阶段，3表示冒泡阶段
preventDefault()       Function      只读    取消事件的默认行为
stopPropagation()      Function      只读    取消事件的进一步捕获或冒泡。如果bubbles为true则可以使用该方法
target                 Element       只读    事件的目标
type                   String        只读    被触发事件的类型
view                   AbstractView  只读    与事件关联的抽象视图。等同于发生事件的window对象


在事件处理程序的内部，对象this始终等于curentTarget的值，target包含的是事件的实际目标。

    文中的curentTarget 和 target 到底有什么不一样？

    javascript
    阅读 4.6k
    6 个回答
    得票最新
    头像
    zp1996
      3.2k23763
      ✓ 已被采纳

      直接一个demo，就明白了，target是说你的事件是由哪个dom触发的，而curretnTarget是说触发了哪个dom上的事件。

      <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            #test{
                width: 400px;
                height: 400px;
                background-color: blue;
            }
            #child{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="test">
            <div id="child"></div>
        </div>
        <script type="text/javascript">
            document.getElementById("test").onclick = function (e) {
                console.log(e.target, e.currentTarget);
            };
        </script>
    </body>
</html>
      头像
      scort
        8.4k2633
        头像
        nealnote
          3.5k168
          <ul>
  <li>
    li <span>span</span>
  </li>
</ul>
<script type="text/javascript">
document.querySelector('ul').addEventListener('click', function(e){
  console.log('target', e.target);
  console.log('curentTarget', e.currentTarget);
}, false)
</script>

          target 触发的事件的元素，也就是你实际点击的目标 点击span 就是span,点击li 就是li
          curentTarget 当前处理事件元素，示例中永远是ul

          头像
          杰枫Jeff
            2k103252
            头像
            henry
              12411727

              你用过事件委托就明白什么不同了。

              头像
              Leo_Eatle
                3871613

                举个例子

                var toggleEvent = function(e){
    console.log(e.target);
    console.log(e.currentTarget);
}

<div onclick = toggleEvent()>
    <button>
        点我！
    </button>
</div>

                这个时候target是button，currentTarget是div，因为div是绑定事件的对象

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                被 2 篇内容引用
                推荐问题
                宣传栏