Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

addEventListenerで関数に引数を渡す

More than 3 years have passed since last update.

addEventListenerでイベントをバインドする時にハマった事があるので書いておきます。

ハマった内容

とりあえずコードを見て下さい。

var btn = document.querySelector('.jscBtn');
// clickFunction に引数を渡したい
btn.addEventListener('click', clickFunction, false);

function clickFunction(value){
    console.log(value):
}

clickFunction関数でvalueを使うため、addEventListener時に引数として渡そうとしていますが、上手くいっていないパターンです。

大体うまくいってる例

以下のようにしたら、うまく行きそうな気がしますね。

var btn = document.querySelector('.jscBtn');
btn.addEventListener('click', function(){
    // clickFunction に引数を渡す
    clickFunction('my name'):
}, false);

function clickFunction(value){
    console.log(value): // 'my name'
}

関数に変数を渡すところまでは上手くいっていますが、別の問題が出てきます。以下のコードを見てください。

var btn = document.querySelector('.jscBtn');
btn.addEventListener('click', function(){
    clickFunction('my name'):
}, false);

function clickFunction(value){
    console.log(value): // 'my name'
}

// クリックイベントを解除したいが、うまくいかない
btn.removeEventListener('click', clickFunction , false);

イベントをバインドする事は出来るものの、解除(アンバインド)する事が出来ません。

成功例

var btn = document.querySelector('.jscBtn');
btn.addEventListener('click', clickFunction, false);
btn.eventParam = 'my name';

function clickFunction(event){
    console.log(event.target.eventParam): // 'my name'
}

イベントをバインドしたDOMオブジェクトのパラメータに引数を入れておいて、イベント発火時に参照する形です。
コメントで頂いたアドバイスを元に修正を加えてみました。removeEventListenerでイベントを解除出来るようにもしています。

index.html
<button class="jscBtn" data-name='testName'>Click</button>
<button class="jscRemoveEventBtn">removeEvent</button>
index.js
const btn = document.querySelector('.jscBtn');
const removeEventBtn = document.querySelector('.jscRemoveEventBtn');

const myEvent = function(event){
    console.log(event.target.dataset.name);
}

btn.addEventListener('click', myEvent, false);
removeEventBtn.addEventListener('click', function(){
    btn.removeEventListener('click', myEvent);
}, false);

デモ

https://jsfiddle.net/8o0z48tb/

気になる点

windowオブジェクトにイベントをバインドする時も、windowオブジェクトに関数の引数を入れる方法で実装は出来るものの、完全にアンチパターンなので他の方法を模索しています。

「俺はこうやってるぞ」等、より良い方法があれば教えて頂けたら嬉しいです。

rukiadia
Front-end engineer in Tokyo
http://rukiadia.hatenablog.jp/
connehito
コネヒト株式会社は、「あなたの家族像を実現する社会をつくる」をビジョンに掲げる、現代社会における多様な家族像の実現を目指す会社。女性向けの「ママリ」「ママRework」や家族の購買の意思決定を支える「ママリ口コミ大賞」、男性育休冊子などを展開。
https://connehito.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away