JavaScript 原生对象、属性、方法、事件、事件参数

最新推荐文章于 2023-03-02 11:20:57 发布
wdapp
最新推荐文章于 2023-03-02 11:20:57 发布
阅读量347
点赞数 1
分类专栏： JavaScript
本文链接：https://blog.csdn.net/wanda000/article/details/104145303
版权
JavaScript 专栏收录该内容
30 篇文章 0 订阅
订阅专栏
/**
 * 事件参考 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" 事件的类型（不区分大小写）。
 *  target: div#box.box 对事件起源目标的引用。
 *  currentTarget: null 当前注册事件的对象的引用。这是一个这个事件目前需要传递到的对象（译者：大概意思就是注册这个事件监听的对象）。这个值会在传递的途中进行改变。
 *  eventPhase: 0 指示事件流正在处理哪个阶段。
 *  bubbles: true 一个布尔值，用来表示该事件是否在DOM中冒泡。
 *  cancelable: true 一个布尔值，用来表示这个事件是否可以取消。
 *  defaultPrevented: false 一个布尔值，表示了是否已经执行过了event.preventDefault()（译者：其实应该就是是否已经阻止默认行为）
 *  timeStamp: 2929.6050000702962 事件创建时的时间戳，毫秒级别。按照规定，这个时间戳是距离某个特定时刻的差值，但实际上在浏览器中此处的事件戳的定义有所不同。另外，正在开展工作将其改为DOMHighResTimeStamp。（译者注：参考时间戳，在浏览器中此处的时间戳是距离该页面打开时刻的大小）
 *  srcElement: div#box.box 非标准别名（Microsoft Internet Explorer的旧版本） Event.target.
 *  returnValue: true 一个非标准的替代方案（从旧版本的Microsoft Internet Explorer）到Event.preventDefault()和Event.defaultPrevented。
 *  cancelBubble: false Event.stopPropagation() 以前的别名。通过在一个事件处理程序返回前设置这个属性的值为真，来阻止事件冒泡。
 */

/**
 *  UIEvent https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
 *  detail: 1 只读属性，当非零，提供了当前（或下，根据不同的事件），点击数。
 *  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 鼠标指针相对于目标节点内边位置的X坐标
 *  offsetY: 154 鼠标指针相对于目标节点内边位置的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 只读 返回一个包含了该节点所有子节点的实时的NodeList。NodeList 是“实时的”意思是，如果该节点的子节点发生了变化，NodeList对象就会自动更新。
 * Node.firstChild 只读 返回该节点的第一个子节点Node，如果该节点没有子节点则返回null。
 * Node.isConnected 只读 返回一个布尔值用来检测该节点是否已连接(直接或者间接)到一个上下文对象上，比如通常DOM情况下的Document对象，或者在shadow DOM情况下的ShadowRoot对象。
 * Node.lastChild 只读 返回该节点的最后一个子节点Node，如果该节点没有子节点则返回null。
 * Node.nextSibling 只读 返回与该节点同级的下一个节点 Node，如果没有返回null。
 * Node.nodeName 只读 返回一个包含该节点名字的DOMString。节点的名字的结构和节点类型不同。比如HTMLElement的名字跟它所关联的标签对应，就比如HTMLAudioElement的就是 'audio' ，Text节点对应的是 '#text' 还有Document节点对应的是 '#document'。
 * Node.nodeType 只读 返回一个与该节点类型对应的无符号短整型的值，可能的值如下：ELEMENT_NODE  1 ATTRIBUTE_NODE  2 TEXT_NODE  3
 * Node.nodeValue 返回或设置当前节点的值。
 * Node.ownerDocument 只读 返回这个元素属于的 Document对象 。 如果没有Document对象与之关联，返回null。
 * Node.parentNode 只读 返回一个当前结点 Node的父节点 。如果没有这样的结点,，比如说像这个节点是树结构的顶端或者没有插入一棵树中， 这个属性返回null。
 * Node.parentElement 只读 返回一个当前节点的父节点 Element 。 如果当前节点没有父节点或者说父节点不是一个元素(Element), 这个属性返回null。
 * Node.previousSibling 只读 返回一个当前节点同辈的前一个结点( Node) ，或者返回null（如果不存在这样的一个节点的话）。
 * Node.textContent 返回或设置一个元素内所有子结点及其后代的文本内容。
 * 方法：
 * Node.appendChild() 将指定的 childNode 参数作为最后一个子节点添加到当前节点。如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。
 * Node.cloneNode() 克隆一个 Node，并且可以选择是否克隆这个节点下的所有内容。默认情况下，节点下的内容会被克隆。
 * Node.contains() 返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点。
 * Node.hasChildNodes() 返回一个Boolean 布尔值，来表示该元素是否包含有子节点。
 * Node.insertBefore() 在当前节点下增加一个子节点 Node，并使该子节点位于参考节点的前面。
 * Node.removeChild() 从当前元素中删除一个子节点，该子节点必须是当前节点的子节点。
 */

