JSイベントバインディングとイベントフローモデルの使用方法
今回は、JSイベントバインディングとイベントフローモデルの使い方と、JSイベントバインディングとイベントフローモデルを使用する際の注意点について説明します。実際のケースを見てみましょう。
1. JSイベント
(1) JSイベント分類
1. マウスイベント:
click/dbclick/mouseover/mouseout
2. HTMLイベント:
onload/onunload/onsubミット/onresize/onchange/onfoucs/onscroll
3. キーボード イベント:
keydown: キーボードが押されたときにトリガーされます。
keypress: キーボードが押されて持ち上げられた瞬間にトリガーされます。
keyup: キーボードを上げるとトリガー
[注意事項]
①実行シーケンス: keydown keypress keyup
②keypressは数字、文字、記号キーのみをキャプチャでき、ファンクションキーはキャプチャできません。
③キーダウンを繰り返す - 長押ししたときにキーを押す
④長押ししたときにフォーカスが失われると、キーダウンが発生しますが、キーアップはトリガーされなくなります
⑤キーを押すと大文字と小文字が区別されます。キーダウンとキューアップは異なります。
4. イベント要素:
イベントがトリガーされると、イベントはデフォルトでイベントによって呼び出される関数にパラメーターを渡します。
このパラメーターはイベントのさまざまな詳細情報を含みます。 。
document.onkeydown=function(e){
console.log(e);
}
document.onkeydown=function(){
console.log(window.event);
}5. キーボードのキーを決定するにはどうすればよいですか?
①再起動関数内でイベント要因eを受け取ります。
② e.key を使用すると、押されたキーの文字に直接移動できます (非推奨)。
③keyCode/that/charCodeを使用して、キーのASCIIコード値を取得できます。
(各種ブラウザの記述方法に対応)
//兼容浏览器的写法：
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回车
}
}2. イベントバインディングモデル
(1) DOM0イベントモデル
バインディングメモ:
①window.onloadを使用して読み込みを完了させてからバインドします。
window.onload =function(){//事件}
②バインディング用のボディの後ろに置きます。
var Code=e.keyCode||e.which||e.charCode;
//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}
if(e.keyCode==13){
isEnt=1;
}
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}
document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}1. インラインモデル(インラインバインディング): HTMLタグ内の属性の属性値として関数名を直接使用します。
//body内容 <body> <button onclick="func()">内联模型绑定</button> <button id="btn1">哈哈哈哈</button> <button id="btn2">DOM2模型绑定</button> <button id="btn3">取消DOM2</button> </body>
短所: コンテンツと動作の分離に関する w3c の基本仕様に準拠していません。
2. スクリプト モデル (動的バインディング): JS でノードを選択し、そのノードに onclick 属性を追加します。
<button onclick="func()">内联模型绑定</button>
利点: コンテンツと動作の分離に関する w3c の基本仕様に準拠し、html と js の分離を実現します。
欠点: 同じノードは同じタイプのイベントを 1 回しか追加できません。複数回追加すると、最後のものが有効になります。
document.getElementById("btn1")=function(){}3.DOM0 には共通の欠点があります。DOM0 を介してバインドされたイベントは、バインド後にキャンセルすることはできません。
document.getElementById("btn1").onclick=function(){
alert(1234);
}
document.getElementById("btn1").onclick=function(){
alert(234);
}//重复的只能出现最近的一次(2) DOM2 イベントモデル
1. DOM2 イベントバインディングを追加します:
①IE8 より前では、.attachEvent("onclick", function) を使用します
②IE8 以降では、.addEventListener("click", function, true / false);
パラメーター 3: false (デフォルト) はイベント バブリングを意味し、true を渡すとイベント キャプチャを意味します。
③ すべてのブラウザ処理メソッドと互換性があります:
document.getElementById("btn3").onclick=function(){//不能取消匿名函数
if(btn.detachEvent){
btn.detachEvent("onclick",func1);
}else{
btn.removeEventListener("click",func1);
}
alert("取消DOM2");
}2. DOM2 バインディングの利点:
① DOM2 を使用すると、同じノードを同じ種類の複数のイベントにバインドできます。
②DOM2を使用してバインドされたイベントは特別な関数でキャンセルできます。
3. イベントバインディングのキャンセル:
①attachEventを使用してバインドし、detacheventを使用してキャンセルします。
②attachEventListenerを使用してバインドし、removeEventListenerを使用してキャンセルします。
注: DOM2 にバインドされたイベントをキャンセルする必要がある場合、イベントをバインドするときに、 コールバック関数 は関数名である必要があり、匿名関数にすることはできません。イベントをキャンセルするときに渡される関数名はキャンセル。
3. JSイベントフローモデル
(1) JSのイベントフローモデル1. 事件冒泡(fasle/不写)：当触发一个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
2. 事件捕获(true)：当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
3. 什么时候事件冒泡？什么时候事件捕获？
① 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
② 除此之外的所有事件绑定均为事件冒泡。
4. 阻止事件冒泡：
① IE10之前，e.cancelBubble = true;
② IE10之后，e.stopPropagation();
5. 阻止默认事件：
① IE10之前：e.returnValue = false;
② IE10之后：e.preventDefault();
//css
#p1{
width: 300px;;
height: 300px;
background-color: powderblue;
}
#p2{
width: 200px;
height: 200px;
background-color: deeppink;
}
#p3{
width: 100px;
height: 100px;
background-color:#A9A9A9;
}
//html
<p id="p1">
<p id="p2">
<p id="p3"></p>
</p>
</p>
<a href="01-事件笔记.html" rel="external nofollow" onclick="func()">超链接</a>
p1.addEventListener("click",function(){
console.log("p1 click");
},false);
p2.addEventListener("click",function(){
console.log("p2 click");
},false);
p3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("p3 click");
},false);结果（事件冒泡）（由小到大p3-》p2-》p1）：
p1.addEventListener("click",function(){
console.log("p1 click");
},true);
p2.addEventListener("click",function(){
console.log("p2 click");
},true);
p3.addEventListener("click",function(){
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("p3 click");
},true);结果(事件捕获)（由小到大p3-》p2-》p1）：
//依然遵循事件冒泡
document.onclick=function(){
console.log("document click")
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE10以后
} else {
e.cancelBubble = true; //IE10之前
}
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE10以后
} else {
e.cancelBubble = true; //IE10之前
}
}
//阻止默认事件
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE10之后
} else {
e.returnValue = false; //IE10之前
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がJSイベントバインディングとイベントフローモデルの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1667
14
1426
52
1328
25
1273
29
1255
24
BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は?
Apr 26, 2024 am 09:40 AM
MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。
小紅書にサブアカウントをバインドするにはどうすればよいですか?アカウントが正常かどうかはどのように確認されますか?
Mar 21, 2024 pm 10:11 PM
今日の情報爆発の時代において、個人のブランドや企業イメージの構築はますます重要になっています。中国を代表するファッションライフ共有プラットフォームとして、Xiaohongshu は多くのユーザーの注目と参加を集めています。影響力を拡大し、コンテンツ配信の効率化を図りたいユーザーにとって、サブアカウントの紐付けは有効な手段となっています。では、Xiaohongshu はどのようにしてサブアカウントをバインドするのでしょうか?アカウントが正常かどうかを確認するにはどうすればよいですか?この記事では、これらの質問に詳しく答えます。 1.Xiaohongshu でサブアカウントをバインドするにはどうすればよいですか? 1. メインアカウントにログインします。まず、Xiaohongshu メインアカウントにログインする必要があります。 2. 設定メニューを開きます。右上隅の「Me」をクリックし、「設定」を選択します。 3. アカウント管理に入る: 設定メニューで、「アカウント管理」または「アカウントアシスタント」オプションを見つけて、クリックします。
Toutiao で Douyin をバインドする手順と方法
Mar 22, 2024 pm 05:56 PM
1. Toutiaoを開きます。 2. 右下隅の「My」をクリックします。 3. ［システム設定］をクリックします。 4. ［アカウントとプライバシーの設定］をクリックします。 5. [Douyin]の右側のボタンをクリックしてDouyinをバインドします。
Cainiao アプリを Pinduoduo にバインドするにはどうすればよいですか? Cainiao Wrap を Pinduoduo プラットフォームに追加するにはどうすればよいですか?
Mar 19, 2024 pm 02:30 PM
Cainiao アプリは、さまざまな物流情報を提供できるプラットフォームです。ここの機能は非常に強力で使いやすいです。物流関連の問題があれば、ここで解決できます。とにかく、それはあなたに 1 つをもたらすことができます-stopサービスはすべてを時間内に解決できます。速達の確認、速達の受け取り、速達の発送などはすべて問題なく行われます。さまざまなプラットフォームと連携しており、すべての情報を照会できます。しかし、場合によっては、 Pinduoduo で購入した商品は物流情報を表示できない場合がありますが、実際には、これを実現するには手動で Pinduoduo をバインドする必要があります。具体的な方法は以下に整理されており、誰でも見ることができます。 Cainiao を Pinduoduo アカウントにバインドする方法: 1. Cainiao APP を開き、メインページに移動します。
Cainiao APP を Pinduoduo にバインドする方法 Cainiao APP を Pinduoduo にバインドする方法
Mar 19, 2024 pm 05:16 PM
Cainiao Wrap を使用するときに Pinduoduo をバインドする方法をご存知ですか? Cainiao Wrap アプリの公式バージョンでは、このプラットフォーム上の Pinduoduo の物流情報の一部が自動的に同期されません。注文番号をコピーするか、携帯電話で確認するだけです。速達情報がある場合。もちろん、これらはすべて手動で完了する必要があります。さらに詳しく知りたい場合は、エディターに来て確認してください。 Cainiao APP を Pinduoduo にバインドする方法 1. Cainiao APP を開き、メイン ページの左上隅にある「パッケージ ガイド」をクリックします。 2. インターフェイスには、多くのショッピング サイトがあり、アカウントをバインドできます。 3. クリックして他の電子商取引プラットフォームをインポートします。 4. ユーザー認証: Pinduoduo をクリックしてインターフェイスに移動します。
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
私の小さなブラック ボックスを Steam にバインドできない場合はどうすればよいですか?
Mar 12, 2024 pm 03:10 PM
Black Box が Steam にバインドできないのは、ネットワークまたはソフトウェアのバージョンの問題が原因である可能性があります。この小さなブラック ボックスには、リリース済みおよび今後発売予定のゲームの価格、コンピュータの構成要件とレビュー、詳細なゲームプレイ分析などの情報が含まれています。さらに、ユーザーはいつでもどこでもモバイルデバイスを通じて必要な情報を見つけることができます。小さなブラック ボックスを Steam にバインドできない場合の対処方法 1. ネットワークの状態を確認し、デバイスがインターネットに接続されていることを確認します。 2. Little Black Box のバージョンを確認する Little Black Box ソフトウェアの最新バージョンを使用していることを確認し、Steam アカウントをバインドしてみてください。 3. Steam アカウントの設定を確認するには、Steam アカウントにログインし、プライバシー設定でサードパーティ ソフトウェアのバインド機能がオンになっているかどうかを確認してください。 4. 公式カスタマーサービスに問い合わせる 上記の手順を実行しても問題が解決しない場合は、公式カスタマーサービスに問い合わせることをお勧めします。
Xiaomi 車アプリを充電パイルデバイスにバインドする方法
Apr 01, 2024 pm 06:52 PM
Xiaomi が発売した最新の Mi su7 モデルカーは、さまざまなホット検索リストを独占しています。車を購入したいと考えている多くのユーザーが、購入のために Xiaomi su7 モデルカーを選択しました。では、Xiaomi 車アプリを使用して、選択後に車をバインドするにはどうすればよいですか?充電に家庭用充電パイルを使用する場合は、このチュートリアル ガイドで詳しく説明しますので、お役に立てれば幸いです。まず、Xiaomi モバイル アプリを開き、右下隅にある [My] ボタンをクリックすると、My インターフェイスで、ホーム充電パイルのオプションが表示され、充電パイルをバインドするページに入った後、スキャン コードをクリックします下のボタンをクリックして、充電パイルの QR コードをスキャンします。QR コードを使用して、充電パイルをアプリにバインドできます。
