event.curretTargetとevent.targetの違い

新人のMです。 今回も短めの記事で行きます。

イベントが発火した要素の取得の仕方

イベントが発火したときに、イベントリスナにイベントオブジェクト(最初の引数)が渡されます。 このオブジェクトにどの要素でイベントが発火したのか示すプロパティが2種類あります。 その2種類event.currentTargetとevent.targetの違いについて見て行きたいと思います。

エレメント.addEventListener(イベント, function(e) {}, false);
$(セレクタ).on(イベント, function(e) {});

event.currentTarget

イベントリスナをバインドした要素をイベントが通過した時の要素(イベントリスナがバインドされてる要素自身)を表します

event.target

イベントが発生した要素を表します。

以下の例で説明します。 青い部分をクリックすると、".outer"にバインドしたイベントリスナに「currentTarget=".outer"」、「target=".outer"」なイベントオブジェクトが渡されます。 他の色の部分をクリックすると、".inner"にバインドしたイベントリスナに「currentTarget=".inner"」、「target=".inner"」なイベントオブジェクト、".outer"にバインドしたイベントリスナに「currentTarget=".outer"」、「target=".inner"」なイベントオブジェクトが渡されます。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
.outer {
    width: 100px;
    height: 100px;
    background: blue;
}
.inner {
    width: 50px;
    height: 25px;
}
.inner:nth-child(1) {
    background: pink;
}
.inner:nth-child(2) {
    background: purple;
}
.inner:nth-child(3) {
    background: orange;
}
.inner:nth-child(4) {
    background: green;
}
</style>
<script type="text/javascript">
$(document).on("click", ".outer", function(e) {console.log(e.currentTarget, e.target);});
$(document).on("click", ".inner", function(e) {console.log(e.currentTarget, e.target);});
</script>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</body>
</html>

まとめ

event.currentTargetとevent.targetの違いについて見てみました。 currentTarget=バインドした要素、target=イベントが発生した要素と覚えておくと簡単かと思います。 currentTargetのほうがバインドした要素を表しているのでイベントリスナを書くときには、わかりやすいと思います。