HTML DOM addEventListener() 方法
document.addEventListener() 方法用于向文档添加事件句柄。 提示: 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
提示:使用 element.addEventListener() 方法为指定元素添加事件句柄。
语法
document.addEventListener(event, function, useCapture)
参数值
参数 | 描述 |
---|---|
event | 必需。描述事件名称的字符串。 注意: 不要使用 "on" 前缀。例如,使用 "click" 来取代 "onclick"。 提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。 |
function | 必需。描述了事件触发后执行的函数。 当事件触发时,事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。 |
useCapture | 可选。布尔值,指定事件是否 在捕获或冒泡阶段执行。 可能值:
|
技术细节
DOM 版本: DOM Level 2 Events 返回值: 没有返回值 修改记录: 在 Firefox 6 和 Opera 11.60 中 useCapture 参数是可选的。 (在 Chrome、IE 和 Safari 中一直都是可选的)。
实例
在文档中添加点击事件。当用户在文档任何地方点击时,在 id="demo" 的 <p> 元素上输出 "Hello World":
<p>该实例使用了 addEventListener() 方法向文档中添加点击事件。</p> <p>尝试点击文档的任何地方。</p> <p id="demo"></p> <script> document.addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World!"; }); </script>
更多的关于html,css,javascript内容可参考web前端开发
HTML文档中可以使用以下属性和方法:
属性 / 方法 | 描述 |
---|---|
document.activeElement | 返回当前获取焦点元素 |
document.addEventListener() | 向文档添加句柄 |
document.adoptNode(node) | 从另外一个文档返回 adapded 节点到当前文档。 |
document.anchors | 返回对文档中所有 Anchor 对象的引用。 |
document.applets |
返回对文档中所有 Applet 对象的引用。 注意: HTML5 已不支持 <applet> 元素。 |
document.baseURI | 返回文档的绝对基础 URI |
document.body | 返回文档的body元素 |
document.close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
document.cookie | 设置或返回与当前文档有关的所有 cookie。 |
document.createAttribute() | 创建一个属性节点 |
document.createComment() | createComment() 方法可创建注释节点。 |
document.createDocumentFragment() | 创建空的 DocumentFragment 对象,并返回此对象。 |
document.createElement() | 创建元素节点。 |
document.createTextNode() | 创建文本节点。 |
document.doctype | 返回与文档相关的文档类型声明 (DTD)。 |
document.documentElement | 返回文档的根节点 |
document.documentMode | 返回用于通过浏览器渲染文档的模式 |
document.documentURI | 设置或返回文档的位置 |
document.domain | 返回当前文档的域名。 |
document.domConfig | 已废弃。返回 normalizeDocument() 被调用时所使用的配置。 |
document.embeds | 返回文档中所有嵌入的内容(embed)集合 |
document.forms | 返回对文档中所有 Form 对象引用。 |
document.getElementsByClassName() | 返回文档中所有指定类名的元素集合,作为 NodeList 对象。 |
document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
document.getElementsByName() | 返回带有指定名称的对象集合。 |
document.getElementsByTagName() | 返回带有指定标签名的对象集合。 |
document.images | 返回对文档中所有 Image 对象引用。 |
document.implementation | 返回处理该文档的 DOMImplementation 对象。 |
document.importNode() | 把一个节点从另一个文档复制到该文档以便应用。 |
document.inputEncoding | 返回用于文档的编码方式(在解析时)。 |
document.lastModified | 返回文档被最后修改的日期和时间。 |
document.links | 返回对文档中所有 Area 和 Link 对象引用。 |
document.normalize() | 删除空文本节点,并连接相邻节点 |
document.normalizeDocument() | 删除空文本节点,并连接相邻节点的 |
document.open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表 |
document.readyState | 返回文档状态 (载入中……) |
document.referrer | 返回载入当前文档的文档的 URL。 |
document.removeEventListener() | 移除文档中的事件句柄(由 addEventListener() 方法添加) |
document.renameNode() | 重命名元素或者属性节点。 |
document.scripts | 返回页面中所有脚本的集合。 |
document.strictErrorChecking | 设置或返回是否强制进行错误检查。 |
document.title | 返回当前文档的标题。 |
document.URL | 返回文档完整的URL |
document.write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
document.writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |