這次給大家?guī)?lái)怎樣在項(xiàng)目中使用js綁定DOM事件，在項(xiàng)目中使用js綁定DOM事件的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
js事件綁定
JavaScript 有三種事件模型：
內(nèi)聯(lián)模型
腳本模型
DOM2 模型
1、內(nèi)聯(lián)模型
//基本廢除不用 <input type="button" value="按鈕" onclick="alert('Lee');" /> <input type="button" value="按鈕" onclick="box();" />
2、腳本模型
//基本不用
var?input?=?document.getElementsByTagName('input')[0];?//得到?input?對(duì)象
?input.onclick?=?function?()?{?//匿名函數(shù)執(zhí)行
?alert('Lee');
};
事件處理函數(shù)?影響的元素?何時(shí)發(fā)生
onabort?圖像?當(dāng)圖像加載被中斷時(shí)
onblur?窗口、框架、所有表單對(duì)象?當(dāng)焦點(diǎn)從對(duì)象上移開(kāi)時(shí)
onchange?輸入框，選擇框和文本區(qū)域?當(dāng)改變一個(gè)元素的值且失去焦點(diǎn)時(shí)
onclick?鏈接、按鈕、表單對(duì)象、圖像映射區(qū)域?當(dāng)用戶單擊對(duì)象時(shí)
ondblclick?鏈接、按鈕、表單對(duì)象?當(dāng)用戶雙擊對(duì)象時(shí)
ondragdrop?窗口?當(dāng)用戶將一個(gè)對(duì)象拖放到瀏覽器窗口時(shí)
onError?腳本?當(dāng)腳本中發(fā)生語(yǔ)法錯(cuò)誤時(shí)
onfocus?窗口、框架、所有表單對(duì)象?當(dāng)單擊鼠標(biāo)或者將鼠標(biāo)移動(dòng)聚焦到窗口或框架時(shí)
onkeydown?文檔、圖像、鏈接、表單?當(dāng)按鍵被按下時(shí)
onkeypress?文檔、圖像、鏈接、表單?當(dāng)按鍵被按下然后松開(kāi)時(shí)
onkeyup?文檔、圖像、鏈接、表單?當(dāng)按鍵被松開(kāi)時(shí)
onload?主題、框架集、圖像?文檔或圖像加載后
onunload?主體、框架集?文檔或框架集卸載后
onmouseout?鏈接?當(dāng)圖標(biāo)移除鏈接時(shí)
onmouseover?鏈接?當(dāng)鼠標(biāo)移到鏈接時(shí)
onmove?窗口?當(dāng)瀏覽器窗口移動(dòng)時(shí)
onreset?表單復(fù)位按鈕?單擊表單的?reset?按鈕
onresize?窗口?當(dāng)選擇一個(gè)表單對(duì)象時(shí)
onselect?表單元素?當(dāng)選擇一個(gè)表單對(duì)象時(shí)
onsubmit?表單?當(dāng)發(fā)送表格到服務(wù)器時(shí)
3、內(nèi)聯(lián)模型
“DOM2 級(jí)事件”定義了兩個(gè)方法，用于添加事件和刪除事件處理程序的操作：
addEventListener()和 removeEventListener()。所有 DOM 節(jié)點(diǎn)中都包含這兩個(gè)方法，并且它們都接受 3 個(gè)參數(shù)；事件名、函數(shù)、冒泡或捕獲的布爾值(true 表示捕獲，false 表示冒泡)
window.addEventListener('load',?function?()?{
?alert('Lee');
},?false);
window.removeEventListener('load',?function?()?{
?alert('Mr.Lee');
},?false)
PS: IE 實(shí)現(xiàn)了與 DOM 中類似的兩個(gè)方法：attachEvent()和 detachEvent()。這兩個(gè)方法接受
相同的參數(shù)：事件名稱和函數(shù)。
在使用這兩組函數(shù)的時(shí)候，先把區(qū)別說(shuō)一下：
1.?IE?不支持捕獲，只支持冒泡；
2.?IE?添加事件不能屏蔽重復(fù)的函數(shù)；
3.?IE?中的?this?指向的是?window?而不是?DOM?對(duì)象。
4.?在傳統(tǒng)事件上，IE?是無(wú)法接受到?event?對(duì)象的，但使用了?attchEvent()卻可以，但有些區(qū)別。
"javascript
window.attachEvent('load',?function?()?{
?alert('Lee');
},?false);
window.detachEvent('load',?function?()?{
?alert('Mr.Lee');
},?false)
"
PS：IE 中的事件綁定函數(shù) attachEvent()和 detachEvent()可能在實(shí)踐中不去使用，有幾個(gè)原因：
1.IE9 就將全面支持 W3C 中的事件綁定函數(shù)；
2.IE 的事件綁定函數(shù)無(wú)法傳遞 this；
3.IE的事件綁定函數(shù)不支持捕獲；
4.同一個(gè)函數(shù)注冊(cè)綁定后，沒(méi)有屏蔽掉；5.有內(nèi)存泄漏的問(wèn)題
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
推薦閱讀：
以上是怎樣在項(xiàng)目中使用js綁定DOM事件的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
小紅書怎么綁定子賬號(hào)？它怎么檢測(cè)賬號(hào)是否正常？
Mar 21, 2024 pm 10:11 PM
在如今這個(gè)信息爆炸的時(shí)代，個(gè)人品牌和企業(yè)形象的建設(shè)變得越來(lái)越重要。小紅書作為國(guó)內(nèi)領(lǐng)先的時(shí)尚生活分享平臺(tái)，吸引了大量用戶關(guān)注和參與。對(duì)于那些希望擴(kuò)大影響力、提高內(nèi)容傳播效率的用戶來(lái)說(shuō)，綁定子賬號(hào)成為了一種有效的手段。那么，小紅書怎么綁定子賬號(hào)呢？又如何檢測(cè)賬號(hào)是否正常呢？本文將為您詳細(xì)解答這些問(wèn)題。一、小紅書怎么綁定子賬號(hào)？1.登錄主賬號(hào)：首先，您需要登錄您的小紅書主賬號(hào)。2.打開(kāi)設(shè)置菜單：點(diǎn)擊右上角的“我”，然后選擇“設(shè)置”。3.進(jìn)入賬號(hào)管理：在設(shè)置菜單中，找到“賬號(hào)管理”或“賬號(hào)助手”選項(xiàng)，點(diǎn)
BTCC教學(xué)：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐貍錢包）是一款免費(fèi)的、廣受好評(píng)的加密錢包軟件。目前，BTCC已支持綁定MetaMask錢包，綁定后可使用MetaMask錢包進(jìn)行快速登入，儲(chǔ)值、買幣等，且首次綁定還可獲得20USDT體驗(yàn)金。在BTCCMetaMask錢包教學(xué)中，我們將詳細(xì)介紹如何注冊(cè)和使用MetaMask，以及如何在BTCC綁定并使用小狐貍錢包。MetaMask錢包是什么？MetaMask小狐貍錢包擁有超過(guò)3,000萬(wàn)用戶，是當(dāng)今最受歡迎的加密貨幣錢包之一。它可免費(fèi)??使用，可作為擴(kuò)充功能安裝在網(wǎng)絡(luò)
推薦：優(yōu)秀JS開(kāi)源人臉檢測(cè)識(shí)別項(xiàng)目
Apr 03, 2024 am 11:55 AM
人臉檢測(cè)識(shí)別技術(shù)已經(jīng)是一個(gè)比較成熟且應(yīng)用廣泛的技術(shù)。而目前最為廣泛的互聯(lián)網(wǎng)應(yīng)用語(yǔ)言非JS莫屬，在Web前端實(shí)現(xiàn)人臉檢測(cè)識(shí)別相比后端的人臉識(shí)別有優(yōu)勢(shì)也有弱勢(shì)。優(yōu)勢(shì)包括減少網(wǎng)絡(luò)交互、實(shí)時(shí)識(shí)別，大大縮短了用戶等待時(shí)間，提高了用戶體驗(yàn)；弱勢(shì)是：受到模型大小限制，其中準(zhǔn)確率也有限。如何在web端使用js實(shí)現(xiàn)人臉檢測(cè)呢？為了實(shí)現(xiàn)Web端人臉識(shí)別，需要熟悉相關(guān)的編程語(yǔ)言和技術(shù)，如JavaScript、HTML、CSS、WebRTC等。同時(shí)還需要掌握相關(guān)的計(jì)算機(jī)視覺(jué)和人工智能技術(shù)。值得注意的是，由于Web端的計(jì)
如何使用PHP和JS創(chuàng)建股票蠟燭圖
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS創(chuàng)建股票蠟燭圖股票蠟燭圖是股票市場(chǎng)中常見(jiàn)的一種技術(shù)分析圖形，通過(guò)繪制股票的開(kāi)盤價(jià)、收盤價(jià)、最高價(jià)和最低價(jià)等數(shù)據(jù)，幫助投資者更直觀地了解股票的價(jià)格波動(dòng)情況。本文將教你如何使用PHP和JS創(chuàng)建股票蠟燭圖，并附上具體的代碼示例。一、準(zhǔn)備工作在開(kāi)始之前，我們需要準(zhǔn)備以下環(huán)境：1.一臺(tái)運(yùn)行PHP的服務(wù)器2.一個(gè)支持HTML5和Canvas的瀏覽器3
股票分析必備工具：學(xué)習(xí)PHP和JS繪制蠟燭圖的步驟
Dec 17, 2023 pm 06:55 PM
股票分析必備工具：學(xué)習(xí)PHP和JS繪制蠟燭圖的步驟，需要具體代碼示例隨著互聯(lián)網(wǎng)和科技的快速發(fā)展，股票交易已經(jīng)成為許多投資者的重要途徑之一。而股票分析是投資者決策的重要一環(huán)，其中蠟燭圖被廣泛應(yīng)用于技術(shù)分析中。學(xué)習(xí)如何使用PHP和JS繪制蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來(lái)展示股票價(jià)格的技術(shù)圖表。它展示了股票價(jià)格的
菜鳥app怎么綁定拼多多 菜鳥裹裹怎么添加拼多多平臺(tái)
Mar 19, 2024 pm 02:30 PM
菜鳥app就是能夠?yàn)槟銈兲峁┏龈鞣N物流信息狀況的平臺(tái)，這里的功能非常的強(qiáng)大好用，大家有任何與物流相關(guān)的問(wèn)題，都能在這得到解決的，反正都能為你們帶來(lái)一站式的服務(wù)，全都能及時(shí)解決的，查快遞，取快遞，寄快遞等，都是毫無(wú)任何問(wèn)題，與各個(gè)的平臺(tái)都進(jìn)行了合作，全部的信息，都能查詢得到的，但是有些時(shí)候會(huì)出現(xiàn)拼多多當(dāng)中購(gòu)買的商品，都是無(wú)法呈現(xiàn)出物流的信息，其實(shí)是需要大家進(jìn)行手動(dòng)綁定拼多多，才能實(shí)現(xiàn)的，具體的方法已經(jīng)整理出來(lái)了在下方，大家都能來(lái)看看的。菜鳥綁定拼多多賬戶的方法： 1、打開(kāi)菜鳥APP，在主頁(yè)面
今日頭條中綁定抖音的步驟方法
Mar 22, 2024 pm 05:56 PM
1、打開(kāi)今日頭條。2、點(diǎn)擊右下角我的。3、點(diǎn)擊【系統(tǒng)設(shè)置】。4、點(diǎn)擊【賬號(hào)和隱私設(shè)置】。5、點(diǎn)擊【抖音】右邊的按鈕即可綁定抖音。
菜鳥APP怎么綁定拼多多 菜鳥APP綁定拼多多方法
Mar 19, 2024 pm 05:16 PM
你們知道在使用菜鳥裹裹的時(shí)候是怎么來(lái)綁定拼多多的嗎?菜鳥裹裹App官方正版在這款平臺(tái)上面對(duì)于一些拼多多的物流信息是沒(méi)有自動(dòng)同步上去的，我們需要做的就只能復(fù)制單號(hào)過(guò)來(lái)或者是查詢你們的手機(jī)看看有無(wú)快遞的信息。當(dāng)然這些都是需要手動(dòng)來(lái)完成的，如果你們也想了解更多的話，就和小編一起來(lái)看看吧。 菜鳥APP怎么綁定拼多多 1、打開(kāi)菜鳥APP，在主頁(yè)面點(diǎn)擊左上角的“導(dǎo)包裹”?！ ?、在界面中，有很多購(gòu)物網(wǎng)站，賬號(hào)都可以綁定?！ ?、點(diǎn)擊導(dǎo)入其他電商平臺(tái)?！ ?、用戶授權(quán)：點(diǎn)擊拼多多轉(zhuǎn)到界面
