ホームページ > 記事 > ウェブフロントエンド > JSでのイベントレスポンス

JSでのイベントレスポンス

不言オリジナル: 2018-04-04 13:39:211355ブラウズ

この記事の内容は js の時間応答に関するものです。ここで共有します。必要な友達はこの記事の内容も参照してください。

ここでは一般的に使用される時間応答をいくつか紹介します。シンプルで素晴らしい機能です。

1. キートリガー

この種のイベント応答は非常に一般的であり、最初から発生します。簡単な例を挙げると:

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="myFunction()">确认</button>  
    <p id="demo"></p>  
    <script>  
    function myFunction() {  
        document.getElementById("demo").innerHTML =Date();  
}  
</script>  
</body>

このタイプのメソッドの核心は、onclick+関数名をボタンのラベルに追加して関数をトリガーすることです。

2. マウストリガーまたは Enter トリガー。

最初の方法の欠点は実際には非常に明白です。たとえば、データのバッチを処理する必要があり、入力ボックスが多数ある場合、各ボックスの後に確認キーを追加する必要がありますか?これはユーザー入力にとって非常に不合理であるため、フォームまたは複数の入力ボックスに入力するときに効果をトリガーするにはマウスまたは Enter キーを使用する方がはるかに効率的です。

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

中心となるのは、onchange を使用して入力ボックス内の関数を呼び出すことです。入力後、マウスで任意の場所をクリックするか、Enter キーを押して関数を呼び出します。さまざまな処理に応じてさまざまな効果が表示されます。

3. いつでもトリガー

実際の例では、Web ページでオンライン 16 進数変換を試すことができます。つまり、確認キーを押したり、Enter を押したりする必要はありません。いつでも紛失して変換できます。携帯電話の電卓を含め、入力値をリアルタイムに計算します。

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>

使用方法の核心はoneKeyUp + メソッド名です。これに加えて、onkeypress、oneKeyDown などのキーワードもあります。個人的にはoneKeyUpの方が実用的だと思います。

JSでのイベントレスポンス

関連記事