成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

文檔和元素的幾何滾動(dòng)

wanghui / 3110人閱讀

摘要：文檔和元素的幾何滾動(dòng)當(dāng)瀏覽器在窗口中渲染文檔時(shí)，它將會(huì)創(chuàng)建文檔一個(gè)視覺(jué)表現(xiàn)層，在哪里每個(gè)元素都有自己的位置和尺寸。通常應(yīng)用程序?qū)⑽臋n看做元素的樹(shù)。的問(wèn)題是觸發(fā)該事件的文檔元素的一個(gè)引用。

文檔和元素的幾何滾動(dòng)

當(dāng)瀏覽器在窗口中渲染文檔時(shí)，它將會(huì)創(chuàng)建文檔一個(gè)視覺(jué)表現(xiàn)層，在哪里每個(gè)元素都有自己的位置和尺寸。通常web應(yīng)用程序?qū)⑽臋n看做元素的樹(shù)。

文檔坐標(biāo)和窗口坐標(biāo)

元素位置以像素來(lái)進(jìn)行度量，向右為x坐標(biāo)的增加，向下為y坐標(biāo)的增加。有兩個(gè)坐標(biāo)，一個(gè)坐標(biāo)為文檔的原點(diǎn)，一個(gè)為窗口的原點(diǎn)，這兩個(gè)原點(diǎn)相互輔助。
文檔包含滾動(dòng)的內(nèi)容，而窗口僅僅是當(dāng)前用戶所看到的內(nèi)容。
文檔坐標(biāo)在用戶滾動(dòng)的時(shí)候不會(huì)發(fā)生改變。

innerWidth 以及 innerHeight 這兩個(gè)參數(shù)可以判斷當(dāng)前窗口的大小
pageYOffset 將會(huì)判斷垂直滾動(dòng)條所在的位置
pageXOffset 將會(huì)判斷水平滾動(dòng)條所在的位置
查詢?cè)氐膸缀纬叽?/b>

getBoundingClientRect() 將會(huì)返回相對(duì)于左上角的內(nèi)容，注意是左上角的。包括bottom以及l(fā)eft和right都是相對(duì)于左上角和元素的距離，其中width和height都是相對(duì)于自身的。并且返回的不是實(shí)時(shí)的，屬于一個(gè)快照

滾動(dòng)

設(shè)置一個(gè)垂直滾動(dòng)的

// 獲得文檔和窗口的高度
var documentHeight = document.documentElement.offsetHeight;    // 獲取根元素，在獲取根元素的高度，即文檔的大小
var viewportHeight = window.innerHeight;    // 獲取視口的大小

// 進(jìn)行滾動(dòng)
window.scrollTo(0, documentHeight - viewportHeight)    // 做差得到頁(yè)面剩余的高度，然后將其滾動(dòng)的該高度

這樣就完成了一個(gè)垂直滾動(dòng)，讓其滾動(dòng)到底部
以及一個(gè)scrollBy 一個(gè)偏移量進(jìn)行便宜。

HTML表單

下面是腳本化的HTML表單

選取表單和表單元素 
var fields = document.getElementById("address").getElementsByTagName("input");
// id 為 “shipping”的表單中的所有單選按鈕
document.querySelectorAll("#shipping input[type="radio"]");
// id為shipping 的表單中所有名字為method的單選按鈕
document.querySelectorAll("#shipping input[type="radio"][name="method"]");

使用document.forms來(lái)進(jìn)行選擇表單,返回的是一個(gè)類數(shù)組

document.forms

對(duì)于表單使用elements獲取其表單的name的一些屬性值，因?yàn)橛行r(shí)候會(huì)出現(xiàn)重疊的問(wèn)題。

一個(gè)栗子

html如下




    
    form表單


    

        

            Shipping Method

接著下面在控制臺(tái)輸入如下js獲取表單元素的數(shù)組

document.forms.shipping.elements.method

即可

將會(huì)獲取到表單的屬性

表單和元素屬性

js的對(duì)象支持兩個(gè)方法，一個(gè)為submit()一個(gè)為reset()這兩個(gè)方法，將會(huì)和按鈕具有相同的目的。
form具有兩個(gè)方法，該兩個(gè)方法使用如下所示

