如何使用JS事件綁定、事件流模型
這次帶給大家如何使用JS事件綁定、事件流模型，使用JS事件綁定、事件流模型的注意事項有哪些，以下就是實戰案例，一起來看一下。
一、JS事件
#（一）JS事件分類
1.滑鼠事件：
click/dbclick/mouseover/mouseout
2.HTML事件：
onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll
# 3.鍵盤事件：
keydown：鍵盤按下時觸發
keypress：鍵盤按下並抬起的瞬間觸發。
keyup：鍵盤抬起觸發
[注意事項]
①執行順序：keydown keypress keyup
②keypress只能捕獲數字，字母，符號鍵，而不能捕獲功能鍵。
③長按時循環執行keydown--keypress
④有keydown，並不一定有keyup，當長按時焦點失去，將不再觸發keyup
⑤keypress區分大小寫，keydown，kewup不區分。
4.事件因子：
當觸發事件時，事件將會在事件所呼叫的函數中，預設傳入一個參數，
這個參數就是一個事件因子，包含了該事件的各種詳細資訊。
document.onkeydown=function(e){
console.log(e);
}
document.onkeydown=function(){
console.log(window.event);
}//兼容浏览器的写法：
document.onkeydown=function(e){
e==e||Window.event;
var Code=e.keyCode||e.which||e.charCode;
if(code==13){
//回车
}
}5.如何確定鍵盤按鍵？
①再出發的函數中，接收事件因子e。
②可以使用e.key直接去到按下的按鍵字元（不建議使用）。
③一次可以使用keyCode/which/charCode取到按鍵的ASCII碼值。
(相容各種瀏覽器的寫法)
var Code=e.keyCode||e.which||e.charCode;
//判断组合键
var isAlt=0,isEnt=0;
document.onkeyup=function(e){
if(e.keyCode==18){
isAlt=1;
}
if(e.keyCode==13){
isEnt=1;
}
if(isAlt==1&&isEnt==1){
alert("同时按下Alt和Enter键");
}
}
document.onkeyup=function(){
console.log("keyup");
}
document.onkeypress=function(){
console.log("keypress");
}
document.onkeydown=function(){
console.log("keydown");
}
document.onkeypress=function(){
console.log(window.event);
}
//判断是否按下了回车键
document.onkeydown=function(e){
var code=e.keyCode;
if(code==13){
alert("你输入的是回车键");
}
}二、事件綁定模型
（一）DOM0事件模型
綁定注意事項：
①使用window.onload載入完成後進行綁定。
window.onload =function(){//事件}
#②放在body後面綁定。
//body内容 <body> <button onclick="func()">内联模型绑定</button> <button id="btn1">哈哈哈哈</button> <button id="btn2">DOM2模型绑定</button> <button id="btn3">取消DOM2</button> </body>
1.內聯模型（行內綁定）：將函數名稱直接作為html標籤中屬性的屬性值。
<button onclick="func()">内联模型绑定</button>
缺點：不符合w3c中關於內容與 行為分離的基本規範。
2.腳本模型（動態綁定）：透過在JS中選取某個節點，然後為節點新增onclick屬性。
document.getElementById("btn1")=function(){} 優點：符合w3c中關於內容與行為分離的基本規範，實現html與js的分離。
缺點：同一個節點只能新增一次同類型事件，如果新增多次，最後一個生效。
document.getElementById("btn1").onclick=function(){
alert(1234);
}
document.getElementById("btn1").onclick=function(){
alert(234);
}//重复的只能出现最近的一次3.DOM0共有缺點：透過DOM0綁定的事件，一旦綁定將無法取消。
document.getElementById("btn3").onclick=function(){//不能取消匿名函数
if(btn.detachEvent){
btn.detachEvent("onclick",func1);
}else{
btn.removeEventListener("click",func1);
}
alert("取消DOM2");
}（二）DOM2事件模型
1.新增DOM2事件綁定：
①IE8之前，使用.attachEvent("onclick",函數);
②IE8之後，使用.addEventListener("click",函數，true/false);
參數三：false（預設）表示事件冒泡，傳入true表示事件擷取。
③相容所有瀏覽器的處理方式：
var btn=document.getElementById("btn1");
if(btn.attachEvent){
btn.attachEvent("onclick",func1);//事件，事件需要执行的函数IE8可以
}else{
btn.attachEventListener("click",func1);
}2.DOM2綁定的優點：
①同一個節點，可以使用DOM2綁定多個同類型事件。
②使用DOM2綁定的事件，可以有專門的函數來取消。
3.取消事件綁定：
①使用attachEvent綁定，要用detachevent取消。
②使用attachEventListener綁定，要用removeEventListenter取消。
注意：如果DOM2綁定的事件，需要取消，則綁定事件時，回呼函數必須是函數名，
而不能是匿名函數，因為取消事件時，取消傳入函數名進行取消。
三、JS事件流模型
（一）JS中的事件流模型
1. 事件冒泡(fasle/不写)：当触发一个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。
2. 事件捕获(true)：当初发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。
3. 什么时候事件冒泡？什么时候事件捕获？
① 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
② 除此之外的所有事件绑定均为事件冒泡。
4. 阻止事件冒泡：
① IE10之前，e.cancelBubble = true;
② IE10之后，e.stopPropagation();
5. 阻止默认事件：
① IE10之前：e.returnValue = false;
② IE10之后：e.preventDefault();
//css
#p1{
width: 300px;;
height: 300px;
background-color: powderblue;
}
#p2{
width: 200px;
height: 200px;
background-color: deeppink;
}
#p3{
width: 100px;
height: 100px;
background-color:#A9A9A9;
}
//html
<p id="p1">
<p id="p2">
<p id="p3"></p>
</p>
</p>
<a href="01-事件笔记.html" rel="external nofollow" onclick="func()">超链接</a>
p1.addEventListener("click",function(){
console.log("p1 click");
},false);
p2.addEventListener("click",function(){
console.log("p2 click");
},false);
p3.addEventListener("click",function(){ //原来的顺序是：3-->2-->1。
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("p3 click");
},false);结果（事件冒泡）（由小到大p3-》p2-》p1）：
p1.addEventListener("click",function(){
console.log("p1 click");
},true);
p2.addEventListener("click",function(){
console.log("p2 click");
},true);
p3.addEventListener("click",function(){
// myParagraphEventHandler(); //截获事件流后，只触发3.但是从2开始依然会冒泡；
console.log("p3 click");
},true);结果(事件捕获)（由小到大p3-》p2-》p1）：
//依然遵循事件冒泡
document.onclick=function(){
console.log("document click")
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE10以后
} else {
e.cancelBubble = true; //IE10之前
}
}
//截获事件流阻止事件冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE10以后
} else {
e.cancelBubble = true; //IE10之前
}
}
//阻止默认事件
function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE10之后
} else {
e.returnValue = false; //IE10之前
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是如何使用JS事件綁定、事件流模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
BTCC教學：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸錢包）是一款免費的、廣受好評的加密錢包軟體。目前，BTCC已支援綁定MetaMask錢包，綁定後可使用MetaMask錢包進行快速登錄，儲值、買幣等，且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中，我們將詳細介紹如何註冊和使用MetaMask，以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼？ MetaMask小狐狸錢包擁有超過3,000萬用戶，是當今最受歡迎的加密貨幣錢包之一。它可免費使用，可作為擴充功能安裝在網絡
小紅書怎麼綁定子帳號？它怎麼檢測帳號是否正常？
Mar 21, 2024 pm 10:11 PM
在現今這個資訊爆炸的時代，個人品牌和企業形象的建立變得越來越重要。小紅書作為國內領先的時尚生活分享平台，吸引了大量用戶關注和參與。對於那些希望擴大影響力、提高內容傳播效率的使用者來說，綁定子帳號成為了一種有效的手段。那麼，小紅書怎麼綁定子帳號呢？又如何檢測帳號是否正常呢？本文將為您詳細解答這些問題。一、小紅書怎麼綁定子帳號？ 1.登入主帳號：首先，您需要登入您的小紅書主帳號。 2.開啟設定選單：點選右上角的“我”，然後選擇“設定”。 3.進入帳號管理：在設定選單中，找到「帳號管理」或「帳號助理」選項，點
今日頭條綁定抖音的步驟方法
Mar 22, 2024 pm 05:56 PM
1、打開今日頭條。 2、點選右下角我的。 3.點選【系統設定】。 4.點選【帳號和隱私設定】。 5.點選【抖音】右邊的按鈕即可綁定抖音。
菜鳥app怎麼綁定拼多多 菜鳥裹裹怎麼添加拼多多平台
Mar 19, 2024 pm 02:30 PM
菜鳥app就是能夠提供你們各種物流資訊狀況的平台，這裡的功能非常的強大好用，大家有任何與物流相關的問題，都能在這得到解決的，反正都能為你們帶來一站式的服務，全都能及時解決的，查快遞，取快遞，寄快遞等，都是毫無任何問題，與各個的平台都進行了合作，全部的信息，都能查詢得到的，但是有些時候會出現拼多多當中購買的商品，都是無法呈現出物流的信息，其實是需要大家進行手動綁定拼多多，才能實現的，具體的方法已經整理出來了在下方，大家都能來看看的。菜鳥綁定拼多多帳戶的方法： 1、打開菜鳥APP，在主頁面
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
菜鳥APP怎麼綁定拼多多 菜鳥APP綁定拼多多方法
Mar 19, 2024 pm 05:16 PM
你們知道在使用菜鳥裹裹的時候是怎麼來綁定拼多多的嗎?菜鳥裹裹App官方正版在這款平台上面對於一些拼多多的物流信息是沒有自動同步上去的，我們需要做的就只能複製單號過來或是查詢你們的手機看看有無快遞的資訊。當然這些都是需要手動完成的，如果你們也想了解更多的話，就和小編一起來看看吧。 菜鳥APP怎麼綁定拼多多 1、打開菜鳥APP，在主頁點選左上角的「導包裹」。 2、在介面中，有許多購物網站，帳號都可以綁定。 3、點選導入其他電商平台。 4、使用者授權：點選拼多多到介面
小米汽車app怎麼綁定充電樁設備
Apr 01, 2024 pm 06:52 PM
最新小米最新推出的小米su7型號汽車霸佔了各種熱搜榜，許多正好有購車需求的用戶們都紛紛選擇了小米su7型號的汽車進行購買，那麼在提車以後如何利用自己的小米汽車app綁定家用充電樁充電呢，那麼這篇教學攻略就會為大家帶來詳細的內容介紹，希望能幫助大家。首先我們先打開小米手機app，點擊右下角我的按鈕然後在我的介面，可以看到家充樁的選項進入到綁定充電樁的頁面以後，點擊下方的去掃碼按鈕，掃描充電樁上的二維碼即可完成充電樁與app的綁定
小黑盒無法綁定Steam怎麼辦
Mar 12, 2024 pm 03:10 PM
小黑盒綁定不上Steam可能是網路或軟體版本問題所致。小黑盒提供包括已發售和即將發售遊戲價格、電腦配置需求與評價、深度玩法解析等資訊。此外，它還支援用戶隨時隨地透過行動端尋找所需資訊。小黑盒無法綁定Steam怎麼辦1、確認網路狀況請確保設備已連接至網際網路。 2.檢查小黑盒版本請確保您使用的是最新版小黑盒軟體，並嘗試綁定Steam帳戶。 3.查看Steam帳戶設定請登入Steam帳戶，查看隱私設定中是否已開啟允許第三方軟體綁定功能。 4.聯絡官方客服如上述步驟仍無法解決問題，建議您聯絡官方客服尋求協助。