/**
 * Document https://developer.mozilla.org/zh-CN/docs/Web/API/Document
 * EventTarget <- Node <- Document
 * 属性：
 * Document.body 返回当前文档的 <body> 或 <frameset> 节点。
 * Document.contentType 只读 根据当前文档的 MIME Header，返回它的 Content-Type。
 * Document.doctype 只读 返回当前文档的文档类型定义（Document Type Definition, DTD）。
 * Document.documentElement 只读 返回当前文档的直接子节点。对于 HTML 文档，HTMLHtmlElement 对象一般代表该文档的<html> 元素。
 * Document.documentURI 只读 以字符串的类型，返回当前文档的路径。
 * Document.head 只读 返回当前文档的 <head> 元素。
 * Document.images 只读 返回当前文档中所包含的图片的列表。
 * Document.links 只读 返回一个包含文档中所有超链接的列表。
 * Document.scripts 只读 返回文档中所有的 <script> 元素。
 * Document.scrollingElement 只读 返回对Element滚动文档的引用。
 * Document.cookie 返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。
 * Document.defaultView 只读 返回一个对（当前） window 对象的引用。
 * Document.domain 获取或设置当前文档的域名。
 * Document.lastModified 只读 返回文档上次修改的日期。
 * Document.location 只读 返回当前文档的 URI。
 * Document.readyState 只读 返回当前文档的加载状态。
 * Document.title 获取或设置当前文档的标题。
 * Document.URL 只读 以字符串形式返回文档的地址栏链接。
 * 事件处理程序：
 * Document.onfullscreenchange 是一个EventHandler代表fullscreenchange事件引发时要调用的代码。
 * Document.onfullscreenerror 是一个EventHandler代表fullscreenerror事件引发时要调用的代码。
 * Document.onreadystatechange 表示事件的事件处理代码readystatechange。
 * GlobalEventHandlers.onblur 是一个EventHandler代表blur事件引发时要调用的代码。
 * GlobalEventHandlers.onfocus 是一个EventHandler代表focus事件引发时要调用的代码。
 * GlobalEventHandlers.onchange 是一个EventHandler代表change事件引发时要调用的代码。
 * GlobalEventHandlers.onclick 是一个EventHandler代表click事件引发时要调用的代码。
 * GlobalEventHandlers.onclose 是一个EventHandler代表close事件引发时要调用的代码。
 * GlobalEventHandlers.oninput 是一个EventHandler代表input事件引发时要调用的代码。
 * GlobalEventHandlers.oninvalid 是一个EventHandler代表invalid事件引发时要调用的代码。
 * GlobalEventHandlers.onkeydown 是一个EventHandler代表keydown事件引发时要调用的代码。
 * GlobalEventHandlers.onkeypress 是一个EventHandler代表keypress事件引发时要调用的代码。
 * GlobalEventHandlers.onkeyup 是一个EventHandler代表keyup事件引发时要调用的代码。
 * GlobalEventHandlers.onload 是一个EventHandler代表load事件引发时要调用的代码。
 * GlobalEventHandlers.onloadeddata 是一个EventHandler代表loadeddata事件引发时要调用的代码。
 * GlobalEventHandlers.onloadend 是一个EventHandler代表loadend事件发生时（资源加载停止时）将要调用的代码。
 * GlobalEventHandlers.onloadstart 是一个EventHandler代表loadstart事件引发时（资源加载开始时）要调用的代码。
 * GlobalEventHandlers.onmousedown 是一个EventHandler代表mousedown事件引发时要调用的代码。
 * GlobalEventHandlers.onmouseenter 是一个EventHandler代表mouseenter事件引发时要调用的代码。
 * GlobalEventHandlers.onmouseleave 是一个EventHandler代表mouseleave事件引发时要调用的代码。
 * GlobalEventHandlers.onmousemove 是一个EventHandler代表mousemove事件引发时要调用的代码。
 * GlobalEventHandlers.onmouseout 是一个EventHandler代表mouseout事件引发时要调用的代码。
 * GlobalEventHandlers.onmouseover 是一个EventHandler代表mouseover事件引发时要调用的代码。
 * GlobalEventHandlers.onmouseup 是一个EventHandler代表mouseup事件引发时要调用的代码。
 * GlobalEventHandlers.onresize 是一个EventHandler代表resize事件引发时要调用的代码。
 * GlobalEventHandlers.onscroll 是一个EventHandler代表scroll事件引发时要调用的代码。
 * GlobalEventHandlers.onseeked 是一个EventHandler代表seeked事件引发时要调用的代码。
 * GlobalEventHandlers.onseeking 是一个EventHandler代表seeking事件引发时要调用的代码。
 * GlobalEventHandlers.onsubmit 是一个EventHandler代表submit事件引发时要调用的代码。
 * 方法：
 * Document.createAttribute() 创建一个 new Attr object and returns it.
 * Document.createDocumentFragment() 创建一个 new document fragment.
 * Document.createElement() 创建一个 new element with the given tag name.
 * Document.createEvent() 创建一个 event 对象。
 * Document.createTextNode() 创建一个 text node.
 * Document.getElementsByClassName() 返回具有给定类名称的元素列表。
 * Document.getElementsByTagName() 返回具有给定标签名称的元素列表。
 * document.getElementById(String id) 返回对所标识元素的对象引用。
 * document.querySelector() 按文档顺序返回文档中与指定选择器匹配的第一个Element节点。
 * document.querySelectorAll() 返回与指定选择器匹配的文档中所有Element节点的列表。
 * document.clear() 在大多数现代浏览器（包括Firefox和Internet Explorer的最新版本）中，此方法无效。
 * document.close() 关闭要写入的文档流。
 * document.getElementsByName() 返回具有给定名称的元素列表。
 * document.getElementsByName() 返回具有给定名称的元素列表。
 * 剪贴板事件：
 * copy 当用户通过浏览器的用户界面启动复制操作时触发。也可以通过oncopy属性。
 * cut 当用户通过浏览器的用户界面发起剪切操作时触发。也可以通过oncut属性。
 * paste 当用户通过浏览器的用户界面发起粘贴操作时触发。也可以通过onpaste属性。
 * 拖放事件：
 * 全屏活动：
 * 键盘事件：
 * keydown 按下键时触发。也可以通过onkeydown属性。
 * keypress 当按下产生字符值的键时触发。 也可以通过属性。onkeypress
 * keyup 释放键时触发。也可以通过onkeyup属性。
 * 加载和卸载事件：
 * DOMContentLoaded
 * readystatechange
 * 触摸事件：
 * touchcancel
 * touchend
 * touchmove
 * touchstart
 * 过渡事件：
 */