// 提交表單
document.forms.shipping.shubmit();
// 重置表單
document.forms.shipping.reset();

一些元素如下

type

標(biāo)識(shí)表單元素類型的只讀字符串

form

對(duì)包含元素的form對(duì)象的只讀引用

name

只讀字符串

value

可讀/寫(xiě)字符串，指定表單元素包含或代表的值，它是當(dāng)提交表單時(shí)發(fā)送到web服務(wù)器的字符串

表單和元素的事件處理程序

每個(gè)form元素都有一個(gè)onsubmit事件處理程序用來(lái)檢測(cè)表單提交。還有一個(gè)onreset事件處理程序來(lái)檢測(cè)表單的重置。表單提交前將會(huì)調(diào)用onsubmit程序，如果回調(diào)函數(shù)的返回值為false則會(huì)取消表單的提交動(dòng)作。這是js程序一個(gè)用來(lái)檢查用戶的輸入錯(cuò)誤。目的是避免不完整或者無(wú)效的數(shù)據(jù)通過(guò)網(wǎng)絡(luò)提交到服務(wù)端程序。onsubmit事件只能通過(guò)單擊提交按鈕觸發(fā)。（通過(guò)回車也能觸發(fā)該事件）如果直接調(diào)用表單的submit()方法將不會(huì)觸發(fā)onsubmit事件處理程序。onreset事件處理程序和onsubmit是類似的。也是會(huì)在表單重置之前觸發(fā)該事件。同樣onreset也是只能通過(guò)單擊重置按鈕來(lái)觸發(fā)，直接調(diào)用表單的reset()方法不會(huì)觸發(fā)onreset事件處理程序
用戶與表單元素交互時(shí)它們往往會(huì)觸發(fā)click或change事件，通過(guò)定義onclick或者onchange事件處理程序可以處理這些事件（h5中，可以直接在表單中添加type類型達(dá)到表單過(guò)濾的效果）
用戶與表單元素交互時(shí)它們往往會(huì)觸發(fā)click或change事件，通過(guò)定義onclick或onchange事件處理程序可以處理這些事件。表單每發(fā)生一個(gè)改變的時(shí)候，都會(huì)觸發(fā)一個(gè)事件，從而可以通過(guò)事件調(diào)用回調(diào)函數(shù)。
一般來(lái)說(shuō)，當(dāng)按鈕表單元素激活（甚至當(dāng)通過(guò)鍵盤(pán)而不是鼠標(biāo)）都會(huì)觸發(fā)click事件。當(dāng)用戶改變其他表單元素所代表的值時(shí)會(huì)觸發(fā)change事件。當(dāng)用戶在一個(gè)文本域輸入文本或從下拉列表中選擇一個(gè)選項(xiàng)后就觸發(fā)change事件，當(dāng)用戶在一個(gè)文本域中該數(shù)據(jù)不是每次用戶輸入一個(gè)鍵值時(shí)都會(huì)觸發(fā)該事件。它僅僅當(dāng)用戶改變了值才會(huì)觸發(fā)該事件。單選框和復(fù)選框共用一個(gè)狀態(tài)標(biāo)識(shí)，它們的click和change事件都會(huì)被觸發(fā)，相比一下change事件更加有用。
表單元素在收到鍵盤(pán)的焦點(diǎn)時(shí)也會(huì)觸發(fā)focus事件。失去焦點(diǎn)觸發(fā)blur事件
在事件處理程序代碼中關(guān)鍵字this將會(huì)觸發(fā)該事件的文檔元素的一個(gè)引用，或者通過(guò)this.form.x得到該表單中以x命名的元素

事件總結(jié) 提交觸發(fā)的事件

當(dāng)用戶單擊按鈕（或者回車的時(shí)候）進(jìn)行提交，將會(huì)在提交前觸發(fā)onsubmit事件。如果返回false將會(huì)取消提交。直接調(diào)用submit()方法的時(shí)候，不會(huì)驗(yàn)證該過(guò)程，將會(huì)直接提交給服務(wù)器，所以服務(wù)器端也要做一遍驗(yàn)證。
正話：window對(duì)象的submit事件的一個(gè)句柄。

