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的更多相关文章

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习：DOM EventListener

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  3. javascript 要点

    javascript 要点 1 JavaScript:写入 HTML 输出 document.write("<h1>This is a heading</h1>&qu ...

  4. JavaScript之旅（DOM）

    JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...

  5. JavaScript(第十八天)【DOM基础】

    学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘 ...

  6. JavaScript大杂烩10 - 理解DOM

    操作DOM 终于到了JavaScript最为核心的部分了,通常来说,操作DOM,为页面提供更为友好的行为是JavaScript根本目标.   DOM树 - HTML结构的抽象 既然DOM是操纵HTML ...

  7. 第一百四十一节，JavaScript，封装库--DOM加载

    JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...

  8. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

  9. JavaScript之BOM和DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  10. 8.6 JavaScript之HTML的DOM（三）

    8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 ...

随机推荐

  1. DataTable ，XML和JSON相互转化

    网上搜集的,保留下来了,有需要的拿去!private string DataTable2Xml(DataTable dt) { StringBuilder xmlBuilder = new Strin ...

  2. 抱怨IT公司人才缺乏？留住现有人才方是正途

    摘要:员工的好坏决定着IT公司的未来,可很多IT公司在抱怨之时自己的人才却正在流失,如何留住现有的优秀员工?国外知名经理人Sharon Florentine建议:改善自己的管理.让员工不断地学习.创建 ...

  3. 【HDOJ】4601 Letter Tree

    挺有意思的一道题,思路肯定是将图转化为Trie树,这样可以求得字典序.然后,按照trie的层次求解.一直wa的原因在于将树转化为线性数据结构时要从原树遍历,从trie遍历就会wa.不同结点可能映射为t ...

  4. HTML5学习(四)---Canvas绘图

    参考教程地址:http://www.w3school.com.cn/html5/html_5_canvas.asp canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 c ...

  5. poj3216

    这是一道描述非常不清楚的题目 首先解释一下,题目中的ti是任务开始时间不是结束时间, 然后维修人员可以理解为可以再任意时间从公司出发: 好,首先不难想到用floyd预处理一下: 然后我们把每个任务看成 ...

  6. tyvj1161聚会的名单（trie树）

    背景 Background 明天就是candy的生日,candy又会邀请自己的一大堆好友来聚会了!哎!又要累坏飘飘乎居士了!! 描述 Description     明天就是candy的生日.晚上,c ...

  7. HAOI2007 理想的正方形

    1047: [HAOI2007]理想的正方形 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1402  Solved: 738[Submit][Sta ...

  8. Azure 负载平衡器新分发模式

    Yves Pitsch Azure 网络首席项目经理 Azure负载平衡器是一种第四层(TCP.UDP)类型的负载平衡器,它可以将传入流量分发到云服务中正常运行的服务实例上,或者分发到负载平衡器集内所 ...

  9. vs2010调用matlab2011下的.m文件

    很幸运在网上找到了采用引擎的方法,用vs2009调用matlab2008下的.m文件:但个人的环境是vs2010+matlab2011;想着二者差不多,故将s2010调用matlab2008拿来试试: ...

  10. memcache 存储单个KEY，数据量过大的时候性能慢！以及简单的memcache不适合用到的场景

    今天有人问到我:memcache存储大数据量,10K,100K,1M的时候,效果怎么样??我回答:不好,效果非常慢.对方问:为什么啊??我回答不上来...于是就找了点资料. memcached使用需要 ...