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