JSイベントバインディングとイベントフローモデルケース分析-jsチュートリアル-php.cn

2. イベントバインディングモデル" > 2. イベントバインディングモデル

ホームページ

ウェブフロントエンド

jsチュートリアル

JSイベントバインディングとイベントフローモデルケース分析

php中世界最好的语言

May 22, 2018 am 09:52 AM

javascript 事例分析モデル

今回はJSイベントバインディングとイベントフローモデルの事例分析をお届けします。JSイベントバインディングとイベントフローモデルを使用する際の注意点とは何ですか。実際の事例を見てみましょう。

1. JSイベント

(1) JSイベント分類

1. マウスイベント:

click/dbclick/mouseover/mouseout

ログイン後にコピー

2. HTMLイベント:

 onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll

ログイン後にコピー

3. キーボードイベント:

keydown: キーボードが押されたトリガーされたwhen
keypress: キーボードが押されて持ち上げられた瞬間にトリガーされます。
keyup: キーボードを上げるとトリガー

[注意事項]

①実行シーケンス: keydown keypress keyup
②keypressは数字、文字、記号キーのみをキャプチャでき、ファンクションキーはキャプチャできません。
③キーダウンを繰り返します - 長押ししたときにキーを押します
④キーダウンがありますが、必ずしもキーアップするとは限りません。長押ししたときにフォーカスが失われると、キーアップはトリガーされなくなります
⑤キープレスは大文字と小文字を区別します。キーダウン、キューアップは異なりません。

4. イベント要素:

イベントがトリガーされると、イベントはデフォルトでイベントによって呼び出される関数にパラメーターを渡します。

このパラメーターはイベントのさまざまな詳細情報を含みます。。

 document.onkeydown=function(e){
 console.log(e);
 }
document.onkeydown=function(){
console.log(window.event);
}

ログイン後にコピー

rree

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中文网其它相关文章！

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7463

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

世界で最も強力なオープンソース MoE モデルが登場。GPT-4 に匹敵する中国語機能を備え、価格は GPT-4-Turbo のわずか 1% 近くです May 07, 2024 pm 04:13 PM

従来のコンピューティングを超える能力を備えているだけでなく、より低コストでより効率的なパフォーマンスを実現する人工知能モデルを想像してみてください。これは SF ではありません。世界で最も強力なオープンソース MoE モデルである DeepSeek-V2[1] が登場しました。 DeepSeek-V2 は、経済的なトレーニングと効率的な推論の特徴を備えた強力な専門家混合 (MoE) 言語モデルです。これは 236B のパラメータで構成されており、そのうち 21B は各マーカーをアクティブにするために使用されます。 DeepSeek67B と比較して、DeepSeek-V2 はパフォーマンスが優れていると同時に、トレーニングコストを 42.5% 節約し、KV キャッシュを 93.3% 削減し、最大生成スループットを 5.76 倍に高めます。 DeepSeek は一般的な人工知能を研究する会社です

こんにちは、電気アトラスです！ボストン・ダイナミクスのロボットが復活、180度の奇妙な動きにマスク氏も恐怖 Apr 18, 2024 pm 07:58 PM

Boston Dynamics Atlas は正式に電動ロボットの時代に突入します!昨日、油圧式アトラスが歴史の舞台から「涙ながらに」撤退したばかりですが、今日、ボストン・ダイナミクスは電動式アトラスが稼働することを発表しました。ボストン・ダイナミクス社は商用人型ロボットの分野でテスラ社と競争する決意を持っているようだ。新しいビデオが公開されてから、わずか 10 時間ですでに 100 万人以上が視聴しました。古い人が去り、新しい役割が現れるのは歴史的な必然です。今年が人型ロボットの爆発的な年であることは間違いありません。ネットユーザーは「ロボットの進歩により、今年の開会式は人間のように見え、人間よりもはるかに自由度が高い。しかし、これは本当にホラー映画ではないのか？」とコメントした。ビデオの冒頭では、アトラスは仰向けに見えるように地面に静かに横たわっています。次に続くのは驚くべきことです

MLP に代わる KAN は、オープンソースプロジェクトによって畳み込みまで拡張されました Jun 01, 2024 pm 10:03 PM

今月初め、MIT やその他の機関の研究者らは、MLP に代わる非常に有望な代替案である KAN を提案しました。 KAN は、精度と解釈可能性の点で MLP よりも優れています。また、非常に少数のパラメーターを使用して、多数のパラメーターを使用して実行する MLP よりも優れたパフォーマンスを発揮できます。たとえば、著者らは、KAN を使用して、より小規模なネットワークと高度な自動化で DeepMind の結果を再現したと述べています。具体的には、DeepMind の MLP には約 300,000 個のパラメーターがありますが、KAN には約 200 個のパラメーターしかありません。 KAN は、MLP が普遍近似定理に基づいているのに対し、KAN はコルモゴロフ-アーノルド表現定理に基づいているのと同様に、強力な数学的基礎を持っています。以下の図に示すように、KAN は

