3つのレベルのDOMイベント
DOM0レベルのイベント
DOM0レベルの時間は、2つのタイプに分けられます。1つは、実行ステートメントをラベルに直接追加することであり、もう1つは、実行関数を定義することです。
<input type="text" id="test">
<input type="button" value="button" onclick="alert(document.getElementById('test').value)">
<script>
document.getElementById('button').onclick=function(){
alert(document.getElementById('test').value);
}
</script>
DOM2レベルのイベント
最初のパラメーター：イベントの名前
。2番目のパラメーター：実行関数
。3番目のパラメーター：バブリングまたはキャプチャーを指定します。デフォルトはfalse、バブリングです。
element.addEventListener('click',function(){
},false)
DOM3レベルのイベントは
DOM2レベルと同じですが、マウスイベントやキーボードイベントなどのイベントタイプが追加されている点が異なります。
element.addEventListener('keyup',function(){
},false)
DOMイベントレベルに関しては、答えられる限り、あまり多くの質問をしたり、質問したりすることはありません。
2種類のDOMイベント
イベントには、イベントキャプチャとイベントバブリングの2種類があります。
イベントのキャプチャは、イベントの頂点から始まり、ターゲット要素までレベルごとに検索して、外側から内側に向かって行われます。
イベントバブリングは、特定のターゲットノード要素から裏返しにトリガーされ、ルートノードに渡されます。特定のプロセスを理解するには、次の図を参照してください。
DOMイベントのイベントフロー
イベントフローは、イベント配信のプロセスです。
DOMの完全なイベントストリームは、次の3つのフェーズで構成されています事件捕获阶段、目标阶段と事件冒泡阶段。
イベントはキャプチャを介してターゲット要素に到達します。今回はターゲットステージです。ターゲットノード要素からルートノードにイベントをアップロードするプロセスは、第3段階であるバブリング段階です。
上の写真に対応して、自分の体験を体験してください。
DOMイベントキャプチャの特定のプロセスを説明する
私を含む多くの人は、イベントを最初に受け取るオブジェクトはドキュメントだと思いますが、そうではありません。最初のオブジェクトはウィンドウオブジェクトです。その後はドキュメントオブジェクトです。コードを使用して、キャプチャプロセス全体を示します。
<div id="dom">
<style media="screen">
#dom{
width: 300px;
height: 100px;
background: red;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
目标元素
</div>
<script type="text/javascript">
var dom = document.getElementById('dom');
dom.addEventListener('click', function (e) {
console.log('this div');
}, true);
window.addEventListener('click', function (e) {
console.log('this window');
}, true);
document.addEventListener('click', function (e{
console.log('this document');
}, true);
document.documentElement.addEventListener('click', function (e) {
console.log('this html');
}, true);
document.body.addEventListener('click',function (e) {
console.log('this body');
}, true);
</script>
イベントオブジェクトの一般的なアプリケーション
<script>
window.onload=function(){
document.onclick=function (e) {
//获取事件对象
e = e || window.event;//IE和Chrome下是window.event FF下是e
//获取事件源
var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target
// 防止默认行为
if (e.preventDefault) {
e.preventDefault();//IE以外
} else {
e.returnValue = false;//IE
//注意：这个地方是无法用return false代替的
//return false只能取消元素
}
//阻止事件冒泡
if (e.stopPropagation) {
e.stopPropagation();//IE以外
} else {
e.cancelBubble = true;//IE
}
};
};
</script>
new Event（）を使用してイベントをカスタマイズすることもできます
var eve = new Event('test'); //通过new Event 创建事件
dom.addEventListener('test', function () {
//注册事件
console.log('test dispatch');
});
setTimeout(function () {
dom.dispatchEvent(eve); //触发事件
}, 1000);