イベントリスナのMOZ/IEのブラウザ間の差異を吸収。
- JavaScript
- Source
- function setEventListener(element, type, listener) {
- if (element.addEventListener) element.addEventListener(type, function(event){listener(this)}, false);
- else if (element.attachEvent) element.attachEvent('on' + type, function(event){listener(event.srcElement)});
- }
- element
- document.getElementById('hoge')等で取得したDOM Element
- type
- イベントの種類。"click"とか"focus"とか"blur"とか。"on"抜きで渡しませう。
- listener
- イベントが起こったときに叩く関数名
- ブラウザ間の差異
- addEventListenerはMOZ/Safari
- attachEventはIE
"テストする"というボタンをクリックした時に、ボタンの背景色を赤くするサンプル。
- JavaScript
- Source
- var element = document.getElementById('button');
- setEventListener(element, 'click', writeText);
- function setEventListener(element, type, listener) {
- if (element.addEventListener) element.addEventListener(type, function(event){listener(this)}, false);
- else if (element.attachEvent) element.attachEvent('on' + type, function(event){listener(event.srcElement)});
- }
- function writeText(targetElement) {
- targetElement.style.backgroundColor = 'red';
- }
イベントが起きたとき、リスナーであるwriteTextに引数としてtargetElementが渡される。
これは、イベントが起きたエレメント自身のことで、今回の場合はクリックされたボタン自身が渡されます。
