この記事では、JavaScript に関する関連知識を提供し、主に、onclick の非同期、同期、イベント トリガーのシーケンスなど、一般的に使用されるクリック時間に関する関連コンテンツを紹介します。内容を以下に見ていきましょう。皆さんの参考になれば幸いです。 [関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド] onclick の概要 onclick は HTML のイベント属性であり、その機能はユーザーが要素をクリックしたときにイベントをトリガーすることです。 onclick イベントは、 、、 などの任意の要素にバインドできます。 onclick イベントのトリガー順序は、最初にキャプチャ、次にバブルです。つまり、キャプチャ イベントが最初にトリガーされ、次にバブリング イベントがトリガーされます。 onclick の非同期性 onclick イベントは非同期です。つまり、onclick イベントは、JavaScript 実行スタック内のタスクが実行された後にのみトリガーされます。 onclick click document.getElementById('btn').onclick = function () { console.log('click'); } console.log('start'); for (var i = 0; i < 1000000000; i++) ; console.log('end'); ログイン後にコピー上記のコードでは、onclick イベントを 要素にバインドし、JavaScript で for ループを使用しました。このループは 1 億回実行されます。今回はページが動かなくなりますが、ボタンのクリックが妨げられることはありません。 現時点では、ボタンをクリックしてもコンソールからの応答はありません。これは、onclick イベントが非同期であるためです。そのため、ボタンをクリックすると、onclick イベントが実行されます。は処理されません。トリガーされますが、JavaScript 実行スタック内のタスクが完了するまでトリガーされません。 onclick の同期性上では、onclick イベントは非同期であると言われましたが、今では onclick イベントは同期であると言われています。これは少し矛盾しているように思えます。実際、どちらのステートメントも次のとおりです。 onclick click document.getElementById('btn').onclick = function () { console.log('click'); } for (var i = 0; i < 10; i++) { console.log(i); if (i === 5) { document.getElementById('btn').click(); } } ログイン後にコピー 上記のコードでは、コンソール出力が 5 に達すると、onclick イベントを手動でトリガーします。このとき、コンソールは click を出力します。をクリックし、次の出力を続けます。はい、これは onclick 同期を示しています。 関連情報を参照した後、onclick イベントがユーザーによって手動でトリガーされた場合、onclick イベントは非同期であり、イベント キューにプッシュされます。 JavaScript コードによって、onclick イベントは同期され、すぐに実行されます。 onclick のトリガー シーケンスonclick イベントのトリガー シーケンスは、最初にキャプチャ、次にバブルです。つまり、キャプチャ イベントが最初にトリガーされ、次にバブリング イベントがトリガーされます。 。 onclick click document.getElementById('div1').onclick = function () { console.log('div1'); } document.getElementById('div2').onclick = function () { console.log('div2'); } document.getElementById('div3').onclick = function () { console.log('div3'); } document.getElementById('btn').onclick = function () { console.log('btn'); } ログイン後にコピー上記のコードでは、onclick イベントを 要素と 要素にそれぞれバインドし、 要素をクリックすると、コンソールに btn が出力されます。 、div3、div2、div1、これは onclick イベントのトリガー シーケンスです。 イベントがトリガーされる順序onclick イベントで、マウス ボタンに関連する複数のイベントをバインドする場合、これらのイベントがトリガーされる順序はどうなりますか? onclick click document.getElementById('btn').onclick = function () { console.log('click'); } document.getElementById('btn').ondblclick = function () { console.log('dblclick'); } document.getElementById('btn').onmousedown = function () { console.log('mousedown'); } document.getElementById('btn').onmouseup = function () { console.log('mouseup'); } ログイン後にコピー上記のコードでは、onclick、ondblclick、onmousedown、onmouseup の 4 つのイベントを 要素にバインドしました。 次に、 要素をクリックすると、コンソールにマウスダウン、マウスアップ、クリックが順に出力されます。 要素をダブルクリックすると、コンソールは、mousedown、mouseup、click、mousedown、mouseup、click、dblclick を順に出力します。 したがって、イベントトリガーの順序は、onmousedown、onmouseup、onclick、ondblclick になります。 したがって、onclick イベントを使用するときに、マウス ボタンに関連する複数のイベントがバインドされている場合は、予期しない問題を回避するためにイベント処理のロジックに注意する必要があります。 イベント オブジェクトonclick イベントでは、イベント パラメーターを通じてイベント オブジェクトを取得できます。イベント パラメーターには、イベント関連情報が含まれています。 イベント オブジェクトのevent は MouseEvent のインスタンスであり、UIEvent と Event を継承するため、イベント オブジェクトには UIEvent と Event のすべてのプロパティとメソッドが含まれます。 MouseEvent プロパティ: MouseEvent メソッド: getModifierState(): ブール値を返します。指定されたキーが押されました。 initMouseEvent(): イベント オブジェクトを初期化します。 preventDefault(): イベントを防止するデフォルトの動作。 stopImmediatePropagation(): イベントの上方へのバブリングを停止し、イベントのさらなるキャプチャまたはバブリングを防ぎます。 stopPropagation(): イベントの上方へのバブリングを停止します。 クリック イベントの登録方法クリック イベントは、onclick 属性、addEventListener() メソッド、およびattachEvent() メソッドを使用して登録できます。 onclick 属性onclick 属性は Element の属性です。その値は関数です。クリック イベントがトリガーされると、これは実行される関数。 clickログイン後にコピーaddEventListener()addEventListener()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数，第三个参数是一个布尔值，表示是否在捕获阶段触发事件处理函数。click var btn = document.getElementById('btn'); btn.addEventListener('click', function() { console.log('click'); }); ログイン後にコピーattachEvent()attachEvent()方法是EventTarget的一个方法，它的第一个参数是事件的名称，第二个参数是事件处理函数。click var btn = document.getElementById('btn'); btn.attachEvent('onclick', function() { console.log('click'); }); ログイン後にコピー结语 click事件是鼠标点击事件，它是MouseEvent的一个实例，它的事件类型是click，它可以通过onclick属性、addEventListener()方法和attachEvent()方法注册。 【相关推荐：JavaScript视频教程、web前端】
![JavaScript の基本構文 [dom|bom|es6 新しい構文|jQuery|データ視覚化 echarts]](https://img.php.cn/upload/course/000/000/068/6242bb730fb11708.png)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
