イベント割り当て方法いろいろonclick属性等にハンドラを割り当てるこの方法は現在ではレガシーとされ、あまり推奨されていない。理由は、1つの要素の1つの属性に対して1つのハンドラしか割り当てられないから。また、HTMLとJavaScriptが混在するから。 <html> <head> <script type="text/javascript"> function func(evt) { var evt = evt || window.event; // (注1) var elm = evt.target || evt.srcElement; // (注2) alert(evt.type + " " + elm.name + " " + elm.value); } window.onload = function () { var elm = document.getElementById('btn'); elm.onclick = func; } </script> </head> <body> <input id="btn" name="btn_name" type="button" value="btn_val"/> </body> </html> (注1) ハンドラ関数内でのイベントオブジェクト
(注2) ハンドラ関数内でのイベントのターゲット要素
addEventListener()/attachEvent()でハンドラを割り当てるIE以外ではaddEventListener()、IEではattachEvent()を使うので、それを吸収するクロス関数attach()を用意する。 <html> <head> <script type="text/javascript"> function attach(elm, type, handler) { if (elm.addEventListener) { elm.addEventListener(type, handler, false); } else { elm.attachEvent('on' + type, handler); } } function func(evt) { var evt = evt || window.event; var elm = evt.target || evt.srcElement; alert(evt.type + " " + elm.name + " " + elm.value); } window.onload = function () { attach(document.getElementById('btn'),'click',func); } </script> </head> <body> <input id="btn" name="btn_name" type="button" value="btn_val" /> </body> </html> 複数のハンドラを割り当てるハンドラ関数func1とfunc2を用意し、下のようにイベント割り当てを2度行うと、ボタンクリックでfunc1()とfunc2()両方実行出来る。これがonlclick属性に直接イベント割り当てする方法に比べてのメリット。 window.onload = function () { attach(document.getElementById('btn'),'click',func1); attach(document.getElementById('btn'),'click',func2); } attachEvent()で割り当てたハンドラ関数内でのthisをターゲット要素にするハンドラ関数内で、以下のようにthisを参照すると、 function func(evt) { alert(this.type + " " + this.name + " " + this.value); } IE以外のブラウザではthisはターゲット要素(この場合INPUTタグ)だが、IEではwindowオブジェクトになる。この違いを吸収するため、次のようにattachEvent()の引数を修正する。 elm.attachEvent('on' + type, function() { handler.call(elm, window.event); }); ハンドラ関数を直接渡さず、「ターゲット要素に対してcall()を使ってハンドラ関数を実行する」無名関数を渡す。その際、window.eventオブジェクトも引数にする。これによって、handler()内でthisがelmを表すようになり、引数のevtにイベントオブジェクトが入るようになる。 ハンドラ関数が引数を取れるようにする
これまでの処理もまとめると、プログラム全文は次のようになる。 <html> <head> <script type="text/javascript"> function attach(elm, type, handler, args) { if (elm.addEventListener) { elm.addEventListener(type, function (evt) { handler.call(this, evt, args); }, false); } else { elm.attachEvent('on' + type, function() { handler.call(elm, window.event, args); }); } } function func(evt, args) { alert(this.name + " " + args[0]); } window.onload = function () { attach(document.getElementById('btn'), 'click', func, ['TEST']); } </script> </head> <body> <input id="btn" name="btn_name" type="button" value="btn_val" /> </body> </html> これでクロスブラウザなイベント割り当ての処理が実現したが、さらに複雑なイベント割り当てを行いたい場合、jQuery等のライブラリの使用を検討する。 |
|