エレメントに対してname属性を動的に付加する際に、element.setAttribute('name', name);とかelement.name = 'name';とかやってはみるものの、IEだとまともにname属性を付加してくれない。
そんな時は、DOM操作の範疇を逸して無理やりラップ。
function createElementWithName(tag, name) {
var isIE =/*@cc_on!@*/false;
var element;
if (name) {
element = (isIE)? document.createElement('<' + tag + ' name="' + name + '">'): document.createElement(tag);
element.name = name;
} else {
element = document.createElement(tag);
}
return element;
}
- /*@cc_on@*/とは？
-
- IE限定の@cc_onステートメント。
"/*@cc_on"と"@*/"の間に書いたものをIE限定で認識してくれる。
この場合IEのみ"!"を認識するので、isIEはIEにおいてのみtrueとなる。
イベントリスナのMOZ/IEのブラウザ間の差異を吸収。
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
"テストする"というボタンをクリックした時に、ボタンの背景色を赤くするサンプル。
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が渡される。
これは、イベントが起きたエレメント自身のことで、今回の場合はクリックされたボタン自身が渡されます。
