ROUTE 3390

備忘録的な用途で書いていますが、どなたかの役に立つ事があれば嬉しいです。

IEとFirefoxのイベント処理

javascript

最近になってjavascriptって凄いんだなって感じ始めまして、

ちゃんと勉強していきたいと思います。



でもやっぱりブラウザ依存って大変ですね。

Firefoxで動作を確認した後にIEに対応させるのがもう大変。。

<html>
<body>

<table>
<tr><td id="sasa">I love dog!</td></tr>
</table>

<script type="text/javascript">

var ele_btn = document.getElementById("sasa");

ele_btn.addEventListener("click",sasakure,false);

function sasakure() {
    alert(this.textcontent);
}
</script>

</body>
</html>


これはFirefoxなら動きますがIEではダメでした。

まず、addEventListenerが対応してません。

IEではattachEvent("onclick",sasakure);と書きました。


どちらもクリックしたときに指定したメソッドを実行する関数です。
※ここではsasakureメソッドを実行してくれます。


しかしご注意！　attachEventはthisが使えませんでした！！


thisの代わりにどうやらwindow.event.srcElementを使わないといけないみたいです。

結局上のプログラムをIE用にするとこうなります。

<html>
<body>

<table>
<tr><td id="sasa">I love dog!</td></tr>
</table>

<script type="text/javascript">

var element = document.getElementById("sasa");

element.attachEvent("onclick",sasakure);

function sasakure() {
    alert(window.event.srcElement.innerText);
}
</script>

</body>
</html>

先に書きませんでしたが、textcontentをinnerTextにしています。

element.innerHTMLはタグ間をHTMLとして評価しますが、textcontentはタグ間を文字列として評価します。
IEはtextcontentではなくinnerTextになります。



こういったブラウザによる差が大変ですね javascript

ブラウザを判別するのにどうやるのが一番スマートなんでしょうね。。


とりあえずFirefoxでの動作保障が最優先という事であれば
下記みたいに判別出来ますが、これだと後で色々面倒な気がします。

if (window.navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
    alert("Firefox!!");
}else{
    alert("Firefox以外");
}