addEventListenerで複数のイベントをbindしたい

###前提・実現したいこと
jQuery使って書いてたものを最近は使わずに書こうとしています。

Javascript
1$(".something").on("mousedown touchstart", function(e) {

みたいなのを

Javascript
1document.querySelector(".something").addEventListener("

と置き換えたいのですが、

###発生している問題・エラーメッセージ

var someHandler = function(e) { colsole.log(e) };
document.querySelector(".something").addEventListener("mousedown", someHandler, false).addEventListener("touchstart", someHandler, false);

みたいな書き方をしないといけないのでしょうか。
jQueryでやってたように一つで指定できないのかなと思いまして。

Javascript
1"mousedown touchstart"

###試したこと
ひとまず上記のようにaddEventListenerに書いたのですが拾ってくれませんでした。

もう少し短く簡単に書けるやり方があれば教えてください。

行動規範の内容に同意します

回答3件

以下のように行ってみてはいかがでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script>
9    document.addEventListener("DOMContentLoaded", function () {
10        var events = "mousedown touchstart";
11        for (var i = 0; i < events.split(" ").length; i++) {
12            document.querySelector(".something").addEventListener(events.split(" ")[i], function () {
13
14            }, false);
15        }
16    }, false);
17</script>
18</body>
19</html>

もしくは、以下のようにも行えると思いますが、いかがでしょう。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script>
9    document.addEventListener("DOMContentLoaded", function () {
10        ("mousedown touchstart".split(" ")).forEach(function (e) {
11            document.querySelector(".something").addEventListener(e, function () {
12
13            }, false);
14        });
15    }, false);
16</script>
17</body>
18</html>

投稿2017/04/27 14:57

編集2017/04/27 16:54

s8_chu

総合スコア14731

galerius

2017/04/28 05:25

やはり一回の呼び出しではむずかしいのですね。どうもありがとうございます。

行動規範の内容に同意します

ベストアンサー

2回呼び出す

addEventListener には、複数のイベントタイプにまとめて同じイベントハンドラ関数を設定する方法はない為、2回呼び出す必要があります。

JavaScript
1function handleEvent (event) { console.log(event); }
2var element = document.querySelector('.something');
3element.addEventListener('mousedown', handleEvent, false);
4element.addEventListener('touchstart', handleEvent, false);

関数化

複数のイベントタイプに同じイベントハンドラ関数を設定するコードが多いのであれば、関数化すると良いと思います。

JavaScript
1function addEventListenerMultiType (element, types, listener, useCapture) {
2  for (var i = 0, types = types.trim().split(/\s+/), len = types.length; i < len; ++i) {
3    element.addEventListener(types[i], listener, useCapture);
4  }
5}
6
7addEventListenerMultiType('mousedown touchstart', function handleEvent (event) { console.log(event); }, false);

関数式 (※無名関数を含む)

関数式(無名関数を含む)の取り扱いには注意して下さい。
for ループ中で関数式を addEventListener に渡すコードを書くと、ループ回数分だけ新しい関数オブジェクトが生成され、メモリを消費します。
内部コードが同じ関数式を使いまわす場合には変数にキャッシュしておけば、メモリを節約できます。

Re: galerius さん

投稿2017/04/27 22:47

think49

総合スコア18189

galerius

2017/04/28 05:23

やはりこうなりますか。どうもありがとうございます。

行動規範の内容に同意します

別の考え方
とりあえずdocumentにつけておいて、セレクタとなる条件をあとから探る

javascript
1<script>
2["click","mouseover"].forEach(function(i){document.addEventListener(i,function(e){myFunc(e);})});
3function myFunc(e){
4  var ta=e.target;
5  var ty=e.type;
6  if(ta.nodeName=="DIV" && ty=="mouseover"){
7    ta.style.backgroundColor="red";
8  }
9  if(ta.id=="hoge" && ty=="click"){
10    ta.value="fuga";
11  }
12}
13</script>
14<input type="button" id="hoge" value="hoge">
15<div>div</div>
16