HTML DOM addEventListener() 方法
实例
为 <button> 元素添加点击事件。 当用户点击按钮时,在 id="demo" 的 <p> 元素上输出 "Hello World" :
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
addEventListener() 方法用于向指定元素添加事件句柄。
提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
方法 | Chrome | IE | FireFox | Safari | Opera |
---|---|---|---|---|---|
addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
注意: Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。
语法
element.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 中一直都是可选的)。 |
更多实例
实例
您可以通过函数名来引用外部函数。
该实例演示了在用户点击 <button> 元素时如何执行函数:
document.getElementById("myBtn").addEventListener("click", myFunction); function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
转:http://www.runoob.com/jsref/met-element-addeventlistener.html
HTML DOM addEventListener() 方法的更多相关文章
- dom addeventlistener与id 绑定事件的区别
文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
- addEventListener()方法
★JS事件的捕获阶段和冒泡阶段: 讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到Paren ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- DOM 对象方法
DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定 ...
- [转]addEventListener() 方法,事件监听
转载 白杨-M http://www.cnblogs.com/baiyangyuanzi/p/6627401.html addEventListener() 方法,事件监听 你可以使用 remov ...
- HTML DOM submit() 方法
HTML DOM submit() 方法 HTML DOM Form 对象 定义和用法 submit() 方法把表单数据提交到 Web 服务器. 语法 formObject.submit() 说明 该 ...
- Vue 中 diff 算法后更新 DOM 的方法
vue 2.0加入了 virtual dom,在 node_modules\vue\src\core\vdom\patch.js 中会对虚拟 DOM 进行 diff 算法等,然后更新 DOM. 网上的 ...
- addEventListener() 方法,事件监听
知识点1:addEventListener() 方法,事件监听,可以使用 removeEventListener() 方法来移除事件的监听. 语法 element.addEventListener(e ...
- 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 安装 启动sshd服务:
.先确认是否已安装ssh服务: [root@localhost ~]# rpm -qa | grep openssh-server openssh-server-.3p1-.fc12.i686 (这行 ...
- eclipse to avoid the message, disable the...
标题 CreateTime--2018年5月9日10:38:15 Author:Marydon 1.问题描述 2.问题解析 这是因为eclipse的智能提示超时引起的,将超时间调大即可,如:200 ...
- GPT磁盘win7激活工具
系统重装前是Win10,再次重装没有格式化磁盘.GPT分区模式安装的Win7,传统的Win7激活工具都是基于KMS的. 今天,GPT磁盘win7激活工具针对GPTwin7de激活! 01.未激活 02 ...
- iOS开发-Objective-C Block的实现方式
前言:我们可以把Block当作一个闭包函数,它可以访问外部变量和局部变量,但默认是不可以修改外部变量.你可以使用它来做回调方法,比起使用代理(Delegate)会更加直观.顺带一提,苹果很多的接口(A ...
- Ubuntu 10.04下如何查看分区的UUID
Ubuntu 10.04通过UUID来区分各个磁盘分区,在/etc/fstab配置文件中就是通过UUID来挂载分区的.UUID,英文全称为:Universally Unique Identifier. ...
- 【转载】MyEclipse使用指南(精简版)
1.安装 2.注册 3.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JR ...
- 微信小程序 HelloWorld
本篇文章由:http://xinpure.com/micro-applet-helloworld/ 微信官方文档及工具已经开放!!! https://mp.weixin.qq.com/debug/wx ...
- 如何用python的装饰器定义一个像C++一样的强类型函数
Python作为一个动态的脚本语言,其函数在定义时是不需要指出参数的类型,也不需要指出函数是否有返回值.本文将介绍如何使用python的装饰器来定义一个像C++那样的强类型函数.接下去,先介绍 ...
- Android 在已有的项目上创建新的项目
原工程 右键Copy 再右键点Paste 改新的工程名
- FA_在建工程转固定资产(流程)
2014-06-08 Created By BaoXinjian