ホームページ > 記事 > ウェブフロントエンド > jsにはどんなイベントがあるのでしょうか？ jsの一般的なイベントの紹介

jsにはどんなイベントがあるのでしょうか？ jsの一般的なイベントの紹介

不言オリジナル: 2018-09-18 10:08:1810354ブラウズ

JavaScript を使用すると、動的なページを作成できます。イベントは、JavaScript によって検出できる動作です。 Web ページ内のすべての要素は、JavaScript 関数をトリガーする特定のイベントを生成できます。では、js にはどのようなイベントがあるのでしょうか? この記事では、js でよく使用されるイベントを紹介します。

早速、本題に入りましょう。

1. js でよく使用される onclick イベント

#Click イベント (onclick は js のメソッドではなく、onclick はブラウザによって提供される単なる dom インターフェイスです) js では DOM を操作できるため、onclick では大文字と小文字が区別されます。たとえば、HTML コードでは大文字と小文字が区別される必要はありません。

js での onclick イベントのコード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functionmyFunction(){
       alert("测试onclick点击事件");
    }
    </script>
</head>
<body>
<center>
<buttononclick="myFunction()">点击这里</button>
</center>
</body>
</html>

説明:

onclick は通常、次の基本オブジェクトで生成されます:

ボタン（ボタンオブジェクト）、チェックボックス（チェックボックス）、ラジオ（ラジオボタン）、リセットボタン (リセットボタン)、送信ボタン (送信ボタン)

2. js

で一般的に使用されるイベントである onload イベントは、body, < によって実行できます。 ;bodyonload="alert (123)">36cc49f0c466276486e50c850b7e4956、onload="test()" などの onload の後にメソッドを記述してから、JavaScript で test() メソッドを記述します。ページの読み込みが開始されます。最初にこのメソッドを呼び出します。

js での onload イベントのコード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
    functiontest(){
       alert("测试onload方法");
    }
    </script>
</head>
<bodyonload="test()">
</body>
</html>

注: このメソッドは 6c04bd5ca3fcae76e30b72ad730ca86d タグ内にのみ記述できます。 #3. js

で一般的に使用されるイベントである Onchange イベントは、コンテンツが変更されたときにトリガーされます。このイベントは、テキストボックスやリストボックスなどのオブジェクトに使用でき、通常、ユーザーによるコンテンツの変更によって引き起こされる他の変更に応答するために使用されます。

js での onchange イベントのコード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
       functionupperCase(){
         varx = document.getElementById("fname").value;
         document.getElementById("fname").value = x.toUpperCase();
        }
     </script>
</head>
<body>
 <p>
 <labelfor="name">用户名：</label>
 <inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>

説明: ユーザーがテキストボックスにテキストを入力すると、onchange イベントはトリガーされず、ユーザーのみがトリガーされます。最後に、テキストボックスの外側の領域をクリックして、テキストボックスがフォーカスを失ったときにイベントをトリガーします。ドロップダウンボックスの場合は、選択が完了した後にイベントがトリガーされます。上記の例の効果は、入力ボックスがフォーカスを失うと、内容が大文字に変換されることです。これは、コンテンツの変更が検出される前に入力がフォーカスを失う必要があるために発生します。通常、change イベントはドロップダウンメニューの選択タグに使用されます。

4. js で一般的に使用されるイベント、onblur イベントと onfocus イベント

このイベントは、現在の要素がフォーカスを失ったときにトリガーされ、対応する onfocus イベントがトリガーされます。 : フォーカスイベントを取得します。onblur イベント: 要素はフォーカスを失います。

js の onblur イベントと onfocus イベントのコード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionchkvalue(txt) {
  if(txt.value=="") alert("文本框里必须填写内容!");
  }
 functionsetStyle(x){
      document.getElementById(x).style.background="yellow"
 }
 </script>
</head>
<body>
失去焦点：
 <inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
    <inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
</html>

5. js でよく使用されるイベントの onscroll イベント

ウィンドウスクロールイベント: ページがスクロールするときに呼び出される関数。このイベントは、関数名の後に括弧を付けずにメソッドの外側に書き込まれます (例: window.onscroll=move)。

js の onscroll イベントのコード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("页面滚动时调用");
  }
window.onscroll = move;
 </script>
</head>
<body>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>

6. js の共通イベントの Onsubmit イベントは次のとおりです。 ff9c23ada1bcecdd1a0fb5d5a0f18437 form 要素、ff9c23ada1bcecdd1a0fb5d5a0f18437 で記述されます。構文: onsubmit="戻り関数名()"。

js での onsubmit イベントのコード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
  functionmove() {
  alert("测试onsubmit........"+testForm.name.value);
  }
 </script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
    <inputtype="text"name="name"value="">
    <br>
    <inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>

7. js でよく使用されるイベント: マウス関連のイベント

Onmouseover: マウスがオブジェクトの範囲上を移動すると、関数を呼び出すイベントがトリガーされます。注: 同じエリア内では、どのように移動しても、機能は 1 回だけトリガーされます。

Onmouseout: マウスがオブジェクトのスコープを離れると、関数を呼び出すイベントがトリガーされます。

Onmousemove: マウスがオブジェクトの範囲の上に移動すると、関数を呼び出すイベントがトリガーされます。注: 同じエリア内では、マウスが 1 回移動するだけでイベントがトリガーされます。

コード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>

Onmouseup: マウスが放されたときにイベントをトリガーします。

Onmousedown: マウスキーが押されたときpressed イベントは次の場合にトリガーされます。

コード例:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmouseDown(){
    document.getElementById("p1").style.color="red";
}
functionmouseUp(){
    document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色mouseUp(。) 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>

上記はこの記事の全内容です。js イベントの詳細については、

を参照してください。 js 開発マニュアル

。

以上がjsにはどんなイベントがあるのでしょうか？ jsの一般的なイベントの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript の 6 つのデータ型とは何ですか? js データ型と一般的な暗黙的な変換ロジック (概要)次の記事：JavaScript の 6 つのデータ型とは何ですか? js データ型と一般的な暗黙的な変換ロジック (概要)

続きを見る