プライベートカスタムjavascriptイベント処理メカニズム(概要)
10693 ワード
園子が事件の傍受について発表した文章を見て、私は少し書くのが耻ずかしい.しかし、私のテーマを個人的に決めて作ることから始めても適切に書きましょう.
イベント関連の概念
1.イベントタイプ発生イベントの文字列には、フォーム、windowイベントなどの従来のイベントタイプのDOMイベントタイプHTML 5イベントタイプdrag、dropタッチスクリーン、touchmove 2などのモバイルデバイスイベントタイプがある.イベントターゲットWindow/Document/Element/XMLHttpRequest/...3.イベントオブジェクトが特定のイベントに関連付けられ、イベントの詳細が含まれているオブジェクトは、よく知られているevent 4です.イベント伝播ブラウザは、どのオブジェクトがイベントハンドラをトリガーするかを決定するプロセスにバブルフェーズとキャプチャフェーズがあります.
イベントハンドラの登録
1.イベントターゲットの属性を、必要なイベントハンドラ関数、例えばdom 1に設定.onclick=function(){/*....*/};2.HTMLタグ属性をイベントハンドラ、例えば
最後に提案するのはjsコードとhtmlを分けることを提案して、このようにやっとhtmlとjavascriptのそれぞれの職責に合致するためです
イベントハンドラの実行環境
1.属性登録処理プログラムの場合、例えばe.onclick=function(){/**/}thisはイベントターゲットオブジェクト2を指す.attachEvent()の場合、thisはwindowオブジェクトを指しますので、次のコードを参照してください.
イベントハンドラの戻り値falseの多くは、リンクのジャンプなどのブラウザのデフォルト操作をブロックし、return falseがジャンプをブロックする場合
イベント呼び出し順序
1.オブジェクト属性またはHTML属性を設定して登録するハンドラは常に優先的に呼び出す.addEventListener()が登録するハンドラは、それらの登録順に呼び出される.attachEvent()に登録されたプロセッサは、任意の順序でイベント呼び出し順序について呼び出すことができるが、ここではDOM 2レベルのイベント規定イベントが3つの段階1を含むと言わざるを得ない.イベント取得フェーズ2.目標段階3にある.イベントバブルフェーズここで借りるhttp://www.cnblogs.com/yexiaochai/p/3567597.htmlの例とその発見を拝む
結果は次のとおりです.
//親ノードキャプチャ//子ノードキャプチャ//子ノードバブル//親ノードバブルはまずDOM 2に従って実行するが、もし2になったら.フェーズの場合、キャプチャとバブルがバインドされている場合は、登録順に実行されますので、次のコードであれば
では、答えはいくらですか.
//親ノードキャプチャ//子ノードバブル//子ノードキャプチャ//親ノードバブルマウスイベントmouseenterとmouseleave以外のすべてのマウスイベントがバブル可能
イベントのキャンセル
イベントオブジェクト(event)のpreventDefault()/returnValue=false(IE)イベントオブジェクトを通過するstopPropagation()は、イベント伝播の任意の時間に呼び出すことができ、キャプチャフェーズ、イベントターゲット自体、およびバブルフェーズにかかわらず、イベントのさらなる伝播を阻止し、キャプチャにかかわらずバブルにかかわらず/cancelBubble=true(IE)はバブルイベント伝播をキャンセルするしかない
ドキュメント読み込みイベント
ドキュメントの読み込み解析が完了し、スクリプトの実行が遅延した場合、DOMContentLoadedイベントがトリガーされます.画像と非同期(async)スクリプトはロードされている可能性がありますが、ドキュメントは操作の準備ができています.
IEでは、状態が変化するたびにDocumentが伴う.それでは...readyStateプロパティは、ドキュメントのロードプロセスによって変わります.completeであれば、ドキュメントの準備が完了していることを示します.ここでreadystatechangeの実行順序はDOMContentLoadedよりも前ですが、readystatechangeは複数回ポーリングされます.検証されていないと思います.
ドキュメントは、パッケージ化された関数を準備します.
終わりの言葉
イベント処理呼び出しメカニズムは、まず3つの段階といくつかのよく使われるイベントタイプ関数を理解しなければならない.結局、フロントエンドjsはイベント駆動の書き方が多く、本人のレベルが限られているので、間違いがあれば、指摘してほしい.
イベント関連の概念
1.イベントタイプ発生イベントの文字列には、フォーム、windowイベントなどの従来のイベントタイプのDOMイベントタイプHTML 5イベントタイプdrag、dropタッチスクリーン、touchmove 2などのモバイルデバイスイベントタイプがある.イベントターゲットWindow/Document/Element/XMLHttpRequest/...3.イベントオブジェクトが特定のイベントに関連付けられ、イベントの詳細が含まれているオブジェクトは、よく知られているevent 4です.イベント伝播ブラウザは、どのオブジェクトがイベントハンドラをトリガーするかを決定するプロセスにバブルフェーズとキャプチャフェーズがあります.
イベントハンドラの登録
1.イベントターゲットの属性を、必要なイベントハンドラ関数、例えばdom 1に設定.onclick=function(){/*....*/};2.HTMLタグ属性をイベントハンドラ、例えば
に設定するしかし、実際にjavascriptエンジンは、役割ドメインを前置することに相当し、withに対する理解が深くないことを示しています.
function(event){
with(document){
with(this.form||{}){
with(this){
/* */
}
}
}
} 最後に提案するのはjsコードとhtmlを分けることを提案して、このようにやっとhtmlとjavascriptのそれぞれの職責に合致するためです
イベントハンドラの実行環境
1.属性登録処理プログラムの場合、例えばe.onclick=function(){/**/}thisはイベントターゲットオブジェクト2を指す.attachEvent()の場合、thisはwindowオブジェクトを指しますので、次のコードを参照してください.
function addEvent(target,type,handler)
{
if(target.addEventListener)
target.addEventListener(type,handler,false);
else
target.attachEvent("on"+type,
function(event){
return handler.call(target,event);
});
}イベントハンドラの戻り値falseの多くは、リンクのジャンプなどのブラウザのデフォルト操作をブロックし、return falseがジャンプをブロックする場合
イベント呼び出し順序
1.オブジェクト属性またはHTML属性を設定して登録するハンドラは常に優先的に呼び出す.addEventListener()が登録するハンドラは、それらの登録順に呼び出される.attachEvent()に登録されたプロセッサは、任意の順序でイベント呼び出し順序について呼び出すことができるが、ここではDOM 2レベルのイベント規定イベントが3つの段階1を含むと言わざるを得ない.イベント取得フェーズ2.目標段階3にある.イベントバブルフェーズここで借りるhttp://www.cnblogs.com/yexiaochai/p/3567597.htmlの例とその発見を拝む
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
#c { width: 200px; height: 200px; border: 1px solid red; }
#sub { width: 100px; height: 100px; border: 1px solid red; }
</style>
</head>
<body>
<div id="p">
parent
<div id="c">
child
</div>
</div>
<script type="text/javascript">
window.alert = function (msg) {
console.log(msg);
};
var p = document.getElementById('p'),
c = document.getElementById('c');
p.addEventListener('click', function (e) {
alert(' ')
}, false);
c.addEventListener('click', function (e) {
alert(' ')
}, true);
c.addEventListener('click', function (e) {
alert(' ')
}, false);
p.addEventListener('click', function (e) {
alert(' ')
}, true);
</script>
</body>
</html>結果は次のとおりです.
//親ノードキャプチャ//子ノードキャプチャ//子ノードバブル//親ノードバブルはまずDOM 2に従って実行するが、もし2になったら.フェーズの場合、キャプチャとバブルがバインドされている場合は、登録順に実行されますので、次のコードであれば
p.addEventListener('click', function (e) {
alert(' ')
}, false);
c.addEventListener('click', function (e) {
alert(' ')
}, false);
c.addEventListener('click', function (e) {
alert(' ')
}, true);
p.addEventListener('click', function (e) {
alert(' ')
}, true);では、答えはいくらですか.
//親ノードキャプチャ//子ノードバブル//子ノードキャプチャ//親ノードバブルマウスイベントmouseenterとmouseleave以外のすべてのマウスイベントがバブル可能
イベントのキャンセル
イベントオブジェクト(event)のpreventDefault()/returnValue=false(IE)イベントオブジェクトを通過するstopPropagation()は、イベント伝播の任意の時間に呼び出すことができ、キャプチャフェーズ、イベントターゲット自体、およびバブルフェーズにかかわらず、イベントのさらなる伝播を阻止し、キャプチャにかかわらずバブルにかかわらず/cancelBubble=true(IE)はバブルイベント伝播をキャンセルするしかない
ドキュメント読み込みイベント
ドキュメントの読み込み解析が完了し、スクリプトの実行が遅延した場合、DOMContentLoadedイベントがトリガーされます.画像と非同期(async)スクリプトはロードされている可能性がありますが、ドキュメントは操作の準備ができています.
IEでは、状態が変化するたびにDocumentが伴う.それでは...readyStateプロパティは、ドキュメントのロードプロセスによって変わります.completeであれば、ドキュメントの準備が完了していることを示します.ここでreadystatechangeの実行順序はDOMContentLoadedよりも前ですが、readystatechangeは複数回ポーリングされます.検証されていないと思います.
ドキュメントは、パッケージ化された関数を準備します.
var whenReady = (function () {
var funcs = [];
var ready = false;
function handler(e) {
if (ready) return;
// readystatechange ， document.readyState === "complete"
//
if (e.type === "readystatechange" && document.readyState !== "complete") {
return;
}
for (var i = 0; i < funcs.length; i++) {
funcs[i].call(document);
}
ready = true;
funcs = null;
};
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", handler, false);
document.addEventListener("readystatechange", handler, false);
window.addEventListener("load", handler, false);
}
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", handler);
window.attachEvent("onload", handler);
}
return function whenReady(f) {
if (ready) f.call(document);
else funcs.push(f);
}
}());
function fn() {
console.log("fn is exec");
}
document.addEventListener("DOMContentLoaded", fn, false);
whenReady(fn);終わりの言葉
イベント処理呼び出しメカニズムは、まず3つの段階といくつかのよく使われるイベントタイプ関数を理解しなければならない.結局、フロントエンドjsはイベント駆動の書き方が多く、本人のレベルが限られているので、間違いがあれば、指摘してほしい.