AI が数学研究を破壊する!フィールズ賞受賞者で中国系アメリカ人の数学者が上位 11 件の論文を主導 | テレンス・タオが「いいね！」しました Apr 09, 2024 am 11:52 AM

AI は確かに数学を変えつつあります。最近、この問題に細心の注意を払っている陶哲軒氏が『米国数学協会会報』（米国数学協会会報）の最新号を送ってくれた。「機械は数学を変えるのか？」というテーマを中心に、多くの数学者が意見を述べ、そのプロセス全体は火花に満ち、ハードコアで刺激的でした。著者には、フィールズ賞受賞者のアクシャイ・ベンカテシュ氏、中国の数学者鄭楽軍氏、ニューヨーク大学のコンピューター科学者アーネスト・デイビス氏、その他業界で著名な学者を含む強力な顔ぶれが揃っている。 AI の世界は劇的に変化しています。これらの記事の多くは 1 年前に投稿されたものです。

Google は大喜び: JAX のパフォーマンスが Pytorch や TensorFlow を上回りました! GPU 推論トレーニングの最速の選択肢となる可能性があります Apr 01, 2024 pm 07:46 PM

Google が推進する JAX のパフォーマンスは、最近のベンチマークテストで Pytorch や TensorFlow のパフォーマンスを上回り、7 つの指標で 1 位にランクされました。また、テストは最高の JAX パフォーマンスを備えた TPU では行われませんでした。ただし、開発者の間では、依然として Tensorflow よりも Pytorch の方が人気があります。しかし、将来的には、おそらくより大規模なモデルが JAX プラットフォームに基づいてトレーニングされ、実行されるようになるでしょう。モデル最近、Keras チームは、ネイティブ PyTorch 実装を使用して 3 つのバックエンド (TensorFlow、JAX、PyTorch) をベンチマークし、TensorFlow を使用して Keras2 をベンチマークしました。まず、主流のセットを選択します

テスラのロボットは工場で働く、マスク氏：手の自由度は今年22に達する！ May 06, 2024 pm 04:13 PM

テスラのロボット「オプティマス」の最新映像が公開され、すでに工場内で稼働可能となっている。通常の速度では、バッテリー（テスラの4680バッテリー）を次のように分類します：公式は、20倍の速度でどのように見えるかも公開しました - 小さな「ワークステーション」上で、ピッキング、ピッキング、ピッキング：今回は、それがリリースされたハイライトの1つビデオの内容は、オプティマスが工場内でこの作業を完全に自律的に行い、プロセス全体を通じて人間の介入なしに完了するというものです。そして、オプティマスの観点から見ると、自動エラー修正に重点を置いて、曲がったバッテリーを拾い上げたり配置したりすることもできます。オプティマスのハンドについては、NVIDIA の科学者ジムファン氏が高く評価しました。オプティマスのハンドは、世界の 5 本指ロボットの 1 つです。最も器用。その手は触覚だけではありません

FisheyeDetNet: 魚眼カメラに基づいた最初のターゲット検出アルゴリズム Apr 26, 2024 am 11:37 AM

目標検出は自動運転システムにおいて比較的成熟した問題であり、その中でも歩行者検出は最も初期に導入されたアルゴリズムの 1 つです。ほとんどの論文では非常に包括的な研究が行われています。ただし、サラウンドビューに魚眼カメラを使用した距離認識については、あまり研究されていません。放射状の歪みが大きいため、標準のバウンディングボックス表現を魚眼カメラに実装するのは困難です。上記の説明を軽減するために、拡張バウンディングボックス、楕円、および一般的な多角形の設計を極/角度表現に探索し、これらの表現を分析するためのインスタンスセグメンテーション mIOU メトリックを定義します。提案された多角形モデルの FisheyeDetNet は、他のモデルよりも優れたパフォーマンスを示し、同時に自動運転用の Valeo 魚眼カメラデータセットで 49.5% の mAP を達成しました。

Llama 70B を実行するシングルカードはデュアルカードより高速、Microsoft は FP6 を A100 オープンソースに強制導入 Apr 29, 2024 pm 04:55 PM

FP8 以下の浮動小数点数値化精度は、もはや H100 の「特許」ではありません。 Lao Huang は誰もが INT8/INT4 を使用できるようにしたいと考え、Microsoft DeepSpeed チームは NVIDIA からの公式サポートなしで A100 上で FP6 の実行を開始しました。テスト結果は、A100 での新しい方式 TC-FPx の FP6 量子化が INT4 に近いか、場合によってはそれよりも高速であり、後者よりも精度が高いことを示しています。これに加えて、エンドツーエンドの大規模モデルのサポートもあり、オープンソース化され、DeepSpeed などの深層学習推論フレームワークに統合されています。この結果は、大規模モデルの高速化にも即座に影響します。このフレームワークでは、シングルカードを使用して Llama を実行すると、スループットはデュアルカードのスループットの 2.65 倍になります。 1つ

See all articles

JSイベントバインディングとイベントフローモデルケース分析

2. イベントバインディングモデル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック