web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api:
API（Application Programming Interface，應(yīng)用程序編程接口）是一些預(yù)先定義的函數(shù)，目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問一組例程的能力，而又無(wú)需訪問源碼，無(wú)需理解其內(nèi)部工作機(jī)制細(xì)節(jié)，只需直接調(diào)用使用即可。Web API 是瀏覽器提供的一套操作瀏覽器功能和頁(yè)面元素的 API ( BOM 和 DOM )。
前面對(duì)ECMAscript語(yǔ)法進(jìn)行了學(xué)習(xí)，接下來(lái)將學(xué)習(xí)DOMScript文檔對(duì)象模型（處理HTML和XML及CSS的接口）和BOMScript瀏覽器對(duì)象模型：
文檔：一個(gè)頁(yè)面就是一個(gè)文檔，DOM中使用document表示文檔。
元素：頁(yè)面中所有的標(biāo)簽都是元素，DOM中使用element表示元素。
節(jié)點(diǎn)：頁(yè)面中的所有內(nèi)容都是節(jié)點(diǎn)：標(biāo)簽、屬性、文本、注釋等，DOM中使用node表示。
獲取元素的方式：
根據(jù)id獲取、根據(jù)標(biāo)簽名獲取、通過(guò)HTML5新增的方法獲取、特殊元素獲取等，返回的是一個(gè)對(duì)象，console.dir()可以打印出對(duì)象的屬性和方法，便于觀察對(duì)象。
<script>// 1、通過(guò)id名獲取元素：聲明變量關(guān)鍵字 變量名 = document.getElementById(標(biāo)簽id名字符串); id名區(qū)分大小寫,返回一個(gè)對(duì)象var box = document.getElementById('box');console.dir(box);//2、通過(guò)標(biāo)簽名獲取元素：聲明變量關(guān)鍵字 變量名 = document.getElementsByTagName(標(biāo)簽名字符串);返回一個(gè)以偽數(shù)組為形式的對(duì)象集合,如需要拿到所有的元素，通過(guò)遍歷可以實(shí)現(xiàn)。const liList = document.getElementsByTagName('li');console.log(liList);//3、通過(guò)類名獲取元素：聲明變量關(guān)鍵字 變量名 = document.getElementsByClassName(類名字符串);返回一個(gè)以偽數(shù)組為形式的對(duì)象var classBox = document.getElementsByClassName('box');console.log(classBox);//4、通過(guò)name屬性值獲取元素：聲明變量關(guān)鍵字 變量名 = document.getElementsByName(name屬性值字符串);返回一個(gè)以偽數(shù)組為形式的對(duì)象var classBox = document.getElementsByName('box');console.log(classBox);//5、通過(guò)querySelector獲取元素：聲明變量關(guān)鍵字 變量名 = document.querySelector('任何選擇器名字符串');選擇相同選擇器的第一個(gè)元素，括號(hào)中可以傳入任何類型的選擇器名字符串，如：.box、#box、divvar querySelectorLi = document.querySelector('li');console.log(querySelectorLi);// 6、通過(guò)querySelectorAll獲取元素：聲明變量關(guān)鍵字 變量名 = document.querySelectorAll('任何選擇器名字符串');選擇相容選擇器的所有元素，返回一個(gè)以偽數(shù)組為形式的對(duì)象var querySelectorAllLi = document.querySelectorAll('li');console.log(querySelectorAllLi);//7、獲取特殊元素body、html等：聲明變量關(guān)鍵字 變量名 = document.documentElement或document.body;var htmlElement = document.documentElement;var bodyElement = document.body;bodyElement.style.backgroundColor = 'yellow';bodyElement.style.color = 'blue';// 總結(jié)：因?yàn)槟承┇@取元素的方式獲取的是偽數(shù)組形式的對(duì)象集合，因此在變量名后面加[index]可以獲取到具體的某個(gè)元素；因?yàn)樽罱K獲取的是對(duì)象，因此可以通過(guò)console.dir()查看對(duì)象的屬性來(lái)設(shè)置對(duì)象的屬性值；document可以替換為具體的某個(gè)元素，如：div.getElementsByTagName('li');</script>事件：
JS使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面，而事件是可以被JS偵測(cè)到的行為，可理解為觸發(fā)響應(yīng)機(jī)制。事件組成部分（事件三要素）:事件源（事件被觸發(fā)的對(duì)象）、事件類型（如何觸發(fā)，什么事件，例如：onclick點(diǎn)擊事件）、事件處理程序(函數(shù)),執(zhí)行事件的步驟如下：
<body><button class="button">彈出警示框</button><script>var btn = document.getElementsByClassName('button');//1、獲取事件源btn[0].onclick = function() {//2、事件源.事件類型：注冊(cè)事件（綁定事件） 3、賦值后面的函數(shù)：添加事件處理程序alert('通過(guò)onclick事件觸發(fā)的彈框');this.disable = false;//事件處理函數(shù)中的this指向當(dāng)前的事件源};</script></body>fastclick.js插件：
由于click事件在移動(dòng)端會(huì)有300ms的延遲，fastclick.js插件可以很好的解決這兩個(gè)問題，詳情可以查閱官方文檔，這里以封裝函數(shù)的方式來(lái)解決這個(gè)問題，但是每次只能控制一個(gè)元素，實(shí)際開發(fā)中推薦插件：
<script>//封裝函數(shù)解決移動(dòng)端click事件300ms延時(shí)問題function clicks(elements, callback) {var flag = false; //定義一個(gè)變量判斷手指是否在屏幕滑動(dòng)var start; //定義一個(gè)時(shí)間變量，用于記錄手指剛觸摸到屏幕時(shí)的時(shí)間點(diǎn)elements.addEventListener('touchstart', function(e) {start = Date.now(); //觸摸時(shí)間點(diǎn)賦值給變量start});elements.addEventListener('touchmove', function(e) {flag = true; //當(dāng)手指在屏幕上滑動(dòng)時(shí)，改變flag值為true，下面if語(yǔ)句中取反，callback函數(shù)不執(zhí)行});elements.addEventListener('touchend', function(e) {if (!flag && (Date.now() - start) < 100) { //當(dāng)手指在屏幕上沒有滑動(dòng)時(shí)，flag值依然是false，取反后進(jìn)入邏輯與語(yǔ)句，當(dāng)后面時(shí)間差小于100ms時(shí)，執(zhí)行callbackcallback && callback();};// 當(dāng)執(zhí)行一次callback時(shí)，初始化flag和start：flag = false;start = 0;});};clicks(document.querySelector('input'), function() {console.log('input被點(diǎn)擊了')});</script>iscroll.js插件：
iscroll.js是一款常用的js插件，里面包含很多功能，這里主要是介紹用來(lái)做區(qū)域滾動(dòng)的，詳細(xì)教程請(qǐng)查閱官方文檔。
zepto.js庫(kù)：
zepto.js是一款輕量級(jí)針對(duì)高版本瀏覽器的javascript庫(kù)，與jQuery有這個(gè)類似的API，多用于移動(dòng)端開發(fā)，相關(guān)教程查閱官方網(wǎng)站：https://www.zeptojs.com.cn/
swiper.js:
swiper.js是一款簡(jiǎn)單輕量，強(qiáng)大，免費(fèi)開源，穩(wěn)定的觸摸滑動(dòng)插件，相關(guān)教程查閱官方文檔：https://www.swiper.com.cn/
事件對(duì)象：
事件對(duì)象指的是事件處理函數(shù)中傳入的參數(shù)，需要注意的是處理函數(shù)中的參數(shù)在IE低版本瀏覽器是不支持的，為此有代碼：window.event可以代替，常見寫法是將此代碼 e = e ||window.event 放入處理函數(shù)中，若支持參數(shù)e則使用e,若不支持參數(shù)e則給e賦值window.event；這個(gè)參數(shù)的this屬性和這個(gè)參數(shù)的currentTarget屬性效果一樣，但是有兼容性問題，通常使用this，其它相關(guān)屬性和方法如下：
事件委托(代理)：
事件委托是指：將事件監(jiān)聽設(shè)置給父級(jí)節(jié)點(diǎn)，來(lái)解決多個(gè)子節(jié)點(diǎn)需要設(shè)置事件監(jiān)聽器而多次訪問DOM的問題，其原理是利用冒泡影響設(shè)置每個(gè)子節(jié)點(diǎn)；如給ul注冊(cè)點(diǎn)擊事件，但是是通過(guò)點(diǎn)擊li冒泡到ul,也可通過(guò)e.target屬性可以設(shè)置其被點(diǎn)擊的元素：
<script>var ulList = document.querySelector('ul');ulList.onclick = function(e) {alert('點(diǎn)擊li冒泡到ul觸發(fā)事件');e.target.style.backgroundColor = 'pink'; };</script>常見事件類型：
鼠標(biāo)事件：
通過(guò)鼠標(biāo)控制事件的觸發(fā)，總結(jié)如下表：
鍵盤事件：
通過(guò)鍵盤上面的按鍵控制事件的觸發(fā)
觸屏事件：
移動(dòng)端中沒有鼠標(biāo)，常常是用手指觸摸，因此產(chǎn)生了觸屏事件touch，touch代表一個(gè)觸摸點(diǎn)，響應(yīng)手指或觸控筆觸碰屏幕或觸控板的處理函數(shù)；其相關(guān)事件如下：
觸摸事件對(duì)象：
同樣在觸摸事件中也有觸摸事件對(duì)象，通過(guò)在觸摸事件處理函數(shù)中傳入一個(gè)參數(shù)拿到，其相關(guān)屬性和方法如下：
注意：上述只是常用事件，如果想要了更多，請(qǐng)閱讀官方文檔。
提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux中有fd set函数吗,LIN
- 下一篇： 计算机应用基础知道,谁知道计算机应用基础