はじめに
2022年6月15日にいよいよIEが完全終了ということで、だいぶ昔にIEで動いていたけれど突然動かなくなって困った、バニラなJavaScriptの書き方を自分がメモしてた分備忘録として残す。(2度と使わないことを願う)
onpropertychange
IE専用のイベント(IE10まで)、onchangeとの違いはDOM操作でのvalue変更時にもイベントが発火する。
<body>
<input id="btn" type="button" onclick="btnClick();" value="ボタン"/>
<input id="text" type="text" onpropertychange="textChange();" value=""/>
</body>
<script>
function btnClick(){
document.getElementById("text").value="ほげほげ"
};
function textChange(){
console.log(document.getElementById("text").value)
};
</script>
上記ソースではボタンを押すとtextChange()も実行される。onchangeでは実行されない。
onchangeで同様の処理をさせる場合は、btnClick()内でdocument.getElementById("text").onchange()を実行させて発火させるかする。
(そもそもインラインスクリプトがよろしくない、jQuery使っておけという話ではあるが)
createElementの変数表記
だいぶ昔のIE(8ぐらい？)ではcreateElementの変数で属性まで指定可能だった。
var element=document.createElement('<div align="center" class="hoge">');
現在のブラウザで同様の処理をする場合は、setAttributeやclassNameで指定。
var element=document.createElement('div');
element.setAttribute('align','center');
element.className="hoge";
インラインスクリプトの関数名
インラインスクリプトで関数名「list()」を使用していたものが、IEのある時を境に関数が存在しないというエラーが発生。
<input id="btn" type="button" onclick="list();" value="リスト"/>
今調べたらIE10から使えなくなっている。chrome、edge、firefoxも現状使えない。
予約語の関係なのか現在も原因不明。他の単語もだめだったりするのだろうか？知っている人がいたら誰か教えて。
当時は関数名を変えて対応していたが、そもそもインラインスクリプトが以下略。
まとめ
IEだけ使えないという物は数あれど、逆にIEにしか(それも古いバージョンしか)使えない物もあるのが厄介極まりなかった思い出。
久しぶりに見てこんな書き方もあったなぁと感傷に浸りつつ、今の書き方もいつしか時代遅れになる事を考えて書いていかないとなぁと思いました。（小並感)