• 消协提醒:春节预订酒店有技巧 预付卡消费需谨慎 2018-10-20
  • 陈敏尔唐良智会见传化集团董事长徐冠巨 2018-10-20
  • 扫黑除恶利剑高悬 前8月榕查处违法采砂案件93起 2018-10-20
  • 不能让所谓的收视率愚弄观众 2018-10-18
  • 新希望!中超19岁新星半年增重十斤 曾戏耍恒大两国脚 2018-10-17
  • 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 車·晓 第26期 車企官方降价真相幾何? 2018-10-12
  • 宝沃总裁杨嵩:曾和奔驰宝马同水平 已不能同日而语 2018-10-11
  • 新时代党员干部要有更大的担当和作为 2018-10-10
  • “2018-雷霆”专项行动破获百余起台湾间谍案 2018-10-09
  • 朝韩首脑今起在平壤会晤 “金文会”将聚焦三大议题 2018-10-09
  • 【JavaScript教程】JavaScript HTML DOM EventListener

    栏目: Javascript 发布于: 2014-11-29 17:51:02

    JavaScript HTML DOM EventListener


    addEventListener() 方法

    实例

    点用户点击按钮时触发监听事件:

    document.getElementById("myBtn").addEventListener("click", displayDate);

    尝试一下 ?

    addEventListener() 方法用于向指定元素添加事件句柄。

    addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

    你可以向一个元素添加多个事件句柄。

    你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。

    你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。

    addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。

    当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。

    你可以使用 removeEventListener() 方法来移除事件的监听。


    语法

    element.addEventListener(event, function, useCapture);

    第一个参数是事件的类型 (如 "click" 或 "mousedown").

    第二个参数是事件触发后调用的函数。

    第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

    Note 注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。


    向原元素添加事件句柄

    实例

    当用户点击元素时弹出 "Hello World!" :

    element.addEventListener("click", function(){ alert("Hello World!"); });

    尝试一下 ?

    你可以使用函数名,来引用外部函数:

    实例

    当用户点击元素时弹出 "Hello World!" :

    element.addEventListener("click", myFunction);

    function myFunction() {
    ??? alert ("Hello World!");
    }

    尝试一下 ?


    向同一个元素中添加多个事件句柄

    addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:

    实例

    element.addEventListener("click", myFunction);
    element.addEventListener("click", mySecondFunction);

    尝试一下 ?

    你可以向同个元素添加不同类型的事件:

    实例

    element.addEventListener("mouseover", myFunction);
    element.addEventListener("click", mySecondFunction);
    element.addEventListener("mouseout", myThirdFunction);

    尝试一下 ?


    向 Window 对象添加事件句柄

    addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象?;蛘咂渌С龅氖录韵笕? xmlHttpRequest 对象。

    实例

    当用户重置窗口大小时添加事件监听:

    window.addEventListener("resize", function(){
    ????document.getElementById("demo").innerHTML = sometext;
    });

    尝试一下 ?


    传递参数

    当传递参数值时,使用"匿名函数"调用带参数的函数:

    实例

    element.addEventListener("click", function(){ myFunction(p1, p2); });

    尝试一下 ?


    事件冒泡或事件捕获?

    事件传递有两种方式:冒泡与捕获。

    事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

    冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

    捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

    addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

    addEventListener(event, function, useCapture);

    默认值为 false, 及冒泡传递,当值为 true 时, 事件使用捕获传递。

    实例

    document.getElementById("myDiv").addEventListener("click", myFunction, true);

    尝试一下 ?


    removeEventListener() 方法

    removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

    实例

    element.removeEventListener("mousemove", myFunction);

    尝试一下 ?


    浏览器支持

    表格中的数字表示支持该方法的第一个浏览器的版本号。

    方法
    addEventListener() 1.0 9.0 1.0 1.0 7.0
    removeEventListener() 1.0 9.0 1.0 1.0 7.0

    注意: IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

    element.attachEvent(event, function);
    element.detachEvent(event, function);

    实例

    跨浏览器解决方法:

    var x = document.getElementById("myBtn");
    if (x.addEventListener) {??????????????????? // 所有主流浏览器,除了 IE 8 及更早版本
    ??? x.addEventListener("click", myFunction);
    } else if (x.attachEvent) {????????????????? // IE 8 及更早版本
    ??? x.attachEvent("onclick", myFunction);
    }

    尝试一下 ?


    HTML DOM 事件对象参考手册

    所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册。
    本文转载自:w3cschool

    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【JavaScript教程】JavaScript HTML DOM EventListener
    IT技术书籍推荐:
    疯狂Java讲义(第3版)
    疯狂Java讲义(第3版)
    李刚 (作者)
    《疯狂Java讲义(第3版)》内容简介:《疯狂Java讲义(第3版)》是《疯狂Java讲义》的第3版,第3版保持了前两版系统、全面、讲解浅显、细致的特性,全面新增介绍了Java 8的新特性,《疯狂Java讲义(第3版)》大部分示例程序都采用Lambda表达式、流式API进行了改写,因此务必使用Java 8的JDK来编译、运行。 《疯狂Java讲义(第3版)》深入介绍了Java编程的相关方面,全书内容覆盖了Java的基本语法结构、Java的面向对象特征、Java集合框架体系、Java泛型、异常处理、Java GUI编程、JDBC数据库编程、Java注释、Java的IO流体系、Java多线程编程、Java网络通信编程和Java反射机制。覆盖了java.lang、java.util、java.text、java.io和java.nio、java.sql、java.awt、javax.swing包下绝大部分类和接口?!斗杩馢ava讲义(第3版)》全面介绍了Java 8的新的接口语法、Lambda表达式、方法引用、构造器引用、函数式编程、流式编程、新的日期、时间API、并行支持、改进的类型推断、重复注解、JDBC 4.2新特性等新特性。