當前位置：
首頁 >
jq 给节点node加事件_JavaScript 原生对象、属性、方法、事件、事件参数
發(fā)布時間：2025/4/5
59
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jq 给节点node加事件_JavaScript 原生对象、属性、方法、事件、事件参数
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
/*** 事件參考 https://developer.mozilla.org/zh-CN/docs/Web/Events* Event <- UIEvent <- MouseEvent* //** Event https://developer.mozilla.org/zh-CN/docs/Web/API/Event#DOM_Event_interface* detail: 1* sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}* which: 1* type: "click" 事件的類型（不區(qū)分大小寫）。* target: div#box.box 對事件起源目標的引用。* currentTarget: null 當前注冊事件的對象的引用。這是一個這個事件目前需要傳遞到的對象（譯者：大概意思就是注冊這個事件監(jiān)聽的對象）。這個值會在傳遞的途中進行改變。* eventPhase: 0 指示事件流正在處理哪個階段。* bubbles: true 一個布爾值，用來表示該事件是否在DOM中冒泡。* cancelable: true 一個布爾值，用來表示這個事件是否可以取消。* defaultPrevented: false 一個布爾值，表示了是否已經(jīng)執(zhí)行過了event.preventDefault()（譯者：其實應(yīng)該就是是否已經(jīng)阻止默認行為）* timeStamp: 2929.6050000702962 事件創(chuàng)建時的時間戳，毫秒級別。按照規(guī)定，這個時間戳是距離某個特定時刻的差值，但實際上在瀏覽器中此處的事件戳的定義有所不同。另外，正在開展工作將其改為DOMHighResTimeStamp。（譯者注：參考時間戳，在瀏覽器中此處的時間戳是距離該頁面打開時刻的大小）* srcElement: div#box.box 非標準別名（Microsoft Internet Explorer的舊版本） Event.target.* returnValue: true 一個非標準的替代方案（從舊版本的Microsoft Internet Explorer）到Event.preventDefault()和Event.defaultPrevented。* cancelBubble: false Event.stopPropagation() 以前的別名。通過在一個事件處理程序返回前設(shè)置這個屬性的值為真，來阻止事件冒泡。*//*** UIEvent https://developer.mozilla.org/en-US/docs/Web/API/UIEvent* detail: 1 只讀屬性，當非零，提供了當前（或下，根據(jù)不同的事件），點擊數(shù)。* layerX: 184 返回事件相對于當前圖層的水平坐標。* layerY: 184 返回事件相對于當前圖層的垂直坐標。*//*** MouseEvent https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent* screenX: 305 鼠標指針相對于全局（屏幕）的X坐標；* screenY: 539 鼠標指針相對于全局（屏幕）的Y坐標；* clientX: 305 鼠標指針在點擊元素（DOM）中的X坐標。* clientY: 405 鼠標指針在點擊元素（DOM）中的Y坐標。* pageX: 305 鼠標指針相對于整個文檔的X坐標；* pageY: 405 鼠標指針相對于整個文檔的Y坐標；* x: 305 MouseEvent.clientX的別名。* y: 405 MouseEvent.clientY的別名。* offsetX: 155 鼠標指針相對于目標節(jié)點內(nèi)邊位置的X坐標* offsetY: 154 鼠標指針相對于目標節(jié)點內(nèi)邊位置的Y坐標*//*** EventTarget https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget* EventTarget.addEventListener() 在EventTarget上注冊特定事件類型的事件處理程序。* EventTarget.removeEventListener() EventTarget中刪除事件偵聽器。* EventTarget.dispatchEvent() 將事件分派到此EventTarget。*//*** Node https://developer.mozilla.org/zh-CN/docs/Web/API/Node* EventTarget <- Node* 屬性：* Node.childNodes 只讀 返回一個包含了該節(jié)點所有子節(jié)點的實時的NodeList。NodeList 是“實時的”意思是，如果該節(jié)點的子節(jié)點發(fā)生了變化，NodeList對象就會自動更新。* Node.firstChild 只讀 返回該節(jié)點的第一個子節(jié)點Node，如果該節(jié)點沒有子節(jié)點則返回null。* Node.isConnected 只讀 返回一個布爾值用來檢測該節(jié)點是否已連接(直接或者間接)到一個上下文對象上，比如通常DOM情況下的Document對象，或者在shadow DOM情況下的ShadowRoot對象。* Node.lastChild 只讀 返回該節(jié)點的最后一個子節(jié)點Node，如果該節(jié)點沒有子節(jié)點則返回null。* Node.nextSibling 只讀 返回與該節(jié)點同級的下一個節(jié)點 Node，如果沒有返回null。* Node.nodeName 只讀 返回一個包含該節(jié)點名字的DOMString。節(jié)點的名字的結(jié)構(gòu)和節(jié)點類型不同。比如HTMLElement的名字跟它所關(guān)聯(lián)的標簽對應(yīng)，就比如HTMLAudioElement的就是 'audio' ，Text節(jié)點對應(yīng)的是 '#text' 還有Document節(jié)點對應(yīng)的是 '#document'。* Node.nodeType 只讀 返回一個與該節(jié)點類型對應(yīng)的無符號短整型的值，可能的值如下：ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3* Node.nodeValue 返回或設(shè)置當前節(jié)點的值。* Node.ownerDocument 只讀 返回這個元素屬于的 Document對象 。 如果沒有Document對象與之關(guān)聯(lián)，返回null。* Node.parentNode 只讀 返回一個當前結(jié)點 Node的父節(jié)點 。如果沒有這樣的結(jié)點,，比如說像這個節(jié)點是樹結(jié)構(gòu)的頂端或者沒有插入一棵樹中， 這個屬性返回null。* Node.parentElement 只讀 返回一個當前節(jié)點的父節(jié)點 Element 。 如果當前節(jié)點沒有父節(jié)點或者說父節(jié)點不是一個元素(Element), 這個屬性返回null。* Node.previousSibling 只讀 返回一個當前節(jié)點同輩的前一個結(jié)點( Node) ，或者返回null（如果不存在這樣的一個節(jié)點的話）。* Node.textContent 返回或設(shè)置一個元素內(nèi)所有子結(jié)點及其后代的文本內(nèi)容。* 方法：* Node.appendChild() 將指定的 childNode 參數(shù)作為最后一個子節(jié)點添加到當前節(jié)點。如果參數(shù)引用了 DOM 樹上的現(xiàn)有節(jié)點，則節(jié)點將從當前位置分離，并附加到新位置。* Node.cloneNode() 克隆一個 Node，并且可以選擇是否克隆這個節(jié)點下的所有內(nèi)容。默認情況下，節(jié)點下的內(nèi)容會被克隆。* Node.contains() 返回一個 Boolean 布爾值，來表示傳入的節(jié)點是否為該節(jié)點的后代節(jié)點。* Node.hasChildNodes() 返回一個Boolean 布爾值，來表示該元素是否包含有子節(jié)點。* Node.insertBefore() 在當前節(jié)點下增加一個子節(jié)點 Node，并使該子節(jié)點位于參考節(jié)點的前面。* Node.removeChild() 從當前元素中刪除一個子節(jié)點，該子節(jié)點必須是當前節(jié)點的子節(jié)點。*//*** Document https://developer.mozilla.org/zh-CN/docs/Web/API/Document* EventTarget <- Node <- Document* 屬性：* Document.body 返回當前文檔的 <body> 或 <frameset> 節(jié)點。* Document.contentType 只讀 根據(jù)當前文檔的 MIME Header，返回它的 Content-Type。* Document.doctype 只讀 返回當前文檔的文檔類型定義（Document Type Definition, DTD）。* Document.documentElement 只讀 返回當前文檔的直接子節(jié)點。對于 HTML 文檔，HTMLHtmlElement 對象一般代表該文檔的<html> 元素。* Document.documentURI 只讀 以字符串的類型，返回當前文檔的路徑。* Document.head 只讀 返回當前文檔的 <head> 元素。* Document.images 只讀 返回當前文檔中所包含的圖片的列表。* Document.links 只讀 返回一個包含文檔中所有超鏈接的列表。* Document.scripts 只讀 返回文檔中所有的 <script> 元素。* Document.scrollingElement 只讀 返回對Element滾動文檔的引用。* Document.cookie 返回一個使用分號分隔的 cookie 列表，或設(shè)置（寫入）一個 cookie。* Document.defaultView 只讀 返回一個對（當前） window 對象的引用。* Document.domain 獲取或設(shè)置當前文檔的域名。* Document.lastModified 只讀 返回文檔上次修改的日期。* Document.location 只讀 返回當前文檔的 URI。* Document.readyState 只讀 返回當前文檔的加載狀態(tài)。* Document.title 獲取或設(shè)置當前文檔的標題。* Document.URL 只讀 以字符串形式返回文檔的地址欄鏈接。* 事件處理程序：* Document.onfullscreenchange 是一個EventHandler代表fullscreenchange事件引發(fā)時要調(diào)用的代碼。* Document.onfullscreenerror 是一個EventHandler代表fullscreenerror事件引發(fā)時要調(diào)用的代碼。* Document.onreadystatechange 表示事件的事件處理代碼readystatechange。* GlobalEventHandlers.onblur 是一個EventHandler代表blur事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onfocus 是一個EventHandler代表focus事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onchange 是一個EventHandler代表change事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onclick 是一個EventHandler代表click事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onclose 是一個EventHandler代表close事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.oninput 是一個EventHandler代表input事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.oninvalid 是一個EventHandler代表invalid事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onkeydown 是一個EventHandler代表keydown事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onkeypress 是一個EventHandler代表keypress事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onkeyup 是一個EventHandler代表keyup事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onload 是一個EventHandler代表load事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onloadeddata 是一個EventHandler代表loadeddata事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onloadend 是一個EventHandler代表loadend事件發(fā)生時（資源加載停止時）將要調(diào)用的代碼。* GlobalEventHandlers.onloadstart 是一個EventHandler代表loadstart事件引發(fā)時（資源加載開始時）要調(diào)用的代碼。* GlobalEventHandlers.onmousedown 是一個EventHandler代表mousedown事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onmouseenter 是一個EventHandler代表mouseenter事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onmouseleave 是一個EventHandler代表mouseleave事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onmousemove 是一個EventHandler代表mousemove事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onmouseout 是一個EventHandler代表mouseout事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onmouseover 是一個EventHandler代表mouseover事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onmouseup 是一個EventHandler代表mouseup事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onresize 是一個EventHandler代表resize事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onscroll 是一個EventHandler代表scroll事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onseeked 是一個EventHandler代表seeked事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onseeking 是一個EventHandler代表seeking事件引發(fā)時要調(diào)用的代碼。* GlobalEventHandlers.onsubmit 是一個EventHandler代表submit事件引發(fā)時要調(diào)用的代碼。* 方法：* Document.createAttribute() 創(chuàng)建一個 new Attr object and returns it.* Document.createDocumentFragment() 創(chuàng)建一個 new document fragment.* Document.createElement() 創(chuàng)建一個 new element with the given tag name.* Document.createEvent() 創(chuàng)建一個 event 對象。* Document.createTextNode() 創(chuàng)建一個 text node.* Document.getElementsByClassName() 返回具有給定類名稱的元素列表。* Document.getElementsByTagName() 返回具有給定標簽名稱的元素列表。* document.getElementById(String id) 返回對所標識元素的對象引用。* document.querySelector() 按文檔順序返回文檔中與指定選擇器匹配的第一個Element節(jié)點。* document.querySelectorAll() 返回與指定選擇器匹配的文檔中所有Element節(jié)點的列表。* document.clear() 在大多數(shù)現(xiàn)代瀏覽器（包括Firefox和Internet Explorer的最新版本）中，此方法無效。* document.close() 關(guān)閉要寫入的文檔流。* document.getElementsByName() 返回具有給定名稱的元素列表。* document.getElementsByName() 返回具有給定名稱的元素列表。* 剪貼板事件：* copy 當用戶通過瀏覽器的用戶界面啟動復(fù)制操作時觸發(fā)。也可以通過oncopy屬性。* cut 當用戶通過瀏覽器的用戶界面發(fā)起剪切操作時觸發(fā)。也可以通過oncut屬性。* paste 當用戶通過瀏覽器的用戶界面發(fā)起粘貼操作時觸發(fā)。也可以通過onpaste屬性。* 拖放事件：* 全屏活動：* 鍵盤事件：* keydown 按下鍵時觸發(fā)。也可以通過onkeydown屬性。* keypress 當按下產(chǎn)生字符值的鍵時觸發(fā)。 也可以通過屬性。onkeypress* keyup 釋放鍵時觸發(fā)。也可以通過onkeyup屬性。* 加載和卸載事件：* DOMContentLoaded* readystatechange* 觸摸事件：* touchcancel* touchend* touchmove* touchstart* 過渡事件：*//*** ParentNode https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode* 屬性：* ParentNode.childElementCount 只讀 返回一個當前 ParentNode 所含有的后代數(shù)量。* ParentNode.children 只讀 返回一個包含 ParentNode 所有后代 Element 對象的動態(tài) HTMLCollection 對象，忽略所有非元素子節(jié)點。* ParentNode.lastElementChild 只讀 返回父節(jié)點的最后一個 Element 后代，沒有時返回 null。* ParentNode.lastElementChild 只讀 返回父節(jié)點的最后一個 Element 后代，沒有時返回 null。* 方法：* ParentNode.append() 在父節(jié)點 ParentNode 的最后一個后代后面插入一組 Node 對象或 DOMString 對象。DOMString 對象會以同等的 Text 節(jié)點插入。* ParentNode.prepend() 在父節(jié)點 ParentNode 第一個后代前插入一組 Node 對象或者 DOMString 對象。DOMString 對象會以同等的 Text 節(jié)點插入。* ParentNode.querySelector() 返回以當前元素為根元素，匹配給定選擇器的第一個元素 Element。* ParentNode.querySelectorAll() 返回一個 NodeList，表示以當前元素為根元素的匹配給定選擇器組的元素列表。*//*** Element https://developer.mozilla.org/zh-CN/docs/Web/API/Element* EventTarget <- Node <- Element* 屬性：* Element.attributes 返回一個與該元素相關(guān)的所有屬性集合 NamedNodeMap。* Element.clientHeight 只讀 返回Number 表示內(nèi)部相對于外層元素的高度。* Element.clientLeft 只讀 返回Number表示該元素距離它左邊界的寬度。* Element.clientTop 只讀 返回 Number 表示該元素距離它上邊界的高度。* Element.clientWidth 只讀 返回Number 表示該元素內(nèi)部的寬度。* Element.scrollHeight 只讀 返回類型為： Number，表示元素的滾動視圖高度。* Element.scrollLeft 返回類型為：Number，表示該元素橫向滾動條距離最左的位移.返回類型為： Number，表示該元素橫向滾動條可移動的最大值* Element.scrollTop 返回類型為：Number ，表示該元素縱向滾動條距離 返回類型為：Number ，表示該元素縱向滾動條可移動的最大值* Element.scrollWidth 只讀 返回類型為： Number ，表示元素的滾動視圖寬度。* Element.tagName 只讀 返回String帶有給定元素標簽名稱的。* 方法：* Element.getAttribute() 從當前節(jié)點檢索命名屬性的值，并將其作為返回Object。* Element.getAttributeNames() 返回當前元素的屬性名稱數(shù)組。* Element.getBoundingClientRect() 返回元素的大小及其相對于視口的位置。* Element.getClientRects() 返回矩形的集合，這些矩形指示客戶端中每行文本的邊界矩形。* Element.getElementsByClassName() 參數(shù)中給出類的列表，返回一個動態(tài)的 HTMLCollection ，包含了所有持有這些類的后代元素。* Element.getElementsByTagName() Element.hasAttribute() 返回一個Boolean指示元素是否具有指定屬性的指示。* Element.hasAttributes() 返回一個Boolean指示，指示元素是否具有一個或多個HTML屬性。* Element.insertAdjacentElement() 在相對于調(diào)用元素的給定位置的給定位置插入給定元素節(jié)點。* Element.insertAdjacentHTML() 將文本解析為HTML或XML，并將結(jié)果節(jié)點插入給定位置的樹中。* Element.insertAdjacentText() 在相對于要調(diào)用的元素的給定位置處插入給定的文本節(jié)點。* Element.querySelector() 返回第一個Node與相對于元素的指定選擇器字符串匹配的字符串。* Element.querySelectorAll() 返回NodeList相對于元素與指定選擇器字符串匹配的節(jié)點的。* ChildNode.remove() 從其父級的子級列表中刪除該元素。* Element.removeAttribute() 從當前節(jié)點刪除命名屬性。* Element.requestFullscreen() 異步要求瀏覽器使元素全屏顯示。* Element.scroll() 滾動到給定元素內(nèi)的一組特定坐標。* Element.scrollBy() 按給定數(shù)量滾動元素。* Element.scrollIntoView() 滾動頁面，直到元素進入視圖。* Element.scrollTo() 滾動到給定元素內(nèi)的一組特定坐標。* Element.setAttribute() 設(shè)置當前節(jié)點的命名屬性的值。* Element.toggleAttribute() 在指定的元素上切換一個布爾屬性，如果存在則將其刪除，如果不存在則將其添加。*//*** Attr https://developer.mozilla.org/zh-CN/docs/Web/API/Attr* EventTarget <- Node <- Attr* nodeName 使用Attr.name來代替* nodeType 當前該屬性總是返回2，表示ATTRIBUTE_NODE* nodeValue 使用Attr.value來代替*//*** Text https://developer.mozilla.org/zh-CN/docs/Web/API/Text* EventTarget <- Node <- Text* Text.wholeText 返回一個a，DOMString其中包含在Text邏輯上與此this相鄰的所有節(jié)點的文本（Node按文檔順序連接）。*//*** Window https://developer.mozilla.org/zh-CN/docs/Web/API/Window* Window.scroll() 將窗口滾動到文檔中的特定位置。* Window.scrollBy() 在窗口中滾動給定數(shù)量的文檔。* Window.scrollTo() 滾動到文檔中的一組特定坐標。*//*** Screen https://developer.mozilla.org/zh-CN/docs/Web/API/Screen* window.screen* Screen.availTop 指定未分配給永久或半永久用戶界面功能的第一個像素的y坐標。* Screen.availLeft 返回屏幕左邊邊界的第一個像素點* Screen.availHeight 指定屏幕的高度，以像素為單位，減去操作系統(tǒng)顯示的永久或半永久用戶界面功能，例如Windows上的“任務(wù)欄”。* Screen.availWidth 返回窗口中水平方向可用空間的像素值。* Screen.colorDepth 返回屏幕的色彩深度。* Screen.height 以像素為單位返回屏幕的高度。* Screen.left 返回從最左邊界到當前屏幕的像素值。* Screen.orientation 返回當前屏幕的轉(zhuǎn)向。* Screen.pixelDepth 獲取屏幕的像素點* Screen.top 返回最上邊界到當前屏幕的像素值。* Screen.width 返回屏幕的寬度。*//*** HTMLCollection https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection* 屬性：* HTMLCollection.length 只讀 返回集合當中子元素的數(shù)目。* 方法：* HTMLCollection.item() 根據(jù)給定的索引（從0開始），返回具體的節(jié)點。如果索引超出了范圍，則返回 null。* HTMLCollection.namedItem() 根據(jù) Id 返回指定節(jié)點，或者作為備用，根據(jù)字符串所表示的 name 屬性來匹配。根據(jù) name 匹配只能作為最后的依賴，并且只有當被引用的元素支持 name 屬性時才能被匹配。如果不存在符合給定 name 的節(jié)點，則返回 null。*//** https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList* NodeList 對象是一個節(jié)點的集合，是由 Node.childNodes 和 document.querySelectorAll 返回的。* 屬性：* NodeList.length NodeList 中包含的節(jié)點個數(shù)。* 方法：* NodeList.item() 返回 NodeList 對象中指定索引的節(jié)點，如果索引越界，則返回null。等價的寫法是 nodeList[i]，不過，在這種情況下，越界訪問將返回 undefined。* NodeList.entries()* NodeList.forEach()* NodeList.keys()* NodeList.values()*//*** HTMLCollection 與 NodeList 的區(qū)別 https://www.runoob.com/js/js-htmldom-nodelist.html* HTMLCollection 是 HTML 元素的集合。* NodeList 是一個文檔節(jié)點的集合。* NodeList 與 HTMLCollection 有很多類似的地方。* NodeList 與 HTMLCollection 都與數(shù)組對象有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。* NodeList 與 HTMLCollection 都有 length 屬性。* HTMLCollection 元素可以通過 name，id 或索引來獲取。* NodeList 只能通過索引來獲取。* 只有 NodeList 對象有包含屬性節(jié)點和文本節(jié)點。* */
總結(jié)
以上是生活随笔為你收集整理的jq 给节点node加事件_JavaScript 原生对象、属性、方法、事件、事件参数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 悬浮框_纯HTML实现某宝优惠券、商品列
- 下一篇： java中的alert是什么意思_jav