使用場(chǎng)景：對(duì)用戶表單進(jìn)行輸入的驗(yàn)證

具體的后面有事件，繼續(xù)寫(xiě)。

其過(guò)程如下 先觸發(fā)onsubmit事件 → 接著調(diào)用submit()方法完成提交。

重置觸發(fā)的事件

當(dāng)用戶單擊重置按鈕，將會(huì)觸發(fā)onreset事件。
https://developer.mozilla.org...
同樣也是在表單重置之前觸發(fā)該事件，如果該事件返回的是false，則不會(huì)重置
同樣，如果使用表單的onreset()方法也不會(huì)觸發(fā)該事件，將會(huì)直接進(jìn)行重置。

click事件

當(dāng)按鈕表單元素激活的時(shí)候，將會(huì)觸發(fā)click事件。（即使是通過(guò)鍵盤(pán)而不是通過(guò)鼠標(biāo)，該事件都會(huì)觸發(fā)）。單選框和復(fù)選框也具有click事件。

通過(guò)定義onclick事件處理程序能達(dá)到處理click事件。
過(guò)程： 先觸發(fā)事件onclick → 調(diào)用對(duì)象的方法click

區(qū)別 方法能夠直接調(diào)用，事件只能等待被觸發(fā)
change事件

當(dāng)用戶該表表單元素的值，然后觸發(fā)一個(gè)click事件的時(shí)候，將會(huì)觸發(fā)上一個(gè)表單的change事件。即要發(fā)生一次完整的改變才會(huì)觸發(fā)一次change事件。

focus事件

收到鍵盤(pán)的焦點(diǎn)將會(huì)觸發(fā)focus事件，即每次輸出一次都會(huì)觸發(fā)一次focus事件。

this的問(wèn)題

this是觸發(fā)該事件的文檔元素的一個(gè)引用。即觸發(fā)該事件的對(duì)象
在form元素中的元素?fù)碛幸粋€(gè)form引用了其父級(jí)的form。通過(guò)this.form會(huì)得到form對(duì)象的引用。即使用this.form.x

按鈕

擁有兩種方式，該兩種方式都會(huì)生成按鈕。
超鏈接與按鈕一樣提供了onclick事件處理程序。當(dāng)onclick事件處理程序能概念化為跟隨此鏈接時(shí)用一個(gè)鏈接，否則用按鈕。

提交和重置元素本就是按鈕，不同的是它們有與之相關(guān)聯(lián)的默認(rèn)動(dòng)作。

即，按鈕和超鏈接類似，都具有共同的作用。
開(kāi)關(guān)按鈕

復(fù)選框和單選元素為開(kāi)關(guān)按鈕，或稱之為有兩種視覺(jué)狀態(tài)的按鈕。即選中或未選中。通過(guò)對(duì)其單擊，用戶可以改變其開(kāi)關(guān)狀態(tài)。單選元素為整組有相關(guān)性的元素而設(shè)計(jì)的，組內(nèi)所有按鈕的HTML屬性name值都相同。按照這種方式創(chuàng)建的按鈕為互斥的。利用表單屬性的名字選中元素時(shí)，它返回的一個(gè)類數(shù)組對(duì)象而不是單個(gè)元素。
單選和復(fù)選框都定義了checked屬性，指定了元素當(dāng)前是否選中。defaultChecked屬性也為布爾值，為html的checked值，指定了元素在第一次加載頁(yè)面時(shí)是否選中。
單選和復(fù)選框本身不顯示任何的文本，它們通常和相鄰的html文本一起顯示（于label元素相關(guān)聯(lián)）。
當(dāng)用戶單擊按鈕，會(huì)觸發(fā)onclick事件，由于改變狀態(tài)會(huì)觸發(fā)onchange事件，但是，當(dāng)用戶單擊其他單選按鈕而導(dǎo)致這個(gè)單選按鈕狀態(tài)的改變，后者不觸發(fā)onchange事件。

文本域

placeholder能顯示用戶輸入前在輸入域中顯示的提示信息。

文本輸入域的onchange事件處理程序是在用戶輸入新的文本或編輯已存在的文本時(shí)觸發(fā)。