JS事件綁定、事件流模型案例分析-js教程-PHP中文網

二、事件綁定模型" >二、事件綁定模型

首頁

web前端

js教程

JS事件綁定、事件流模型案例分析

php中世界最好的语言

May 22, 2018 am 09:52 AM

javascript 案例分析模型

這次帶給大家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中文网其它相关文章！

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7559

CakePHP 教程

1384

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

全球最強開源 MoE 模型來了，中文能力比肩 GPT-4，價格僅 GPT-4-Turbo 的近百分之一 May 07, 2024 pm 04:13 PM

想像一下，一個人工智慧模型，不僅擁有超越傳統運算的能力，還能以更低的成本實現更有效率的效能。這不是科幻，DeepSeek-V2[1]，全球最強開源MoE模型來了。 DeepSeek-V2是一個強大的專家混合（MoE）語言模型，具有訓練經濟、推理高效的特點。它由236B個參數組成，其中21B個參數用於啟動每個標記。與DeepSeek67B相比，DeepSeek-V2效能更強，同時節省了42.5%的訓練成本，減少了93.3%的KV緩存，最大生成吞吐量提高到5.76倍。 DeepSeek是一家探索通用人工智

AI顛覆數學研究！菲爾茲獎得主、華裔數學家領銜11篇頂刊論文｜陶哲軒轉贊 Apr 09, 2024 am 11:52 AM

AI，的確正在改變數學。最近，一直十分關注這個議題的陶哲軒，轉發了最近一期的《美國數學學會通報》（BulletinoftheAmericanMathematicalSociety）。圍繞著「機器會改變數學嗎？」這個話題，許多數學家發表了自己的觀點，全程火花四射，內容硬核，精彩紛呈。作者陣容強大，包括菲爾茲獎得主AkshayVenkatesh、華裔數學家鄭樂雋、紐大電腦科學家ErnestDavis等多位業界知名學者。 AI的世界已經發生了天翻地覆的變化，要知道，其中許多文章是在一年前提交的，而在這一

Google狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇 Apr 01, 2024 pm 07:46 PM

谷歌力推的JAX在最近的基準測試中表現已經超過Pytorch和TensorFlow，7項指標排名第一。而且測試並不是JAX性能表現最好的TPU上完成的。雖然現在在開發者中，Pytorch依然比Tensorflow更受歡迎。但未來，也許有更多的大型模型會基於JAX平台進行訓練和運行。模型最近，Keras團隊為三個後端（TensorFlow、JAX、PyTorch）與原生PyTorch實作以及搭配TensorFlow的Keras2進行了基準測試。首先，他們為生成式和非生成式人工智慧任務選擇了一組主流

你好，電動Atlas！波士頓動力機器人復活，180度詭異動作嚇到馬斯克 Apr 18, 2024 pm 07:58 PM

波士頓動力Atlas，正式進入電動機器人時代！昨天，液壓Atlas剛「含淚」退出歷史舞台，今天波士頓動力就宣布：電動Atlas上崗。看來，在商用人形機器人領域，波士頓動力是下定決心要跟特斯拉硬剛一把了。新影片放出後，短短十幾小時內，就已經有一百多萬觀看。舊人離去，新角色登場，這是歷史的必然。毫無疑問，今年是人形機器人的爆發年。網友銳評：機器人的進步，讓今年看起來像人類的開幕式動作、自由度遠超人類，但這真不是恐怖片？影片一開始，Atlas平靜地躺在地上，看起來應該是仰面朝天。接下來，讓人驚掉下巴

替代MLP的KAN，被開源專案擴展到卷積了 Jun 01, 2024 pm 10:03 PM

本月初，來自MIT等機構的研究者提出了一種非常有潛力的MLP替代方法—KAN。 KAN在準確性和可解釋性方面表現優於MLP。而且它能以非常少的參數量勝過以更大參數量運行的MLP。例如，作者表示，他們用KAN以更小的網路和更高的自動化程度重現了DeepMind的結果。具體來說，DeepMind的MLP有大約300,000個參數，而KAN只有約200個參數。 KAN與MLP一樣具有強大的數學基礎，MLP基於通用逼近定理，而KAN基於Kolmogorov-Arnold表示定理。如下圖所示，KAN在邊上具

特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！ May 06, 2024 pm 04:13 PM

特斯拉機器人Optimus最新影片出爐，已經可以在工廠裡打工了。正常速度下，它分揀電池（特斯拉的4680電池）是這樣的：官方還放出了20倍速下的樣子——在小小的「工位」上，揀啊揀啊揀：這次放出的影片亮點之一在於Optimus在廠子裡完成這項工作，是完全自主的，全程沒有人為的干預。而且在Optimus的視角之下，它還可以把放歪了的電池重新撿起來放置，主打一個自動糾錯：對於Optimus的手，英偉達科學家JimFan給出了高度的評價：Optimus的手是全球五指機器人裡最靈巧的之一。它的手不僅有觸覺

FisheyeDetNet：首個以魚眼相機為基礎的目標偵測演算法 Apr 26, 2024 am 11:37 AM

目標偵測在自動駕駛系統當中是一個比較成熟的問題，其中行人偵測是最早得以部署演算法之一。在多數論文當中已經進行了非常全面的研究。然而，利用魚眼相機進行環視的距離感知相對來說研究較少。由於徑向畸變大，標準的邊界框表示在魚眼相機當中很難實施。為了緩解上述描述，我們探索了擴展邊界框、橢圓、通用多邊形設計為極座標/角度表示，並定義一個實例分割mIOU度量來分析這些表示。所提出的具有多邊形形狀的模型fisheyeDetNet優於其他模型，並同時在用於自動駕駛的Valeo魚眼相機資料集上實現了49.5%的mAP

$牛津大學最新！ Mickey：3D中的2D影像匹配SOTA！ (CVPR\'24)$ 牛津大學最新！ Mickey：3D中的2D影像匹配SOTA！ (CVPR\'24) Apr 23, 2024 pm 01:20 PM

寫在前面項目連結：https://nianticlabs.github.io/mickey/給定兩張圖片，可以透過建立圖片之間的對應關係來估計它們之間的相機姿態。通常，這些對應關係是二維到二維的，而我們估計的姿態在尺度上是不確定的。一些應用，例如隨時隨地實現即時增強現實，需要尺度度量的姿態估計，因此它們依賴外部的深度估計器來恢復尺度。本文提出了MicKey，這是一個關鍵點匹配流程，能夠夠預測三維相機空間中的度量對應關係。透過學習跨影像的三維座標匹配，我們能夠在沒有深度測試的情況下推斷度量相對

See all articles

JS事件綁定、事件流模型案例分析

二、事件綁定模型

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題