Day4-JS-JavaScript HTML DOM EventListener

2020-06-14 09:05:45 阅读：241 来源： 互联网

标签：function DOM 句柄 Day4 JavaScript getElementById 事件 addEventListener document

一、addEventListener() 方法

（先上实例）

    <button id="btn">点我</button>
    <p id="demo"></p>

    <script>
        document.getElementById("btn").addEventListener("click",displayDate);
        function displayDate(){
            document.getElementById("demo").innerHTML=Date();
        }
    </script>

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

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

====小技巧：可以使用 removeEventListener() 方法来移除事件的监听

二、向原元素添加事件句柄

　　①实例1：（可以直接在内部对函数进行定义）

    <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
    document.getElementById("myBtn").addEventListener("click",function(){
        alert("hahahhzy!");
    })
</script>

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

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

<button id="Btn">点我</button>
    <p id="demo"></p>

    <script>
        document.getElementById("Btn").addEventListener("click",myFunction1);
        document.getElementById("Btn").addEventListener("click",myFunction2);
        function myFunction1(){
            alert("1");
        }
        function myFunction2(){
            alert("2");
        }
    </script>

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

四、向 Window 对象添加事件句柄

实例1：当用户重置窗口大小时添加事件监听，这就是对resize进行重置事件监听了

（这个打开的时候，是不会看到数字的，要缩放一下页面触发了我们定义的事件，才可以看到任意产生的数字的）

  <p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>

<script>
    window.addEventListener("resize",function(){
        document.getElementById("demo").innerHTML=Math.random();
    })
</script>

五、给添加时间句柄传递参数

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

  <p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
    var p1=5;
    var p2=7;
    document.getElementById("myBtn").addEventListener("click",function(){
        myFunction(p1,p2);
    });
    function myFunction(a,b){
        var result=a*b;
        document.getElementById("demo").innerHTML=result;
    }
</script>

六、事件冒泡或事件捕获

哪个元素的 "click" 事件先被触发呢？冒泡的话就是内部的事件会想被触发的，捕获的话就是外部的元素先被触发

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

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

addEventListener(event, function, useCapture);

七、removeEventListener() 方法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #Div{
            background-color: coral;
            border: 1px solid;
            padding: 50px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="Div">
        <button onclick="removeFunction()">点我</button>
    </div>
    <p id="demo"></p>

    <script>
        document.getElementById("Div").addEventListener("mousemove",myFunction);
        function myFunction(){
            document.getElementById("demo").innerHTML=Math.random();
        }
        function removeFunction(){
            document.getElementById("Div").removeEventListener("mousemove",myFunction);
        }
    </script>
</body>
</html>

注意： 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);
}

标签：function,DOM,句柄,Day4,JavaScript,getElementById,事件,addEventListener,document
来源： https://www.cnblogs.com/SCAU-gogocj/p/13123706.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Day4-JS-JavaScript HTML DOM EventListener

①实例1：（可以直接在内部对函数进行定义）

　　①实例1：（可以直接在内部对函数进行定义）