Javascriptイベントレスポンス学習メモ_JavaScriptスキルを整理する-jsチュートリアル-php.cn

Javascriptイベントレスポンス学習メモ_JavaScriptスキルを整理する

WBOY

リリース： 2016-05-16 15:28:11

オリジナル

1450 人が閲覧しました

イベントとは

JavaScript は動的なページを作成します。イベントは、JavaScript によって検出できる動作です。 Web ページ内のすべての要素は、JavaScript 関数またはプロシージャをトリガーできる特定のイベントを生成できます。

1. マウスクリックイベント (onclick)
onclick は、Web ページ上でマウスをクリックしたときに発生するマウスクリックイベントです。同時に、onclick イベントによって呼び出されるプログラムブロックが実行されます。通常はボタンで使用されます。
例: ボタンをクリックすると、onclick イベントがトリガーされ、2 つの数値の合計の関数 add2() が呼び出されます。

 <html>
 <head>
 <script type="text/javascript">
 function add2(){
 var numa,numb,sum;
 numa=6;
 numb=8;
 sum=numa+numb;
 document.write("两数和为:"+sum); }
 </script>
 </head>
 <body>
 <form>
 <input name="button" type="button" value="点击提交" onclick="add2()" />
 </form>
 </body>
 </html>

ログイン後にコピー

注: Web ページでイベントを使用する場合は、要素にイベント属性を設定します。

2. マウスオーバーイベント (onmouseover)
マウスオーバーイベント。マウスがオブジェクト上に移動すると、オブジェクトは onmouseover イベントをトリガーし、onmouseover イベントによって呼び出されるプログラムを実行します。
マウスが「OK」ボタンを通過すると、message() 関数が呼び出され、メッセージダイアログボックスが表示されます。

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> 鼠标经过事件 </title>
 <script type="text/javascript">
 function message(){
 confirm("请输入密码后，再单击确定!"); }
 </script>
 </head>
 <body>
 <form>
 密码:
 <input name="password" type="password" >
 <input name="确定" type="button" value="确定" onmouseover="message()"/>
 </form>
 </body>
 </html>

ログイン後にコピー

3. マウスアウトイベント (onmouseout)
マウス移動イベント。マウスが現在のオブジェクトから離れると、onmouseout というプログラムが実行されます。
マウスが「クリックしてください」ボタンから離れると、message() 関数が呼び出され、メッセージダイアログボックスが表示されます。

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>鼠标移开事件 </title>
 <script type="text/javascript">
 function message(){
 alert("不要移开，点击后进行慕课网!"); }
 </script>
 </head>
 <body>
 <form>
 <a href="http://www.imooc.com" onmouseout="message()">点击我</a>
 </form>
 </body>
 </html>

ログイン後にコピー

4. カーソルフォーカスイベント (onfocus)
Web ページ内のオブジェクトがフォーカスを取得すると、onfocus 呼び出しを実行するプログラムが実行されます。
ドロップダウンリストにフォーカスが置かれたら、message() 関数を呼び出すと、ダイアログボックスがポップアップ表示されます。「現在の職業を選択してください。」 ”.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> 光标聚焦事件 </title>
 <script type="text/javascript">
 function message(){
 alert("请选择，您现在的职业！");
 }
 </script>
 </head>
 <body>
 请选择您的职业：<br>
 <form>
 <select name="career" onfocus="message()"> 
  <option>学生</option> 
  <option>教师</option> 
  <option>工程师</option> 
  <option>演员</option> 
  <option>会计</option> 
 </select> 
 </form>
 </body>
</html>

ログイン後にコピー

5. ピンぼけイベント (オンブラー)
onblur イベントと onfocus は相対イベントであり、カーソルが現在フォーカスされているオブジェクトから離れると、onblur イベントがトリガーされ、同時に呼び出されたプログラムが実行されます。

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 失焦事件 </title>
 <script type="text/javascript">
 function message(){
 alert("请确定已输入密码后，在移开!"); }
 </script> 
 </head>
 <body>
 <form>
 用户:
 <input name="username" type="text" value="请输入用户名！" >
 密码:
 <input name="password" type="text" value="请输入密码！" onblur="message()">
</form>
 </body>
 </html>

ログイン後にコピー

6. コンテンツ選択イベント (onselect)
Select イベント。テキストボックスまたはテキストフィールド内のテキストが選択されると、onselect イベントがトリガーされ、呼び出されたプログラムが実行されます。
個人プロフィールのテキストボックス内のテキストが選択されると、onselect イベントがトリガーされ、ダイアログボックスがポップアップします。

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 内容选中事件 </title>
 <script type="text/javascript">
 function message(){
 alert("您触发了选中事件！"); }
 </script> 
 </head>
 <body>
 <form>
 个人简介：<br>
 <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
 </body>
 </html>

ログイン後にコピー

7. テキストボックスの内容変更イベント (onchange)
テキストボックスの内容を変更することで onchange イベントをトリガーし、同時に呼び出されたプログラムを実行します。

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 文本框内容改变事件 </title>
 <script type="text/javascript">
 function message(){
 alert("您改变了文本内容！"); }
 </script> 
 </head>
 <body>
 <form>
 个人简介：<br>
 <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
 </body>
 </html>

ログイン後にコピー

8. ロードイベント (onload)
ページがロードされた直後にイベントが発生し、呼び出されたプログラムが同時に実行されます。
注: 1. ページがロードされると、onload イベントがトリガーされ、イベントがタグに書き込まれます。
2. このセクションの読み込みページは、新しいページを開くものとして理解できます。
次のコードでは、新しいページが読み込まれると、「読み込み中、お待ちください...」というダイアログボックスが表示されます。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 加载事件 </title>
 <script type="text/javascript">
 function message(){
 alert("加载中，请稍等…"); }
 </script> 
 </head>
 <body onload="message()">
 欢迎学习JavaScript。
 </body>
</html>

ログイン後にコピー

9. アンロードイベント (onunload)

ユーザーがページを終了すると (ページを閉じる、ページを更新するなど)、onUnload イベントがトリガーされ、呼び出されたプログラムが同時に実行されます。

注: ブラウザーごとに、onunload イベントのサポートが異なります。

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 卸载事件 </title>
 <script type="text/javascript"> 
 window.onunload = onunload_message; 
 function onunload_message(){ 
  alert("您确定离开该网页吗？"); 
 } 
 </script> 
 </head>
 <body onunload="onunload_message">
 欢迎学习JavaScript。
</body>
</html>

ログイン後にコピー

テスト結果は、IE ブラウザーでのみ実行され、他のブラウザーでは実行されないことを示しています。

上記は JavaScript のイベント応答の 9 つの状態です。皆さんの学習に役立つことを願っています。