/**
 * ParentNode https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode
 * 属性：
 * ParentNode.childElementCount 只读 返回一个当前 ParentNode 所含有的后代数量。
 * ParentNode.children 只读 返回一个包含 ParentNode 所有后代 Element 对象的动态 HTMLCollection 对象，忽略所有非元素子节点。
 * ParentNode.lastElementChild 只读 返回父节点的最后一个 Element 后代，没有时返回 null。
 * ParentNode.lastElementChild 只读 返回父节点的最后一个 Element 后代，没有时返回 null。
 * 方法：
 * ParentNode.append() 在父节点 ParentNode 的最后一个后代后面插入一组 Node 对象或 DOMString 对象。DOMString 对象会以同等的 Text 节点插入。
 * ParentNode.prepend() 在父节点 ParentNode 第一个后代前插入一组 Node 对象或者 DOMString 对象。DOMString 对象会以同等的 Text 节点插入。
 * ParentNode.querySelector() 返回以当前元素为根元素，匹配给定选择器的第一个元素 Element。
 * ParentNode.querySelectorAll() 返回一个 NodeList，表示以当前元素为根元素的匹配给定选择器组的元素列表。
 */

/**
 * Element https://developer.mozilla.org/zh-CN/docs/Web/API/Element
 * EventTarget <- Node <- Element
 * 属性：
 * Element.attributes 返回一个与该元素相关的所有属性集合 NamedNodeMap。
 * Element.clientHeight 只读 返回Number 表示内部相对于外层元素的高度。
 * Element.clientLeft 只读 返回Number表示该元素距离它左边界的宽度。
 * Element.clientTop 只读 返回 Number 表示该元素距离它上边界的高度。
 * Element.clientWidth 只读 返回Number 表示该元素内部的宽度。
 * Element.scrollHeight 只读 返回类型为： Number，表示元素的滚动视图高度。
 * Element.scrollLeft 返回类型为：Number，表示该元素横向滚动条距离最左的位移.返回类型为： Number，表示该元素横向滚动条可移动的最大值
 * Element.scrollTop 返回类型为：Number ，表示该元素纵向滚动条距离 返回类型为：Number ，表示该元素纵向滚动条可移动的最大值
 * Element.scrollWidth 只读 返回类型为： Number ，表示元素的滚动视图宽度。
 * Element.tagName 只读 返回String带有给定元素标签名称的。
 * 方法：
 * Element.getAttribute() 从当前节点检索命名属性的值，并将其作为返回Object。
 * Element.getAttributeNames() 返回当前元素的属性名称数组。
 * Element.getBoundingClientRect() 返回元素的大小及其相对于视口的位置。
 * Element.getClientRects() 返回矩形的集合，这些矩形指示客户端中每行文本的边界矩形。
 * Element.getElementsByClassName() 参数中给出类的列表，返回一个动态的 HTMLCollection ，包含了所有持有这些类的后代元素。
 * Element.getElementsByTagName() Element.hasAttribute() 返回一个Boolean指示元素是否具有指定属性的指示。
 * Element.hasAttributes() 返回一个Boolean指示，指示元素是否具有一个或多个HTML属性。
 * Element.insertAdjacentElement() 在相对于调用元素的给定位置的给定位置插入给定元素节点。
 * Element.insertAdjacentHTML() 将文本解析为HTML或XML，并将结果节点插入给定位置的树中。
 * Element.insertAdjacentText() 在相对于要调用的元素的给定位置处插入给定的文本节点。
 * Element.querySelector() 返回第一个Node与相对于元素的指定选择器字符串匹配的字符串。
 * Element.querySelectorAll() 返回NodeList相对于元素与指定选择器字符串匹配的节点的。
 * ChildNode.remove() 从其父级的子级列表中删除该元素。
 * Element.removeAttribute() 从当前节点删除命名属性。
 * Element.requestFullscreen() 异步要求浏览器使元素全屏显示。
 * Element.scroll() 滚动到给定元素内的一组特定坐标。
 * Element.scrollBy() 按给定数量滚动元素。
 * Element.scrollIntoView() 滚动页面，直到元素进入视图。
 * Element.scrollTo() 滚动到给定元素内的一组特定坐标。
 * Element.setAttribute() 设置当前节点的命名属性的值。
 * 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相邻的所有节点的文本（Node按文档顺序连接）。
 */

