JavaScript要点(十三) HTML DOM EventListener
addEventListener() 方法
<body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script> </body>
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
JavaScript要点(十三) HTML DOM EventListener的更多相关文章
- 吴裕雄--天生自然 JAVASCRIPT开发学习:DOM EventListener
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...
- javascript 要点
javascript 要点 1 JavaScript:写入 HTML 输出 document.write("<h1>This is a heading</h1>&qu ...
- JavaScript之旅(DOM)
JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...
- JavaScript(第十八天)【DOM基础】
学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘 ...
- JavaScript大杂烩10 - 理解DOM
操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标. DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...
- 第一百四十一节,JavaScript,封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...
- JavaScript的BOM和DOM
JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...
- JavaScript之BOM和DOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- 8.6 JavaScript之HTML的DOM(三)
8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 ...
随机推荐
- P73、面试题9:斐波那契数列
题目一:写一个函数,输入n,求斐波那契数列(Fibonacci)数列的第n项,斐波那契数列的定义如下: f(n) = {0 n = 0; 1 n = 1; f(n-1)+f(n-2) n& ...
- “段寄存器”的故事[转](彻底搞清内存段/elf段/实模式保护模式以及段寄存器)
http://blog.csdn.net/michael2012zhao/article/details/5554023 一. 段寄存器的产生 段寄存器的产生源于Intel 8086 CPU体系结构中 ...
- 同步or异步
一.什么是同步?什么是异步? 同步:如果有多个任务要执行,这些任务必须逐个执行,一个任务的执行会导致整个流程的暂时等待,这些任务没有办法并发地执行: 异步:如果有多个任务要执行,这些任务可以并发执行, ...
- 从今天起,正式步入cnblogs,向曾经的脚印说声对不起!
步入这个行业也好多年了,从来没有定居过一个地方. 看过很多前辈们留下的资料,对后者门(其中还有我)留下很多珍贵的东西. 所以,我要向前辈学习,壮大自己,在学习的同时,不要忘记帮助别人. 对曾经我留下的 ...
- [swustoj 1092] 二分查找的最大次数
二分查找的最大次数(1092) 问题描述 这里是一个在排序好的数组A(从小到大)中查找整数X的函数,返回值是查找次数. int binarySearch(inta[],int n,int x)//数组 ...
- Cobar分布式数据库的应用与实践
最新文章:看我如何快速学习.Net(高可用数据采集平台).高并发数据采集的架构应用(Redis的应用) 问题点: 随着项目的增长,数据和数据表也成倍的增长,普通的单点数据库已经无法满足日常的增长的需要 ...
- RPi 2B SD read-only filesytem
/**************************************************************************** * RPi 2B SD read-only ...
- acdream 小晴天老师系列——苹果大丰收(DP)
小晴天老师系列——苹果大丰收 Problem Description 小晴天的后花园有好多好多的苹果树,某天,苹果大丰收~小晴天总共摘了M个苹果,我们假设苹果之间是不可分辨的. 为了保存苹果,小晴天买 ...
- POJ 2135 Farm Tour(最小费用最大流,变形)
题意:给一个无向图,FJ要从1号点出发到达n号点,再返回到1号点,但是路一旦走过了就会销毁(即回去不能经过),每条路长度不同,那么完成这趟旅行要走多长的路?(注:会有重边,点号无序,无向图!) 思路: ...
- light工具
环境变量 C:\Users\zhangqm\AppData\Roaming\npm\; 安装 npm install -gd jresplus 不要用npm install -gd light pro ...