JavaScriptの事件イベント概要/イベントモデル
4442 ワード
一、イベント概要
JavaScriptイベントは、Webページにアクセスするユーザによって引き起こされる一連の操作であり、例えば、ユーザがページ上のボタンまたはマウスをクリックしてページのある画像に移動し、一連のインタラクティブなフィードバックを生成する.
ユーザーがいくつかの操作を実行すると、一連のコードを実行します.
イベントは、一般的にブラウザとユーザ操作の相互作用に使用される.最初はIEとNetscape Navigatorの中で現れて、サーバー端の負荷を分担する手段とします.ほとんどのブラウザでイベント処理をサポートします.
DOM 2レベル仕様は、DOMイベントを複合論理で標準化する試みを開始しました.IE 9、Firefox、Opera、Safari、Chromeはすべてすでに「DOM 2級事件」モジュールの核心部分を実現しました.IE 8の前のブラウザは、まだ独自のイベントモデルを使用している.
JavaScriptには三つのイベントモデルがあります.インラインモデル、シナリオモデル、DOM 2モデルです.
二、インラインモデル
このモデルは最も伝統的な方法である.インラインモデルでは、イベントハンドラ関数は、指定されたイベントを処理するためのHTMLタグの属性です.
インラインは初期に多く使用されていたが、HTMLと混作されており、HTMLとの分離は層別の原則に違反していた.
三、スクリプトモデル
内部連結モデルはHTMLとJavaScriptコードの階層分離の原則に違反しているためです.この問題を解決するために、私たちはここにいます. JavaScriptで事件を処理する.このような処理方法はスクリプトモデルです.
JavaScriptイベントは、Webページにアクセスするユーザによって引き起こされる一連の操作であり、例えば、ユーザがページ上のボタンまたはマウスをクリックしてページのある画像に移動し、一連のインタラクティブなフィードバックを生成する.
ユーザーがいくつかの操作を実行すると、一連のコードを実行します.
イベントは、一般的にブラウザとユーザ操作の相互作用に使用される.最初はIEとNetscape Navigatorの中で現れて、サーバー端の負荷を分担する手段とします.ほとんどのブラウザでイベント処理をサポートします.
DOM 2レベル仕様は、DOMイベントを複合論理で標準化する試みを開始しました.IE 9、Firefox、Opera、Safari、Chromeはすべてすでに「DOM 2級事件」モジュールの核心部分を実現しました.IE 8の前のブラウザは、まだ独自のイベントモデルを使用している.
JavaScriptには三つのイベントモデルがあります.インラインモデル、シナリオモデル、DOM 2モデルです.
二、インラインモデル
このモデルは最も伝統的な方法である.インラインモデルでは、イベントハンドラ関数は、指定されたイベントを処理するためのHTMLタグの属性です.
インラインは初期に多く使用されていたが、HTMLと混作されており、HTMLとの分離は層別の原則に違反していた.
<script type="text/javascript">
function box(){
alert(" ");
}
</script>
</head>
<body>
<!-- HTML JS onclick -->
<input type="button" value=" " onclick="alert('Lee');" />
<!-- HTML JS -->
<input type="button" value=" " onclick="box();" />
</body><script type="text/javascript">
window.onload = function(){
function box(){
alert(" ");
}
};
</script>
</head>
<body>
<input type="button" value=" " onclick="box()"/> <!-- box -->
</body>三、スクリプトモデル
内部連結モデルはHTMLとJavaScriptコードの階層分離の原則に違反しているためです.この問題を解決するために、私たちはここにいます. JavaScriptで事件を処理する.このような処理方法はスクリプトモデルです.
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName('input')[0];
// . =
input.onclick=function(){
alert(" ");
}
}
</script>
</head>
<body>
<input type="button" value=" " />
</body><script type="text/javascript">
function box(){
alert(" ");
}
window.onload = function(){
var input = document.getElementsByTagName('input')[0];
// . =
input.onclick=box;
}
</script>
</head>
<body>
<input type="button" value=" " />
</body><script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName("input")[0];
input.onclick= box;
function box(){
alert(" ");
}
};
</script>
</head>
<body>
<input type="button" value=" "/>
</body>