JSのイベントフロー、イベントバブリング、イベント監視、イベントデリゲートの問題の概要

1、イベントの流れ

イベントがイベントフローの子要素になるプロセストリガする親要素から子から親要素または要素にトリガされたときに
イベントのストリームを2つのモードがあります。
イベントがトリガする親要素のサブ要素からバブリング
子要素に親要素からキャプチャイベントをトリガー
//測定
イベントフロー試験

イベントフローグラフイベントフローグラフ

2、イベントバブリング(重要)

イベントがトリガされると、同じイベントが親要素の引き金となる、このような現象は、イベントバブルと呼ばれている
停止イベントバブリングを:

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

onkeydownをonkeyupのonmouseover属性のonclick:すべてのイベントは、バブル現象を持つことになり、一般的な現象の一般的なイベントのバブリング生成されます
イベントになるではないバブルの挙動を:onloadイベントONFOCUS(フォーカスを取得)のonblur(負けフォーカス)
//測定をバブリング防ぎます
測定されたストップバブリング
//カスケードメニューを使用
生産カスケードメニュー
4、イベントリスナーを

イベントの結合:イベント付加要素の
1:Directは、ラベル上にイベントを追加する
方法:スクリプトタグ内にイベントを追加する
3つの方法:要素としてのイベントを使用して、イベントリスナーを追加するaddEventListenerメソッド
イベントリスナーie678を:attachEvent()detachEvent()

要素.addEventListener(「イベント」機能は、(){
注:ここでイベントがONを除去することである
}に、真/偽)第三のパラメータは、デフォルトの動作は、キャプチャまたは偽バブリングするバブリングすることで判断します

取消事件监听 :
removeEventListener()
//测试
イベントリスナーを使用して、要素のためのイベントを追加
事件监听方法好处 :
1、可以为同一个标签添加多次同样的事件 事件均会被触发
2、可以通过事件监听的方法完成冒泡或捕获行为

onclick 与 addEventListener(“click”)两种添加事件的区别 :

前者同一个元素只能添加一次同样的事件 前者不可以实现捕获效果
事件的取消: 事件源.事件 = null
后者同一个元素可以添加多次同样的事件 后者既可以实现冒泡又可以实现捕获 第三个参数实现
事件的取消: removeEventListener()

5、事件触发过程
事件原理 : 三个阶段
事件捕获阶段
目标阶段(事件源)
冒泡阶段

6、浏览器的默认行为
右键单击浏览器会弹出来菜单
图片或文字默认会被拖拽
超链接默认跳转或刷新页面
submit按钮和button标签按钮在form标签中默认会刷新页面

7、阻止浏览器的默认行为
兼容写法 :
e.preventDefault ? e.preventDefault() : e.returnValue = false
或 return false; 各种浏览器都兼容

8、事件委托(重要 )
委托 :让别人完成
事件委托 : 当需要为多个同类的标签添加相同的事件时,可以将这个事件添加到这一批同类标签的父级元素上 注意:这里的父级可以是直接父级 也可以是爷爷级 曾爷爷 …
事件委托好处 :
减少了事件绑定浏览器重绘的次数,提高了程序的执行效率;
减少事件的冗余绑定,节约了事件资源。
可以解决动态添加的元素节点无法绑定事件的问题;

事件委托机制 :利用事件冒泡或捕获机制完成的 不能冒泡的事件也就不能使用事件委托

事件委托两个核心步骤 :
获取事件源:
e.target || e.srcElement
明确事件源:
可以通过标签名 tagName/nodeName
可以通过 类名 className
可以通过 id
可以通过 自定义属性 getAttribute()

//テスト
JSイベントの委任を実装します
9、オブジェクト表記ではJavaScript JSONオブジェクト
である軽量のデータストレージフォーマットのJavaScriptオブジェクト表記の
役割:データストアに 
定義およびデータ取得JSON JSONオブジェクトの
JSONオブジェクトはキーと値のペアであり、
ストリンジェントなJSONオブジェクトキー必要二重引用符を使用し
、厳格なJSONオブジェクトの値は機能することはできません
。取得したJSONオブジェクトデータ
。JSON、またはJSONのキー[「キー」]
トラバースJSONオブジェクト:中のため...
//練習
実際にはJS JSONオブジェクト
//が動的にフォームを作成します

JSの動的なフォームを作成します。

おすすめ

転載: blog.csdn.net/ZHANGJIN9546/article/details/92956528