js監聴イベント、ie火狐javascript addEvent Listener atachEvent
5957 ワード
<head>
<script type='text/javascript'>
function init() {
//
var handler = function(){
var host = document.location.href;
if(host.indexOf('jx163.cn') >= 0)
document.location = "/";
else ;
};
//
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', handler, false);
window.addEventListener('load', handler, false);
} else if (window.attachEvent)
window.attachEvent('onload', handler);
else
window.onload = handler;
} // end init
init();
</script>
</head>
<body>
－－－－－－－－－－－－－－－－－－－－
window firefox event
－－－－－－－－－－－－－－－－－－－－
<SCRIPT LANGUAGE="JavaScript">
<!--
function hh(e)
{
alert(arguments[0]);
e=window.event||e;
var el=e.srcElement||e.target;
alert(el.value);
}
//-->
</SCRIPT>
<INPUT id ="button2" value ="hahahahah" TYPE="button" onclick="hh(event);">
－－－－－－－－－－－－－－－－－－－－
test
－－－－－－－－－－－－－－－－－－－－
if(WebComm.getOS() == "MSIE")
{
obj.setCapture ();
}
else
{
document.addEventListener("mousemove",WebComm.MoveDiv,false);
}
if(WebComm.getOS() == "MSIE")
{
obj.releaseCapture ();
}
else
{
document.removeEventListener("mousemove",WebComm.MoveDiv,false);
}1.火狐はinnerTextを支持できないし、なぜか分かりません.ファイアフォックスはinnerHTMLをサポートしていますが、innerTextをサポートしていませんので、インターネットで調べてみましたが、textContentをサポートしてinners Textを実現します.でも、実現はそんなに良くないです.デフォルトでは余分なスペースも残しました.textContentを使わないなら、文字列にHTMLコードが含まれていなければ、inners HTMLで代替できます.
2.ウェブページの内容の選択は禁止されています.
IEでは、一般的にjs:obj.onselectstart=function(){return false}を使用します.
火狐用CSS:-moz-user-select:none
3.フィルタのサポート(例:透過フィルタ):
IE:filter:alpha(opacity=10)
火狐:-moz-opacity:10;
4.捕獲イベント:
IE:obj.set Capture()、obj.release Capture()
火狐:document.addEvent Listener(「mousemove」、mousemove function、true);
document.removeEventListener(「mousemove」、mouseovefunction、true);
5.マウスの位置を取得する:
IE:event.client X、event.client Y
火狐:イベント関数が必要です.
obj.onmousemove=function(ev)
X=ev.pageX;Y=ev.pageY;
)
6.DIVなどの元素の境界問題:
例えば、divのCSSを設定します.:{width:100 px;height:100 px;border:荁000000 px solid;;.}
IEにおいて:divの幅(フレーム幅を含む):100 px、divの高さ(フレーム幅を含む):100 px.
火狐:divの幅(フレーム幅を含む):102 px、divの高さ(フレーム幅を含む):102 px.
だから、この互換性のIEとフォックスのドラッグウィンドウを作る時、jsとcssの書き方に頭を働かせて、みんなに二つのテクニックをあげます.
一.ブラウザの種類を判断する:
var isIE=document.all?true:false
私は変数を書きました.もしdocument.all文法をサポートするなら、isIE=true、さもなくばisIE=false
二.異なるブラウザでのCSS処理:
普通は使えますimpotantはcss文を優先的に使う(火狐のみのサポート)
例えば:{border-width:0 px!importent;border-width:1 px;
火狐の下でこの元素はフレームがないので、IEの下でフレームの幅は1 pxです.
また、いくつかのXHTMLと正常状態のJS、CSSの違いが見つかりました.前の段階でIE/フォックス対応のドラッグウィンドウを書いて、この二つのブラウザのいくつかの違いを見つけました.今日はXHTML対応のバージョンを書きました.今はweb標準が流行っているのではないです.遅れてはいけません.また、ASP.NETのすべてのページはXHTML標準を適用しています.レイアウトページでこの標準コードを削除したら、中のレイアウトとコントロールのvisual studioは表示されません.
へへへ,ホームページの冒頭でこのコードをプラスしました.いわゆるXHTML標準です.DOCTYPE.PUBLIC"-//W 3 C//DT XHTML 1.0 Transitional/EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
JSとCSSを変えて、N回デバッグしました.XHTML標準下のいくつかの違いを発見しました.
1.document.documentとdocument.body
コードにページのCSSを設定する時は必ず使います.
例えば、document.documentElement.style.overflow='hidden'
overflow-X、overflow-Yの2つの座標属性XHTMLはサポートされていません.
2.ウェブページのウィンドウエリアを取得する時とスクロールバーの変位距離を取得する時もdocument.documentElementを使用します.
つまりこの4つの属性(clientWidth、clientHeight、scrollLeft、scrollTop)は必ずdocument.documentElementを使います.
しかし、Dcument.body.apendChild()とDcument.body.removeChild()は使えます.そしてdocument.document.apendChild()とdocument.document Element.removeChild()の代わりに誤報します.
そこで、clientWidth、client Height、scrollLeft、scrollTopとdocument.document Element.styleだけをまとめました.
3.ほほほ、この標準を加えてからIEのフレームの問題も変化しました.今はフォックスと一致しました.これがXHTMLの長所ですか?
前の記事では、
divのCSSを設定します.:{width:100 px;height:100 px;border:龛000000 px sonid;.}
IEにおいて(通常の場合):divの幅(フレーム幅を含む):100 px、divの高さ(フレーム幅を含む):100 px.
フォックス(通常の場合):divの幅(フレーム幅を含む):102 px、divの高さ(フレーム幅を含む):102 px.
XHTML標準を追加した後の(IEとフォックスがヒットしました.^u^):
IE中(XHTML):divの幅(フレーム幅を含む):102 px、divの高さ(フレーム幅を含む):102 px.
フォックス(XHTML):divの幅(フレーム幅を含む):102 px、divの高さ(フレーム幅を含む):102 px.
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
IEのatachEvent方法については、みんながよく知っているかもしれません.今はFireFoxのaddEvent Listenerの使い方を説明します.
addEventListenerのパラメータは全部で三つあります.文法は以下の通りです.
element.addEvent Listener(type,listener,useCapture)
以下は詳しく説明します
ここでelementは、関数を結合するオブジェクトです.
typeはイベント名ですが、「on click」は「click」に変更され、「on blur」は「blur」に変更されます.つまりイベント名は「on」を持たないでください.
listenerはもちろんバインディングの関数です.括弧と一緒にしないでください.
最後のパラメータはブール値で、このイベントの応答順を表します.次に、addEventListenerの3番目のパラメータ(useCapture)を紹介します.
userCaptureがtrueであれば、ブラウザはCaptureを採用し、falseであればbubbing方式を採用する.falseを使って、例を見てください.
htmlコード
<div id="div_test"> <input type="button" id="btn_test" value="se4.cn " /> </div>
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert(" div ") } function test2(){ alert(" input ") }来源:[url]http://hi.baidu.com/abc8745/blog/item/00d9cb824b8fc2b26c811988.html [/url]