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

不言
リリース: 2018-04-04 13:39:21
オリジナル
1344 人が閲覧しました

この記事の内容は 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の方が実用的だと思います。

関連する推奨事項:

OCXコントロールのイベントレスポンスのJS実装例_JavaScriptスキル

完全なJavaScriptイベントレスポンス学習ノート_JavaScriptスキル






以上がJSでのイベントレスポンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!