JavaScript

[test014] 複数オブジェクトのトリガーを実行

複数オブジェクトのトリガーを実行

概要

querySelectorAllやgetElementsByClassNameなどでえられる複数のオブジェクトのトリガーを実効する

ソース

HTML

test014.htm
<html>
<head>
<script type="text/javascript" src="test014.js">
<title>複数オブジェクトのトリガーを実行</title>
</head>
<body>
<input type="button" id="all" value="all">
<input type="button" onclick="console.log(1)" class="hoge" value="1">
<input type="button" onclick="console.log(2)" class="hoge" value="2">
<input type="button" onclick="console.log(3)" class="hoge" value="3">
</body>
</html>  

※hogeクラスのボタンは便宜上直にonclickを書き込んであります

javascript

test014.js
[NodeList,HTMLCollection].forEach(function(x){
  x.prototype.trigger=function(eventStr){
    var ret=[];
    Array.prototype.map.call(this,function(ele){
      if (document.createEvent) {
        var e = document.createEvent("HTMLEvents");
        e.initEvent(eventStr, true, true );
      return ele.dispatchEvent(e);
      } else {
        var e = document.createEventObject();
        return ele.fireEvent("on"+eventStr, e);
      }
    });
  };
});
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#all').addEventListener('click',function(e){
    document.querySelectorAll('.hoge').trigger('click');
    document.getElementsByClassName('hoge').trigger('click');
  });
});

その他

参考

元ネタ

動くサンプル