JSのaddEventListnerメソッドがIE11で使えない場合の代替方法

ユーザーのマウス操作に応じてスタイルを動的に変更する方法として、JSのaddEventListnerメソッドを用い、ユーザー操作のイベントに応じて関数を呼び出し、スタイルCSSを動的に書き換える方法がありますが、addEventListnerメソッドはどうやらIE11では使えません。

開発者ツールで確認すると「構文エラー｣が起きており、意図したとおりには動作しない事が分かります。

例えば、背景色が赤のコンテナーにmouseoverした場合に背景色を青に書き換えるような場面。以下、IE11でのNGサンプル。

　/* 上記コード */
　<div id="test" style="width:150px; height:150px; border:solid 0.5px black; 
　background:hsla(0,100%,50%,1); color:white">NGサンプル</div>

　<script>
	document.querySelector('#test').addEventListener('mouseover',()=>{
		const test=document.querySelector('#test');
		test.style.background='hsla(240,100%,50%,1)';
		test.style.transition='1.5s';
	});
　</script>

上記サンプル事例は、現行のエッジやクローム、オペラ、ファイヤーフォックスといったブラウザでは意図通りに動作いたしますが、IE11では構文エラーとなり動作しないんです。

そこで色々と試した結果、イベントオブジェクトを使えばIE11でも意図したとおりの動作をすることがわかりました。以下、IE11でも動作するサンプル。

　

　/* 上記コード */
　<div id="test2" style="width:150px; height:150px; border:solid 0.5px black; 
　background:hsla(0,100%,50%,1); color:white;" onmouseover="tmp();">改修後サンプル</div>

　<script>
	function tmp(){
		const test2=document.querySelector('#test2');
		test2.style.background='hsla(240,100%,50%,1)';
		test2.style.transition='1.5s';
	};
　</script>

これでIE11でも対応可能です。