ホームページ >ウェブフロントエンド >jsチュートリアル >Javascriptイベントレスポンス学習メモ_JavaScriptスキルを整理する
Javascriptイベントレスポンス学習メモ_JavaScriptスキルを整理する
- WBOYオリジナル
- 2016-05-16 15:28:111441ブラウズ
イベントとは
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 イベントがトリガーされ、イベントが 6c04bd5ca3fcae76e30b72ad730ca86d タグに書き込まれます。
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 つの状態です。皆さんの学習に役立つことを願っています。