event事件孽文，document事件驻襟、滾動(dòng)事件介紹
event事件對(duì)象
1事件對(duì)象
Event 對(duì)象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素芋哭、鍵盤(pán)按鍵的狀態(tài)沉衣、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)减牺。
-
什么時(shí)候會(huì)產(chǎn)生Event 對(duì)象呢?
- 例如: 當(dāng)用戶單擊某個(gè)元素的時(shí)候,我們給這個(gè)元素注冊(cè)的事件就會(huì)觸發(fā),該事件的本質(zhì)就是一個(gè)函數(shù),而該函數(shù)的形參接收一個(gè)event對(duì)象.
事件通常與函數(shù)結(jié)合使用豌习，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！
-
使用場(chǎng)景即：
var oDIv = document.getElementById('box');
?
oDiv.onclick = function(event){
.........
}
2.事件流
2.1事件流發(fā)展史
見(jiàn)：http://www.cnblogs.com/rubylouvre/archive/2010/04/27/1721988.html
2.2冒泡（由下到上）
意思就是說(shuō),假如用戶單擊了一個(gè)元素,該元素?fù)碛幸粋€(gè)click事件,那么同樣的事件也將會(huì)被它的祖先觸發(fā),這個(gè)事件從該元素開(kāi)始一直冒泡到DOM樹(shù)的最上層,這一過(guò)程稱(chēng)為事件冒泡
2.3捕獲（由上到下）
事件捕獲和事件冒泡是相反的,也就是說(shuō),當(dāng)用戶觸發(fā)了一個(gè)事件的時(shí)候,這個(gè)事件是從DOM樹(shù)的最上層開(kāi)始觸發(fā)一直到捕獲到事件源.
2.4事件流的寫(xiě)法以及實(shí)現(xiàn)方式
-
標(biāo)準(zhǔn)實(shí)現(xiàn)方式使用關(guān)鍵詞
addEventListener
,假如你想要給某一個(gè)元素添加事件,現(xiàn)在就可以這樣寫(xiě)
element.addEventListener(eventType, fn, false)
-
dom對(duì)象.addEventListener(事件類(lèi)型, 回調(diào)函數(shù), 事件機(jī)制)這里的事件類(lèi)型表示你要使用哪種事件類(lèi)型比如click, 回調(diào)函數(shù)里面寫(xiě)著觸發(fā)此事件你要做什么事情, 事件機(jī)制分為冒泡和捕獲,如果為false表示事件冒泡,為true表示事件捕獲
-
IE寫(xiě)法：
dom對(duì)象.attachEvent(eventType, fn)第一個(gè)參數(shù)表示事件類(lèi)型,第二個(gè)是回調(diào).這種寫(xiě)法兼容IE, IE沒(méi)有實(shí)現(xiàn)事件捕獲,
-
3.關(guān)于event對(duì)象
- 在觸發(fā)的事件的函數(shù)里面我們會(huì)接收到一個(gè)event對(duì)象,通過(guò)該對(duì)象我們需要的一些參數(shù),比如說(shuō)我們需要知道此事件作用到誰(shuí)身上了,就可以通過(guò)event的屬性
target來(lái)獲取到(IE暫且不談),或者想阻止瀏覽器的默認(rèn)行為可以通過(guò)方法preventDefault()來(lái)進(jìn)行阻止.以下是event對(duì)象的一些屬性和方法
| 屬性 | 描述 |
|---|---|
| altKey | 返回當(dāng)事件被觸發(fā)時(shí)拔疚，”ALT” 是否被按下肥隆。 |
| button | 返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊稚失。 |
| clientX | 返回當(dāng)事件被觸發(fā)時(shí)栋艳，鼠標(biāo)指針的水平坐標(biāo)。 |
| clientY | 返回當(dāng)事件被觸發(fā)時(shí)墩虹，鼠標(biāo)指針的垂直坐標(biāo)嘱巾。 |
| ctrlKey | 返回當(dāng)事件被觸發(fā)時(shí)，”CTRL” 鍵是否被按下诫钓。 |
| metaKey | 返回當(dāng)事件被觸發(fā)時(shí)旬昭，”meta” 鍵是否被按下。 |
| relatedTarget | 返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)菌湃。 |
| screenX | 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)问拘，鼠標(biāo)指針的水平坐標(biāo)。 |
| screenY | 返回當(dāng)某個(gè)事件被觸發(fā)時(shí)惧所，鼠標(biāo)指針的垂直坐標(biāo)骤坐。 |
| shiftKey | 返回當(dāng)事件被觸發(fā)時(shí)，”SHIFT” 鍵是否被按下下愈。 |
-
IE屬性(除了上面的鼠標(biāo)/事件屬性纽绍，IE 瀏覽器還支持下面的屬性)
| 屬性 | 描述 |
|---|---|
cancelBubble |
如果事件句柄想阻止事件傳播到包容對(duì)象，必須把該屬性設(shè)為 true势似。 |
| fromElement | 對(duì)于 mouseover 和 mouseout 事件拌夏，fromElement 引用移出鼠標(biāo)的元素。 |
| keyCode | 對(duì)于 keypress 事件履因，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼障簿。對(duì)于 keydown 和 keyup |
| offsetX,offsetY | 發(fā)生事件的地點(diǎn)在事件源元素的坐標(biāo)系統(tǒng)中的 x 坐標(biāo)和 y 坐標(biāo)。 |
returnValue |
如果設(shè)置了該屬性栅迄，它的值比事件句柄的返回值優(yōu)先級(jí)高站故。把這個(gè)屬性設(shè)置為 |
srcElement |
對(duì)于生成事件的 Window 對(duì)象、Document 對(duì)象或 Element 對(duì)象的引用毅舆。 |
| toElement | 對(duì)于 mouseover 和 mouseout 事件西篓，該屬性引用移入鼠標(biāo)的元素愈腾。 |
| x,y | 事件發(fā)生的位置的 x 坐標(biāo)和 y 坐標(biāo)，它們相對(duì)于用CSS動(dòng)態(tài)定位的最內(nèi)層包容元素岂津。 |
- 標(biāo)準(zhǔn) Event 屬性 下面列出了 2 級(jí) DOM 事件標(biāo)準(zhǔn)定義的屬性
| 屬性和方法 | 描述 |
|---|---|
| bubbles | 返回布爾值顶滩，指示事件是否是起泡事件類(lèi)型。 |
| cancelable | 返回布爾值寸爆，指示事件是否可擁可取消的默認(rèn)動(dòng)作。 |
| currentTarget | 返回其事件監(jiān)聽(tīng)器觸發(fā)該事件的元素盐欺。 |
| eventPhase | 返回事件傳播的當(dāng)前階段赁豆。 |
| target | 返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）。 |
| timeStamp | 返回事件生成的日期和時(shí)間冗美。 |
| type | 返回當(dāng)前 Event 對(duì)象表示的事件的名稱(chēng)魔种。 |
| initEvent() | 初始化新創(chuàng)建的 Event 對(duì)象的屬性。 |
| preventDefault() | 通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作粉洼。 |
stopPropagation() |
不再派發(fā)事件节预。 |
4.Event對(duì)象的一些兼容寫(xiě)法
[
](javascript:void(0);)
獲得event對(duì)象兼容性寫(xiě)法
event || (event = window.event);
獲得target兼容型寫(xiě)法
event.target||event.srcElement
阻止瀏覽器默認(rèn)行為兼容性寫(xiě)法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止冒泡寫(xiě)法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
](javascript:void(0);)
事件綁定和取消事件綁定方法的形式
[
](javascript:void(0);)
//事件綁定function on(dom, eventType, fn) {
if(dom.addEventListener) {
dom.addEventListener(eventType, fn);
} else {
if(dom.attachEvent) {
dom.attachEvent('on' + eventType, fn);
}
}
//取消事件綁定
function un(dom, eventType, fn) {
if(dom.removeEventListener) {
dom.removeEventListener(eventType, fn, false);
} else {
if(dom.detachEvent) {
dom.detachEvent("on" + eventType, fn)
}
}
}
[
](javascript:void(0);)
5.事件冒泡和事件捕獲demo
[
](javascript:void(0);)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bubble event</title>
<style type="text/css">
body{margin:0;}
one{
width:500px;
height:500px;
background:rgb(255,0,0);
border: 1px solid transparent;
}
two{
width:400px;
height:400px;
margin: 0 auto;
margin-top: 50px;
background:rgb(255,50,50);
border: 1px solid transparent;
}
three{
width:300px;
height:300px;
margin: 0 auto;
margin-top: 50px;
background:rgb(255,100,100);
border: 1px solid transparent;
}
four{
width:200px;
height:200px;
margin: 0 auto;
margin-top: 50px;
background:rgb(255,150,150);
}
</style>
</head>
<body>
<div id='one'>
<div id='two'>
<div id='three'>
<div id='four'>
</div>
</div>
</div>
</div>
?
<script>
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var four = document.getElementById('four');
?
var useCapture = false; //false為冒泡獲取【目標(biāo)元素先觸發(fā)】 true為捕獲獲取【父級(jí)元素先觸發(fā)】
one.addEventListener('click', function(event) {
event || (event = window.event);
console.log(event);
console.log('one');
}, useCapture);
two.addEventListener('click', function() {
console.log('two');
}, useCapture);
three.addEventListener('click', function() {
console.log('three');
}, useCapture);
four.addEventListener('click', function() {
console.log('four');
}, useCapture);
?
/*
false
冒泡
點(diǎn)擊four div
輸出結(jié)果：four three two one
?
true
捕獲
點(diǎn)擊four div
輸出結(jié)果： one two three four
*/
</script>
</body>
</html>
](javascript:void(0);)
Document 文檔的屬性方法
document節(jié)點(diǎn)是文檔的根節(jié)點(diǎn)，每張網(wǎng)頁(yè)都有自己的document節(jié)點(diǎn)属韧。 屬性： 1：document.doctype----它是一個(gè)對(duì)象安拟，包含了當(dāng)前文檔類(lèi)型 （Document Type Declaration，簡(jiǎn)寫(xiě)DTD）信息宵喂。
2：document.documentElement----返回當(dāng)前文檔的根節(jié)點(diǎn)糠赦，對(duì)于HTML網(wǎng)頁(yè)，該屬性返回<html>節(jié)點(diǎn)锅棕。
3：document.defaultView---在瀏覽器中返回window對(duì)象
4：document.head-----返回當(dāng)前文檔的<head>節(jié)點(diǎn)
5：document.body-----屬性返回當(dāng)前文檔的<body>
6：document.activeElement----返回當(dāng)前文檔中獲得焦點(diǎn)的那個(gè)元素
7：document.documentURI---返回一個(gè)字符串拙泽，表示當(dāng)前文檔的網(wǎng)址。所有文檔都具備的
8：document.URL---返回一個(gè)字符串裸燎，表示當(dāng)前文檔的網(wǎng)址顾瞻。HTML文檔獨(dú)有的。
9：document.domain----返回當(dāng)前文檔的域名德绿。
10：document.lastModified----返回當(dāng)前文檔最后修改的時(shí)間戳荷荤，格式為字符串。
11：document.title----返回當(dāng)前文檔的標(biāo)題脆炎，該屬性是可寫(xiě)的梅猿。
12：document.characterSet---返回渲染當(dāng)前文檔的字符集，
13：document.referrer-----返回一個(gè)字符串秒裕，表示當(dāng)前文檔的訪問(wèn)來(lái)源袱蚓，
14：document.cookie----操作瀏覽器Cookie
15：document.readyState----返回當(dāng)前文檔的狀態(tài)，共有三種可能的值几蜻。
loading：加載HTML代碼階段（尚未完成解析）
interactive：加載外部資源階段時(shí)
complete：加載完成時(shí)
16：document.designMode----控制當(dāng)前文檔是否可編輯
17：document.compatMode----返回瀏覽器處理文檔的模式喇潘，
可能的值為BackCompat（向后兼容模式）和CSS1Compat（嚴(yán)格模式）体斩。
18：document.implementation---返回一個(gè)對(duì)象，用來(lái)甄別當(dāng)前環(huán)境部署了哪些DOM相關(guān)接口颖低。
19：document.location----返回location對(duì)象絮吵，提供了當(dāng)前文檔的URL信息。
document.location屬性與window.location屬性等價(jià)。
20：document.scripts----返回當(dāng)前文檔的所有腳本
21：document.styleSheets---返回一個(gè)類(lèi)似數(shù)組的對(duì)象，代表當(dāng)前網(wǎng)頁(yè)的所有樣式表纬纪。
22：document.links---返回當(dāng)前文檔所有設(shè)定了href屬性的a及area元素催跪。
23：document.forms---返回頁(yè)面中所有表單元素form。
24：document.images---返回頁(yè)面所有圖片元素
25：document.embeds---返回網(wǎng)頁(yè)中所有嵌入對(duì)象
方法：
1：document.write()---用于向當(dāng)前文檔寫(xiě)入內(nèi)容。只要當(dāng)前文檔還沒(méi)有用close方法關(guān)閉，它所寫(xiě)入的內(nèi)容就會(huì)追加在已有內(nèi)容的后面。
2：document.writeln()----與write方法完全一致瘪校，除了會(huì)在輸出內(nèi)容的尾部添加換行符。
注意名段，document.write會(huì)當(dāng)作HTML代碼解析阱扬，不會(huì)轉(zhuǎn)義。
除了某些特殊情況伸辟，應(yīng)該盡量避免使用document.write這個(gè)方法麻惶。
3：document.getElementsByTagName()----返回值是一個(gè)類(lèi)似數(shù)組的HTMLCollection對(duì)象。返回所有指定HTML標(biāo)簽的元素信夫，元素的變化實(shí)時(shí)反映在返回結(jié)果中用踩。
4：document.getElementsByClassName()----返回值是一個(gè)類(lèi)似數(shù)組的HTMLCollection對(duì)象。返回包括了所有class名字符合指定條件的元素忙迁，元素的變化實(shí)時(shí)反映在返回結(jié)果中脐彩。
5：document.getElementsByName()---返回一個(gè)類(lèi)似數(shù)組的的對(duì)象（NodeList對(duì)象的實(shí)例） 用于選擇擁有name屬性的HTML元素
6：getElementById()--------返回匹配指定id屬性的元素節(jié)點(diǎn)。
這個(gè)方法只能在document對(duì)象上使用姊扔，不能在其他元素節(jié)點(diǎn)上使用惠奸。
7：document.querySelector()---接受一個(gè)CSS選擇器作為參數(shù)，返回匹配該選擇器的元素節(jié)點(diǎn)恰梢。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件佛南，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)嵌言，則返回null嗅回。
8：document.querySelectorAll()---返回一個(gè)NodeList對(duì)象，包含所有匹配給定選擇器的節(jié)點(diǎn)摧茴。 不會(huì)實(shí)時(shí)反映元素節(jié)點(diǎn)的變化绵载。但是，7和8都無(wú)法選中偽元素和偽類(lèi)。
9：document.createElement()---生成HTML元素節(jié)點(diǎn)
10：document.createTextNode()---用來(lái)生成文本節(jié)點(diǎn)娃豹，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容焚虱。 createTextNode方法對(duì)大于號(hào)和小于號(hào)進(jìn)行轉(zhuǎn)義，不對(duì)單引號(hào)和雙引號(hào)轉(zhuǎn)義
11：document.createAttribute()---生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)懂版，并返回它鹃栽。參數(shù)是屬性的名稱(chēng)。
12：document.createDocumentFragment()---生成一個(gè)DocumentFragment對(duì)象躯畴。 DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段民鼓，但是不屬于當(dāng)前文檔，常常用來(lái)生成較復(fù)雜的DOM結(jié)構(gòu)蓬抄，然后插入當(dāng)前文檔摹察。因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)倡鲸，都不會(huì)引發(fā)網(wǎng)頁(yè)的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)黄娘。
13：document.createEvent()---生成一個(gè)事件對(duì)象峭状，參數(shù)是事件類(lèi)型
14：document.addEventListener()----添加事件監(jiān)聽(tīng)函數(shù)
15：document.removeEventListener()----移除事件監(jiān)聽(tīng)函數(shù)
16：document.dispatchEvent()----觸發(fā)事件
17：document.hasFocus()---返回一個(gè)布爾值，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點(diǎn)逼争。
18：document.createNodeIterator()-----返回一個(gè)DOM的子節(jié)點(diǎn)遍歷器优床。遍歷子節(jié)點(diǎn)。第一個(gè)參數(shù)為遍歷器的根節(jié)點(diǎn)誓焦，第二個(gè)參數(shù)為所要遍歷的節(jié)點(diǎn)類(lèi)型--文本節(jié)點(diǎn)（NodeFilter.SHOW_TEXT）胆敞， 元素節(jié)點(diǎn)-NodeFilter.SHOW_ELEMENT， 所有節(jié)點(diǎn)-NodeFilter.SHOW_ALL nextNode方法先返回遍歷器的內(nèi)部指針?biāo)诘墓?jié)點(diǎn)杂伟，然后會(huì)將指針移向下一個(gè)節(jié)點(diǎn)移层。所有成員遍歷完成后，返回null赫粥。previousNode方法則是先將指針移向上一個(gè)節(jié)點(diǎn)观话，然后返回該節(jié)點(diǎn)。
19：document.createTreeWalker()----返回一個(gè)DOM的子樹(shù)遍歷器越平。它遍歷整個(gè)子樹(shù)频蛔。第一個(gè)參數(shù)，是所要遍歷的根節(jié)點(diǎn)秦叛，第二個(gè)參數(shù)指定所要遍歷的節(jié)點(diǎn)類(lèi)型晦溪。
20：document.adoptNode()-----將某個(gè)節(jié)點(diǎn)，從其原來(lái)所在的文檔移除挣跋，插入當(dāng)前文檔三圆，并返回插入后的新節(jié)點(diǎn)。
21：document.importNode()----從外部文檔拷貝指定節(jié)點(diǎn)，插入當(dāng)前文檔嫌术。 它的第一個(gè)參數(shù)是外部節(jié)點(diǎn)哀澈，第二個(gè)參數(shù)是一個(gè)布爾值，
表示對(duì)外部節(jié)點(diǎn)是深拷貝還是淺拷貝度气，默認(rèn)是淺拷貝（false）
22：document.getSelection()-----這個(gè)方法指向window.getSelection()
23：document.open()---用于新建一個(gè)文檔割按，供write方法寫(xiě)入內(nèi)容。
24：document.close()---用于關(guān)閉open方法所新建的文檔磷籍。一旦關(guān)閉适荣，write方法就無(wú)法寫(xiě)入內(nèi)容了。
滾動(dòng)事件方法
onscroll
解釋?zhuān)寒?dāng)元素的滾動(dòng)條滾動(dòng)時(shí)觸發(fā)的事件院领。
onscroll事件貌似任何實(shí)體元素都可以綁定弛矛，這里的實(shí)體元素包括DOM元素、window元素比然、document元素丈氓。
用法即：element.onscroll=function(){};
需要注意的是，滾動(dòng)條一定要出現(xiàn)强法，而且滾動(dòng)條是屬于這元素的万俗，例如：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n229" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: rgb(51, 51, 51); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div id="wrap" style="height:100px;overflow:auto;">
<div id="inner" style="height:200px;">content</div>
</div></pre>
因?yàn)橥鈱觲rap的高度小于內(nèi)層inner的高度，所以當(dāng)設(shè)置overflow:auto時(shí)會(huì)出現(xiàn)滾動(dòng)條饮怯，當(dāng)拖動(dòng)滾動(dòng)條時(shí)就會(huì)觸發(fā)wrap的onscroll事件闰歪，而不是inner的onscroll事件，即這滾動(dòng)條屬于wrap而不是屬于inner蓖墅，明白這點(diǎn)十分重要库倘，對(duì)下面理解的scrollTop、scrollHeight一樣道理论矾。
scrollTop
解釋?zhuān)涸貪L動(dòng)條內(nèi)的頂部隱藏部分的高度教翩。
scrollTop屬性只有DOM元素才有，window/document沒(méi)有贪壳。
用法1：獲取值 var top = element.scrollTop;//返回?cái)?shù)字迂曲，單位像素
用法2：設(shè)置值 element.scrollTop = 200;
對(duì)上面的例子來(lái)說(shuō)，控制滾動(dòng)條的位置是wrap.scrollTop=xx;而不是inner.scrollTop寥袭，道理同上路捧。
兼容性問(wèn)題：獲得整個(gè)文檔scrollTop，IE是document.documentElement.scrollTop传黄，F(xiàn)F/CH則是document.body.scrollTop.
scrollHeight
解釋?zhuān)涸貪L動(dòng)條內(nèi)的內(nèi)容高度杰扫。
scrollHeight同scrollTop屬性一樣，只有DOM元素才有膘掰，window/document沒(méi)有章姓。
不同的是scrollHeight是只讀佳遣，不可設(shè)置。
兼容性問(wèn)題：獲取整個(gè)文檔scrollHeight凡伊，IE/FF/CH都可以通過(guò)document.documentElement.scrollHeight或document.body.scrollHeight獲得零渐。
此外還有scrollLeft，scrollWidth系忙，道理是一樣的诵盼。
關(guān)于window.scroll()，window.scrollBy()银还，window.scrollTo()
這3個(gè)是全局函數(shù)风宁，最新的IE/FF/CH都支持。
window.scroll(x,y)是讓window滾動(dòng)條滾動(dòng)到那個(gè)x,y坐標(biāo)蛹疯。//x是水平坐標(biāo)戒财，y是垂直坐標(biāo)。
window.scrollBy(-x,-y)是讓window滾動(dòng)條相對(duì)滾動(dòng)到某個(gè)坐標(biāo)捺弦，- 10即相對(duì)向左/向上滾動(dòng)10像素饮寞。
window.scrollTo(x,y)和window.scroll(x,y)一樣。
