btn.addEventListenerから呼ぶ関数に任意引数を渡すことはできますか。

Question

前提・実現したいこと

javascriptでaddEventListenerから呼ぶ関数に
任意引数を持たすことはできますか。

要件:eventを取得しつつ、引数を渡したい

該当のソースコード

■■ここまでは確認しています。■■
MouseEventと同時に任意引数を含めたい

var btn = document.getElementById('btn');
btn.addEventListener('mousedown', MouseDownXxx)

function MouseDownXxx(evt: MouseEvent) {
   let xz
   let yz

   xz = evt.x
   yz = evt.y
}

■■やりたいことのイメージ■■

var btn = document.getElementById('btn');
var 任意引数
btn.addEventListener('mousedown', MouseDownXxx(evt, 任意引数))

function MouseDownXxx(evt: MouseEvent, 任意引数) {

   let xz
   let yz
   let goukei

   xz = evt.x
   yz = evt.y

　 goukei = 任意引数 + xz

 　console.log(goukei );

}

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[eojvkx]

修正しました。ご指摘いただきありがとうございました。

Answer 1

Function.prototype.bind

this束縛。

btn.addEventListener('mousedown', handleMousedown.bind({xz: 0, yz: 0}), false);

引数束縛。

btn.addEventListener('mousedown', handleMousedown.bind(btn, xz, yz), false); // 既存の引数は後ろに追い出される(eventは第三引数となる

handleEvent

this束縛。

btn.addEventListener('mousedown', {
  xz: 0,
  yz: 0,
  handleEvent: handleMousedown
}, false);

data-*属性

<input type="button" data-xz="0" data-xy="0" value="sample" />
<script>
'use strict';
const button = document.querySelector('input[type="button"]');

button.addEventListener('mousedown', function handleMousedown (event) {
  const input = event.target;

  const xz = input.getAttribute('data-xz');
  const xy = input.getAttribute('data-xy');
}, false);
</script>

WeakMap

const wm = new WeakMap([[btn, {xz: 0, xy: 0}]]);

button.addEventListener('mousedown', function handleMousedown (event) {
  const position = wm.get(event.currentTarget);

  const xz = position.xz;
  const xy = position.xy;
}, false);

Re: eojvkx さん

Comments

[eojvkx]

下記の.bind方法でうまくできました。
ありがとうございました。

btn.addEventListener('mousedown', handleMousedown.bind(btn, xz, yz), false); // 既存の引数は後ろに追い出される(eventは第三引数となる

Answer 2

無名関数を挟むのが手っ取り早いかと思います。

var btn = document.getElementById('btn');
var arg;
btn.addEventListener('mousedown', evt => MouseDownXxx(evt, arg))

Comments

[eojvkx]

var btn = document.getElementById('btn');
var arg=1;
var evt : MouseEvent

btn.addEventListener('mousedown', xxx=> MouseDownXxx(evt, arg))

下記の様にvar evt:MouseEventを宣言して、任意の引数を
渡すことはできたのですが、

evtの中身がundefindeになります(何もセットしていないので当たり前ですが)
evtの値を取得するにはどのような記述をすれば良いのでしょうか。

[maisumakun]

外側でのevtの宣言は不要です。無名関数に渡ってくるxxx自体がイベントオブジェクトなので、それをそのままMouseDownXxxに渡してください。