javascript事件

fyber 發布于2019-08-23 18:23 / 1362人閱讀

摘要：一添加移除事件級添加和移除事件方法級添加和移除事件方法好處可以添加多個點擊方法按添加順序執行添加和移除事件方法好處也可以添加多個事件但是執行順序和添加順序是相反的二和的區別代碼代碼代碼返回表示該事件產生冒泡返回表示不產生冒泡說明的第三個參

一.添加移除事件

 //Dom0級添加和移除事件方法
var div = document.getElementById("box");
div.onclick = function() {
  console.log("click the div ", event, "this", this);
}
div.onclick = null;
//Dom2級添加和移除事件方法
//好處:可以添加多個點擊方法,按添加順序執行
function clickFun() {
  console.log("click the div", event);
}
div.addEventListener("click", clickFun, false);
div.removeEventListener("click", clickFun);

//ie添加和移除事件方法
//好處:也可以添加多個事件,但是執行順序和添加順序是相反的
div.attachEvent("onclick", clickFun)
div.detachEvent("onclick", clickFun)

二.mouseover 和mouseenter的區別

css代碼:
.box,
.box2 {
  width: 100px;
  height: 200px;
  background: pink;
  border: 1px solid black;
}

.box2 {
  margin-top: 20px;
  background: brown;
  border: 1px solid yellow;
}
html代碼:
mouseover
      box
      box
      box
    
    mouseenter:
      box2
      box2
      box2
 
    
 js代碼:
    var box = document.getElementById("box");
    var box2 =document.getElementById("box2");
    var x = y = 0;
    box.addEventListener("mouseover", function(event) {
      console.log("x:", x += 1,event.bubbles);//event.bubbles返回true表示該事件產生冒泡
    }, false)
    box2.addEventListener("mouseenter", function(event) {
      console.log("y:", y += 1,event.bubbles);//event.bubbles返回false,表示mouseenter不產生冒泡
    }, false)

說明:addEventListener的第三個參數,這個布爾值參數如果是 true，表示在捕獲
階段調用事件處理程序；如果是 false，表示在冒泡階段調用事件處理程序

輸出結果描述:鼠標每次移動到id為box的元素(和子元素)都會觸發mouseover事件,而mouseenter只在移入id=box2的元素才會觸發,移入子元素中不會觸發mouseenter事件,由此得出:mouseover會通過事件冒泡向父元素傳播mouseover事件,而mouseenter不會產生事件冒泡

云服務器 GPU云服務器 javascript事件 javascript鍵盤事件 javascript焦點事件 javascript事件綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105143.html

瀏覽器下的 Event Loop

摘要：前言是以單線程的形式運行在宿主環境下，采用了回調的形式來解決異步任務。線程中步就是在瀏覽器下的。前言 javascript 是以單線程的形式運行在宿主環境下，javascript 采用了回調的形式來解決異步任務。為什么是單線程？ javascript 的最開始的出現是為了給 web 頁面增添一些動態的效果，那么就避免不了獲取頁面上的元素信息，如果 javascript 是以多線程的...

forrest23 2019-08-23 16:50 評論0 收藏0
什么是JavaScript 事件循環 ?

摘要：此事件隊列的美妙之處在于它只是函數等待被調用和移動到調用棧的一個臨時存放區域。在事件循環不斷監視調用棧是否為空現在確實是空的時候調用創建一個新的調用棧來執行代碼。在執行完之后進入了一個新的狀態這個狀態調用棧為空事件記錄表為空事件隊列也為空。這篇文章是對個人認為講解　JavaScript　事件循環比較清楚的一篇英文文章的簡單翻譯,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 評論0 收藏0
JavaScript 瀏覽器事件解析

摘要：原文瀏覽器事件之間的關系程序采用了異步事件驅動編程模型，維基百科對它的解釋是事件驅動程序設計英語是一種電腦程序設計模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、瀏覽器、事件之間的關系 JavaScript 程序采用了異步事件驅動編程（Event-driven program...

spacewander 2019-08-20 11:26 評論0 收藏0
《JavaScript高級程序設計》學習筆記：JavaScript中的事件流和事件處理程序

摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。 1. 事件流事件流：從頁面中接收事件的順序。 ...

Rocko 2019-08-19 17:21 評論0 收藏0
【譯】JavaScript面試問題：事件委托和this

摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 評論0 收藏0
初窺JavaScript事件機制的實現（一）—— Node.js事件驅動實現概覽

摘要：如果當前沒有事件也沒有定時器事件，則返回。相關資料關于的架構及設計思路的事件討論了使用線程池異步運行代碼。下一篇初窺事件機制的實現二中定時器的實現在瀏覽器中，事件作為一個極為重要的機制，給予JavaScript響應用戶操作與DOM變化的能力；在Node.js中，事件驅動模型則是其高并發能力的基礎。學習JavaScript也需要了解它的運行平臺，為了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 評論0 收藏0