/**
 * Window https://developer.mozilla.org/zh-CN/docs/Web/API/Window
 * Window.scroll() 将窗口滚动到文档中的特定位置。
 * Window.scrollBy() 在窗口中滚动给定数量的文档。
 * Window.scrollTo() 滚动到文档中的一组特定坐标。
 */

/**
 * Screen https://developer.mozilla.org/zh-CN/docs/Web/API/Screen
 * window.screen
 * Screen.availTop 指定未分配给永久或半永久用户界面功能的第一个像素的y坐标。
 * Screen.availLeft 返回屏幕左边边界的第一个像素点
 * Screen.availHeight 指定屏幕的高度，以像素为单位，减去操作系统显示的永久或半永久用户界面功能，例如Windows上的“任务栏”。
 * Screen.availWidth 返回窗口中水平方向可用空间的像素值。
 * Screen.colorDepth 返回屏幕的色彩深度。
 * Screen.height 以像素为单位返回屏幕的高度。
 * Screen.left 返回从最左边界到当前屏幕的像素值。
 * Screen.orientation 返回当前屏幕的转向。
 * Screen.pixelDepth 获取屏幕的像素点
 * Screen.top 返回最上边界到当前屏幕的像素值。
 * Screen.width 返回屏幕的宽度。
 */

/**
 * HTMLCollection https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection
 * 属性：
 * HTMLCollection.length 只读 返回集合当中子元素的数目。
 * 方法：
 * HTMLCollection.item() 根据给定的索引（从0开始），返回具体的节点。如果索引超出了范围，则返回 null。
 * HTMLCollection.namedItem() 根据 Id 返回指定节点，或者作为备用，根据字符串所表示的 name 属性来匹配。根据 name 匹配只能作为最后的依赖，并且只有当被引用的元素支持 name 属性时才能被匹配。如果不存在符合给定 name 的节点，则返回 null。
 */

/** https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList
 * NodeList 对象是一个节点的集合，是由 Node.childNodes 和 document.querySelectorAll 返回的。
 * 属性：
 * NodeList.length NodeList 中包含的节点个数。
 * 方法：
 * NodeList.item() 返回 NodeList 对象中指定索引的节点，如果索引越界，则返回null。等价的写法是 nodeList[i]，不过，在这种情况下，越界访问将返回 undefined。
 * NodeList.entries()
 * NodeList.forEach()
 * NodeList.keys()
 * NodeList.values()
 */

/**
 * HTMLCollection 与 NodeList 的区别 https://www.runoob.com/js/js-htmldom-nodelist.html
 * HTMLCollection 是 HTML 元素的集合。
 * NodeList 是一个文档节点的集合。
 * NodeList 与 HTMLCollection 有很多类似的地方。
 * NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
 * NodeList 与 HTMLCollection 都有 length 属性。
 * HTMLCollection 元素可以通过 name，id 或索引来获取。
 * NodeList 只能通过索引来获取。
 * 只有 NodeList 对象有包含属性节点和文本节点。
 * */
wdapp
关注
1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 原生对象、属性、方法、事件、事件参数

/** * 事件参考 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 *...
复制链接

扫一扫