javascriptによりhtmlタグにイベントを追加する方法

<input type="text" class="name"> に対し、ページのロード後に下記のchangeイベントを追加したいと思っています。背景としては、WordPressプラグインによりinputが自動生成されるため、後からイベントを追加する必要がございます。

addEventListenerかなとも思い色々試してみましたが、どうしても所望の動作をいたしません。

よろしければご教示いただければ幸いです。
何卒よろしくお願いいたします。

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

回答2件

イベント付与1つだけならonchangeで問題ないかと。
id付けられない場合はこんな感じで。

javascript
1<html>
2  <body>
3      <input type="text" id="trg" class="name">
4      <script type="text/javascript">
5        window.onload = function() {
6          var els = document.getElementsByTagName('input');
7          var fn = function(e){
8            var target = e.target || e.srcElement;
9            console.log(target.value);
10          };
11          for (var i = 0; i < els.length; i++){
12            if( els[i].addEventListener ){
13              els[i].addEventListener( 'change', fn, false );
14            }
15            else if( els[i].attachEvent ){ //IE
16              els[i].attachEvent( 'onchange', fn );
17            }
18            else{ //DOM0
19              els[i].onclick = fn
20            }
21          }
22        };
23      </script>
24  </body>
25</html>

2015/11/06 21:00 コード修正

投稿2015/11/06 02:55

編集2015/11/06 13:46

hirohiro

総合スコア2068

think49

2015/11/06 11:12

IE8- で this は期待通りに動作しなかったような。レガシーコードを書くなら attachEvent と併用した方が良いと思います。

hirohiro

2015/11/06 12:05

ありがとうございます。コード修正しておきました

think49

2015/11/06 13:28

event.target と this は等価ではありません(this === event.currentTarget ですが、attachEvent でこれを得る方法はありません)。この場合は event.target で十分なので下記コードのように書けます。 var target = event.target || event.srcElement;

hirohiro

2015/11/06 13:48 編集

これは重ね重ねどうもありがとうございます。投稿コードのほう修正しておきました。 IE8はまだもう少し対応対象になりえますし、結構大変ですね。

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

ピュアなjsで書くならこんな感じでしょうか。

<html>
<script language="javascript">
window.onload = function() {
    tx.onchange = function() {alert("変更されました");};
}
</script>
<input type="text" id="tx"></input>
</html>

投稿2015/11/06 02:26