JS基礎(chǔ)（綁定及解綁事件，元素屬性及方法，元素位置及寬高的值）

Enlightenment 發(fā)布于2019-08-26 13:30 / 895人閱讀

摘要：綁定及解綁事件事件綁定的三種方式事件類型，命名函數(shù)，布爾值不支持代表的是當(dāng)前綁定事件的對(duì)象事件類型，函數(shù)名字，移除事件注意中的第三個(gè)參數(shù)設(shè)置為就在捕獲過程中執(zhí)行，反之就在冒泡過程中執(zhí)行處理函數(shù)。

JS 綁定及解綁事件


事件綁定的三種方式


.addEventListener("事件類型"，命名函數(shù)，布爾值)　　　//IE8不支持　　　　　　(this代表的是當(dāng)前綁定事件的對(duì)象)


.removeEventListener("事件類型"，函數(shù)名字，false)　　　//移除事件
(注意：addEventListener中的第三個(gè)參數(shù)設(shè)置為true就在捕獲過程中執(zhí)行，反之就在冒泡過程中執(zhí)行處理函數(shù)。)


.attachEvent("on事件類型"，命名函數(shù))　　　 　　　　//谷歌，火狐不支持　　  this代表的是window

.detachEvent("on事件類型"，函數(shù)名字)　　　　　　　//解綁事件　　
對(duì)象.on事件名字 = 事件處理函數(shù)--->綁定事件
對(duì)象.on事件名字 = null



事件冒泡：多個(gè)元素嵌套,有層次關(guān)系,這些元素都注冊(cè)了相同的事件,如果里面的元素的事件觸發(fā)了,外面的元素的該事件自動(dòng)的觸發(fā)了.

如何阻止事件冒泡：
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持。
event.stopPropagation(); 阻止事件冒泡---->谷歌和火狐支持

event對(duì)象的常用屬性：
var e = event || window.event　　// window.event和e都是事件參數(shù)對(duì)象,一個(gè)是IE的標(biāo)準(zhǔn),一個(gè)是火狐的標(biāo)準(zhǔn)
event.type 　　　　　　　　　　  //事件類型
event.target　　　　　　　　　　  //事件觸發(fā)的元素

JS 事件類型

　　在元素的事件處理器中：this指代的就是元素本身


.onclick　　　　　　　　//點(diǎn)擊事件

.onmouseover   (鼠標(biāo)移入事件)　/　.onmouseout(鼠標(biāo)移出事件)


.onfocus　(輸入框獲取焦點(diǎn)) /　.onblur(輸入框失去焦點(diǎn))


.onkeydown　 (按下鍵盤某個(gè)鍵)　/   .onkeyup　(按下某個(gè)鍵彈起)

JS element元素屬性


.innerText  (谷歌，火狐，IE8都支持)  /  .textContent(不支持IE8)

.innerHTML(標(biāo)簽內(nèi)容可以被識(shí)別）

.setAttribute("屬性的名字","屬性的值") 　　//設(shè)置自定義屬性

.getAttribute("屬性的名字")　　　　　　 //獲取自定義屬性的值

.removeAttribute("屬性的名字")　　　　　  //移除自定義屬性

.style.backgroundColor　　　　　　　　　 //style屬性還有很多其他屬性

.getAttributeNode("id")　　　　　　　　　  //獲取的是元素的鍵名為‘id’的屬性節(jié)點(diǎn)

.parentElement　　  　　　　　　　　　//父級(jí)元素

.childNodes　　　　　 　　　　　　　　//子節(jié)點(diǎn)

.children  　　　　　　　　　　　　　　//獲取子元素

.nodeType　　　　　　　　　　　　　　//節(jié)點(diǎn)類型　　1----標(biāo)簽，2---屬性，3---文本

.nodeName　　　
//節(jié)點(diǎn)名字　　標(biāo)簽節(jié)點(diǎn)---大寫的標(biāo)簽名字，屬性節(jié)點(diǎn)---小寫的屬性名字，文本節(jié)點(diǎn)----#text

.nodeValue　　　　　  　　　　　　　　　
//節(jié)點(diǎn)的值　　標(biāo)簽節(jié)點(diǎn)---null，屬性節(jié)點(diǎn)---屬性值，文本節(jié)點(diǎn)---文本內(nèi)容

.parentNode　　　　　　　　　　　　　　//父級(jí)節(jié)點(diǎn)　　

.firstChild　　　　　　　　　　　　　　//第一個(gè)子節(jié)點(diǎn)

.firstElementChild　　　　　　　　　　　 //第一個(gè)子元素

.lastChild　　　　　　　　　　　　　　　 //最后一個(gè)子節(jié)點(diǎn)

.lastElementChild　　　　　　　　　　　  //最后一個(gè)子元素

.previousSibling　　　　　　　　　　　　 //前一個(gè)兄弟節(jié)點(diǎn)　　　

.previousElementSibling　　　　　　　　  //前一個(gè)兄弟元素

.nextSibling　　　　　　　　   　　　　　//后一個(gè)兄弟節(jié)點(diǎn)

.nextElementSibling　　　　　　　　　　  //后一個(gè)兄弟元素

JS element元素方法


.appendChild( obj1)　　　　  //追加元素

.insertBefore( obj1,obj2 )　　//將obj1插入到第二個(gè)參數(shù)元素obj2之前

.replaceChild( obj1,obj2 )　　//替換其中某個(gè)元素

.removeChild( obj1 )　　　　 //刪除其中某個(gè)元素

JS offset、scroll、client系列的值

　　style標(biāo)簽中設(shè)置的樣式屬性是獲取不到的，然而在標(biāo)簽中設(shè)置的style屬性的值時(shí)可以獲取到的。

　　獲取元素的寬高，使用offset系列的值


offsetWidth　　　　 //獲取元素的寬，有邊框

offsetHeight　　　　//獲取元素的高，有邊框

offsetLeft　　　　　//獲取元素距離左邊位置的值

offsetTop　　　　　//獲取元素距離上邊位置的值

scrollLeft　　　　  //向左卷曲出去的距離

scrollTop　　　　   //向上卷曲出去的距離

scrollWidth　　　　//元素中內(nèi)容實(shí)際的寬（如果內(nèi)容較少，沒有內(nèi)容，就是元素自身的寬），沒有邊框

scrollHeight　 　　  //元素中內(nèi)容實(shí)際的高（如果內(nèi)容較少，沒有內(nèi)容，就是元素自身的高），沒有邊框

clientWidth　　　　//可視區(qū)域的寬（沒有邊框），邊框內(nèi)部的寬

clientHeight　　　  //可視區(qū)域的高（沒有邊框），邊框內(nèi)部的高

clientLeft　　　　　//左邊框?qū)挾?/p>

clientTop　　　　　//上邊框?qū)挾?/p>

event.clientX、event.clientY　　 //鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)），可視區(qū)域不包括工具欄和滾動(dòng)條

event.pageX、event.pageY　　  //類似于event.clientX、event.clientY，但它們使用的是文檔坐標(biāo)而非窗口坐標(biāo)（IE8不可用）