JS HTML DOM

JavaScript HTML DOM 事件监听器

addEventListener() 方法添加当用户点击按钮时触发的事件监听器：

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

语法

    element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。第二个参数是当事件发生时我们需要调用的函数。第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。 注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

向元素添加事件处理程序

    var element = document.getElementById("elementId");

    // 当用户点击某个元素时提示 "Hello World!"：
    element.addEventListener("click", function(){ alert("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);

    // addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。
    // 添加当用户调整窗口大小时触发的事件监听器：
    window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = sometext;
        // document.getElementById("demo").innerHTML = Math.random();
    });

    // 传递参数
    // 当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：
    element.addEventListener("click", function(){ myFunction(p1, p2); });

事件冒泡还是事件捕获？在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

    addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

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

removeEventListener() 方法 removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

    element.removeEventListener("mousemove", myFunction);

浏览器支持跨浏览器解决方案：

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

参考内容

JavaScript HTML DOM 事件监听器

首页 > 学习总览 > 开发语言 > JavaScript

blogSite

我是谁？我在哪儿？我在干什么？

JS HTML DOM

JavaScript HTML DOM 事件监听器

参考内容