JavaScript学習まとめ(九)事件の詳細
12521 ワード
実はこの文章はずっと前から書いていましたが、sf保存の方面のバグのために、当時はたくさん書いていましたが、結局保存されていませんでした.これは書き上げていないというのは残念です.今日は暇があったら補充してください.ちょうど私の
実は前の文章も一部の事件に関連しています.私の文章を参照してください.JavaScript学習まとめ(三)BOMとDOM詳細解説
ここでは、js関連の事件について議論します.
イベントハンドラ
事件の泡と捕獲
イベントフローとは、ページ内でイベントを受信する順序を指し、
イベントキャプチャはNetscapeで唯一サポートされているイベントフローモデルですが、現在はIE 9、フォックスとGoogleもこのようなイベントフローモデルをサポートしています.
事件勃発のメリット
イベントは泡が発生するメカニズムを持っているので、泡が発生する原理を利用して、イベントを親レベルに加え、実行効果をトリガすることができます.このようにするメリットはもちろん性能を向上させることです.
javascript学習のまとめに完結編を作ってくれます.実は前の文章も一部の事件に関連しています.私の文章を参照してください.JavaScript学習まとめ(三)BOMとDOM詳細解説
ここでは、js関連の事件について議論します.
イベントハンドラ
DOMにはいくつかのイベントが定義されていますが、あるイベントに応答する関数をイベントハンドラ(またはイベントリスタ)といいます.イベントハンドラの名前は一般に「on」で始まります.例えば、onclickなどです.事件の泡と捕獲
イベントフローとは、ページ内でイベントを受信する順序を指し、
IE、ファイアフォックスおよびchromeブラウザは、イベント泡とは、イベントの最初に最も具体的な要素によって受信され、その後、段階的に特定されていないノードに伝播することを意味する.イベントトラッピングは逆であり、イベントトラッピングはNetscapeによって提案されており、イベント泡立ちと捕獲は具体的には以下の図のように示されている.イベントキャプチャはNetscapeで唯一サポートされているイベントフローモデルですが、現在はIE 9、フォックスとGoogleもこのようなイベントフローモデルをサポートしています.
事件勃発のメリット
イベントは泡が発生するメカニズムを持っているので、泡が発生する原理を利用して、イベントを親レベルに加え、実行効果をトリガすることができます.このようにするメリットはもちろん性能を向上させることです.
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
ali[i].onmouseout = function () {
this.style.backgroundColor = "";
}
}
};
</script>
<div>
<ul id="bubble">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</code></pre>
<p> li 。 <code>li</code> <code>for</code> 。<br/> <code> </code> 。<code>html</code> :</p>
<pre><code><script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
// ， 。
// ie：window.event.srcElement
// :event.target
aUl.onmouseover = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "blue";
}
};
aUl.onmouseout = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() = "li"){
target.style.background = "";
}
}
};
</script>
</code></pre>
<p> ， ， ：</p>
<pre><code><div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"/>
</div>
<script type="text/javascript">
// ， ， （ ）
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}
//
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
</script></code></pre>
<p> ：</p>
<p><span class="img-wrap"/></p>
<h2>DOM 0 </h2>
<p> <code>js</code> 。 （ ， ：<code>onclick</code>）</p>
<pre><code>btn.onclick = function(){
console.log('hello');
};</code></pre>
<p> DOM 0 。 ，this ：</p>
<pre><code>var btn = document.getElementById('myDiv');
//DOM event
btn.onclick = function (event) {
alert(this.id);//myDiv
};
</code></pre>
<h2>DOM level 1</h2>
<p><code>DOM level 1</code> <code>HTML</code> <code>XML</code> 。 。</p>
<p><code>DOM level 1</code> 1998 10 1 W3C 。</p>
<p> 2000 9 29 。</p>
<p> ：<code>DOM level 0</code> W3C 。 <code>Netscape Navigator 3.0</code> <code>IE 3.0</code> 。</p>
<h2>DOM 2 </h2>
<p><code>DOM 2</code> ， ：<code>addEventListener()</code> <code>removeEventListener()</code>， ：</p>
<pre><code>1. 。 click
2. 。
3. （true ，false ）
</code></pre>
<p> <code>Element</code> <code>addEventListener</code> ， 。</p>
<pre><code>//element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
console.log(this.id);
},false);
</code></pre>
<h2>IE </h2>
<p>IE9 IE <code>addEventListener()</code> <code>removeEventListener（）</code>。<br/> ，IE <code>attachEvent()</code> <code>detachEvent()</code> <code>DOM</code> ， <code>IE8</code> ， ：</p>
<pre><code>1、 （ on）
2、 </code></pre>
<p> <code>attachEvent()</code> ：</p>
<pre><code>var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
console.log(this.id);
});</code></pre>
<p> ， <code>attachEvent()</code> ， ， ， <code>this</code> <code>window</code></p>
<h2> </h2>
<p> <code>DOM</code> ， <code>event</code>， 。 、 。<code>event</code> <code> </code> 。 <code>event</code> ：</p>
<pre><code>type (String) —
target (node) — DOM
currentTarget?(node) — DOM （ ）
bubbles (boolean) — （ ）
preventDefault(function) — 。 <a> click
cancelable (boolean) — event.preventDefault 。
stopPropagation (function) — ，bubbles true
eventPhase： ， ，0 DOM ，1 ，2 ，3 。
</a></code></pre>
<p> ， ， <code>event</code> 。 ， <code>clientX</code> <code>clientY</code> 。</p>
<p> ，<code>stopPropagation()</code> DOM ， 。</p>
<pre><code>var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
alert("clicked");
event.stopPropagation();
};
// document.body
document.body.onclick = function (event) {
alert("Body clicked");
};</code></pre>
<p> ，<code>event</code> ， ，<code>event</code> 。</p>
<h3>IE </h3>
<p> <code>DOM 0</code> ，<code>event</code> <code>window</code> ：</p>
<pre><code>var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
var event = window.event;
alert(event.type);//click
};</code></pre>
<p>IE <code>event</code> 。</p>
<pre><code>cancleBubble false， true ， dom stopPropagation() 。
returnValue true， false dom preventDefault（） 。
srcElement ， dom target 。
type 。
</code></pre>
<h2>click </h2>
<p> ，<code>event</code> 。</p>
<pre><code>pageX，pageY： html ， 。
clientX，clientY： （viewport） ， 。
screenX，screenY： ， </code></pre>
<h3>clientX，clientY</h3>
<p> ：<code>clientX</code> <code>clientY</code>， （ ）<br/><span class="img-wrap"/></p>
<p><strong> </strong></p>
<pre><code> 4 。
（1）offsetHeight： ， 。 、（ ） 、 。
（2）offsetWidth： ， 。 、（ ） 、 。
（3）offsetLeft： 。
（4）offsetTop： 。 </code></pre>
<h3>pageX，pageY</h3>
<p> ， ，<code>pageX</code>，<code>pageY</code> <code>clientX</code>，<code>clientY</code> </p>
<p><strong> </strong></p>
<p> ， 。</p>
<pre><code> 4 。
（1）scrollHeight： ， 。
（2）scrollWidth： ， 。
（3）scrollLeft： 。 。
（4）scrollTop： 。 。 </code></pre>
<h2> </h2>
<p> ， 4 ：</p>
<pre><code> 1. blur： ，
2. focus： 。
3. focusin： ，
4. focusout： ，
</code></pre>
<h2> </h2>
<p>DOM 3 9 ：</p>
<pre><code>click： 。
dbclick：
mousedown： ， 。
mousemove： ， 。
mouseout： ， 。
mouseover： ， 。
mouseenter： “mouseover”， ， 。
mouseleave： “mouseout”， 。 。
mouseup： ， 。
clientX clientY ， 。 ， 。</code></pre>
<p> 。 <code>mouseenter</code> <code>mouseleave</code> ， ， 。 ， 。</p>
<blockquote>
<code>mouseenter</code>
<code>mouseover</code> ：
<br/> http://www.w3school.com.cn/ti...
</blockquote>
<h2> </h2>
<p>（1）<code>drag</code> </p>
<pre><code>
drag 。
</code></pre>
<p>（2）<code>dragstart</code>，<code>dragend</code> </p>
<pre><code>
dragstart ，dragend 。
</code></pre>
<p>（3）<code>dragenter</code>，<code>dragleave</code> </p>
<pre><code>
dragenter ， 。dragleave ， 。
</code></pre>
<p>（4）<code>dragover</code> </p>
<pre><code>
dragover ， 。
</code></pre>
<p>（5）<code>drop</code> </p>
<pre><code>
， ， drop 。
</code></pre>
<h2> </h2>
<ol>
<li>JavaScript （ ） </li>
<li>JavaScript （ ） </li>
<li>JavaScript （ ）BOM DOM </li>
<li>JavaScript （ ）function </li>
<li>JavaScript （ ） </li>
<li>JavaScript （ ） JSON </li>
<li>JavaScript （ ）Ajax Http </li>
<li>JavaScript （ ） </li>
</ol>
</div>
</div>
</div>