JavaScript学习笔记（DOM 事件、事件监听器）

JavaScript学习笔记（DOM 事件、事件监听器）
@[TOC](JavaScript学习笔记（DOM 事件、事件监听器）
HTML事件属性
使用HTML DOM分配事件
onload和onunload事件
onchange事件
onmouseove 和onmouseout事件
onmousedown,onmouseup 以及onclick事件
事件监听器
addEventListener()方法
外部函数的方式
向相同元素添加多个事件处理程序
能够向相同元素添加不同类型的事件：
向Window对象添加事件处理程序
传递参数
事件冒泡还是事件捕获？
removeEventListener()方法
跨浏览器解决方案：

HTML DOM 允许 JavaScript 对 HTML 事件作出反应：

对事件作出反应
JavaScript能够在事件发生时，比如当用户点击某个HTML元素时。
为了在用户点击元素时执行代码，请向HTML事件属性添加JavaScript代码：

onclick = JavaScript

HTML事件的例子:

当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时-
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时
例如，当用户点击h1时，会改变其内容

<body>
    <h1 onclick="this.innerHTML='谢谢小可爱'">请点击我！</h1>
</body>

使用事件处理程序调用函数：

<body>
    <!-- <h1 onclick="this.innerHTML='谢谢小可爱'">请点击我！</h1> -->
    <h1 onclick="changeText(this)">请点击我亲爱的！</h1>

    <script>
        function changeText(id) {  
            id.innerHTML = "你是不是傻啊！";        }
    </script>
</body>

HTML事件属性

如需向 HTML 元素分配事件，您能够使用事件属性。
向button元素分配onclick事件：

	<p>请点击按钮来显示日期。</p>

    <button onclick="displayDate()">今天的时间是？</button>

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

    <p id="demo"></p>

在上例中，名为 displayDate 的函数会在按钮被点击时执行。

使用HTML DOM分配事件

HTML DOM允许使用JavaScript向HTML元素分配事件：

实例为button元素指定onclick事件：

<script>
	document.getElementById("myBtn").onclick = displayDate;
</scipt>

<p>请点击“试一试”按钮，以执行 displayDate() 函数。</p>

    <button id="myBtn" >试一试</button>

    <p id="demo"></p> 
    <script>
        document.getElementById("myBtn").onclick = displayDate;

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

在上例中，名为 displayDate 的函数被分配到 id=“myBtn” 的 HTML 元素。

当点击按钮时将执行函数。

onload和onunload事件

当用户进入后及离开页面时，会触发onload和onunload事件。
onload事件可用于检测访问都的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload和onunload事件可用于处理cookie。
实例：

<body onload=:"checkCookies()">

<body onload="checkCookies()">


    <p id="demo"></p>

    <script>
        function checkCookies() {  
            var text = "";
            if(navigator.cookieEnabled == true){
                text = "Cookie 已启用";
            }else{
                text = "Cookie 未启用";
            }
            document.getElementById("demo").innerHTML = text;
        }
    </script>
</body>

onchange事件

onchange 事件经常与输入字段验证结合使用。
下面是一个如何使用onchange的例子。当用户改变输入字段内容时，会调用upperCase()函数。

实现

<input type ="text" id="fname" onchange="upperCase()">

<script>
    function myFunctioin() {  
        var x = document.getElementById("fname");
        x.value = x.value.toUpperCase();
    }
</script>
<body>

    请输入名字：<input type="text" id="fname" 
    onchange="myFunctioin()"> 

    <p>离开输入字段时，会触发一个函数，将输入的文本轮换为大写</p>

</body>

onmouseove 和onmouseout事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

	<div onmousemove="mOver(this)" onmouseout="mOut(this)"
    style="background-color: red;width: 
    120px;height: 20px;padding: 40px;">请把鼠标移上来</div>

    <script>
        function mOver(obj) {  
            obj.innerHTML = "谢谢小宝贝！"
        }

        function mOut(obj) {
            obj.innerHTML = "请把鼠标移上来"
        }
    </script>

onmousedown,onmouseup 以及onclick事件

onmousedown,onmouseup以及onclick事件构成了完整的鼠标单击事件。
首先当鼠标按钮被点击时，onmousedown事件被触发
然后当鼠标按钮被释放时，onmouseup事件被触发
最后当鼠标点击完成后，onclick事件被触发。

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
    style="background-color: #D94A38;width: 90px;height: 20px;padding: 40px;">
    点击鼠标</div>

    <script>
        function mDown(obj) {  
            obj.style.backgroundColor = "#1ec5e5";
            obj.innerHTML = "松开鼠标";
        }
        function mUp(obj) {
            obj.style.backgroundColor="#D94A38";
            obj.innerHTML = "谢谢你！";
        }
    </script>

事件监听器

addEventListener()方法

添加当用户点击按钮时触发的事件监听器：

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

<h2>JavaScript addEventListener</h2>

    <p>此示例使用 addEventListener() 方法将click事件附加到按钮。</p>

    <button id="myBtn">试一试</button>

    <p id="demo"></p>

    <script>
        //addEventListener() 方法为指定元素指定事件处理程序。
        document.getElementById("myBtn").addEventListener("click",
        displayDate);

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

解释：
addEventListener()方法为指定元素指定事件处理程序。
addEventListener()方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
能够向一个元素添加多个事件处理程序。
能够向一个元素添加多个相同类型的事件处理程序，例如两个"click"事件。
能够向任何DOM对象添加事件处理程序而非仅仅HTML元素，例如window对象。
addEventListener()方法使我们更容易控制事件如何对冒泡作出反应。
当使用addEventListener()方法时，JavaScript与HTML标记是分隔的，已达到更佳的可读性；即使在不控制HTML标记时也允许添加事件监听器。
能够通过使用removeEventListener()方法轻松地删除事件监听器。
语法：

element.addEventListener(event,function,userCapture;

第一个参数是事件的类型（比如 “click” 或 “mousedown”）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。

向元素添加事件处理程序

当用户点击某个元素时提示"hello world!";

<h2>JavaScript addEventListener</h2>

    <p>此示例使用 addEventListener() 方法将click事件附加到按钮。</p>

    <button id="myBtn">试一试</button>

    <p id="demo"></p>

    <script>
        document.getElementById("myBtn").addEventListener("click",
        function () {  
            alert("Hello World!");
        });
    </script>

外部函数的方式

<h2>JavaScript addEventListener</h2>

    <p>此示例使用 addEventListener() 方法将click事件附加到按钮。</p>

    <button id="myBtn">试一试</button>

    <p id="demo"></p>

    <script>
      
        document.getElementById("myBtn").addEventListener("click",
        myFunction);

        function myFunction() {  
            alert("Hello World");
        }
    </script>

向相同元素添加多个事件处理程序

addEventListener()方法允许向相同元素添加多个事件，同时不覆盖已有事件。

	<h1>JavaScript addEventListener()</h1>

    <p>此示例使用 addEventListener() 方法将两个 click事件附加到按钮。</p>

    <button id="myBtn">试一试</button>


    <script>
        var x = document.getElementById("myBtn");
        x.addEventListener("click",myFuction);
        x.addEventListener("click",someOtherFuction);

        //addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：
        //这里也就执行了两个弹出窗口事件
        function myFuction(){
            alert("myFuction函数执行了！");
        }

        function someOtherFuction() {  
            alert("someOtherFuction函数执行了！")
        }

    </script>

能够向相同元素添加不同类型的事件：

用 addEventListener() 方法在同一按钮上添加许多事件。

<h1>JavaScript addEventListener()</h1>

    <p>此示例使用 addEventListener() 方法在同一个按钮上添加了很多事件。</p>

    <button id="myBtn">试一试</button>

    <p id="demo"></p>

    <script>
    
        //在一个鼠标上添加了三个事件
        var x = document.getElementById("myBtn");
        x.addEventListener("mouseover",myFunction);
        x.addEventListener("click",mySecondFunction);
        x.addEventListener("mouseout",myThirdFunction);

        //鼠标悬停事件
        function myFunction() {
            document.getElementById("demo").innerHTML += "Moused over!<br>";
        }
        //鼠标单击事件
        function mySecondFunction() {
            document.getElementById("demo").innerHTML += "Clicked!<br>";
        }
        //鼠标离开事件
        function myThirdFunction() {
            document.getElementById("demo").innerHTML += "Moused out!<br>";
        }
    </script>

演示效果：

向Window对象添加事件处理程序

addEventListener() 允许将事件监听器添加到任何HTML DOM对象上，比如HTML元素、HTML对象、window对象或者其他支持事件的对象、比如xmlHttpRequest对象。
添加当用户调整窗口大小时触发的事件监听器：


	<h1>JavaScript addEventListener()</h1>

    <p>此例在 window 对象上使用 addEventListener() 方法</p>

    <p>尝试调整此浏览器窗口的大小以触发"resize"事件处理程序。</p>
    <p id="demo"></p>

    <script>
        //改变浏览器窗口的大小就会随机生成一个数并写到id为
        window.addEventListener("resize",function () {  
            document.getElementById("demo").innerHTML = Math.random();
        });

    </script>

传递参数

当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：

	<h1>JavaScript addEventListener</h1>

    <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>

事件冒泡还是事件捕获？

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

addEventListener(event,functioni,userCapture);

removeEventListener()方法

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

<head>
    <meta charset="utf-8">

    <style>
        #myDIV{
            background-color: coral;
            border: 1px solid;
            padding: 50px;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScript removeEventListener()</h1>

    <div id="myDIV">
        <p>这个div元素有一个onmousemove事件处理程序，每次在这个橙色字段中移动鼠标都会显示一个
            随机数。
        </p>
        <p>单击按钮以删除div的事件处理程序。</p>

        <button onclick="removeHandler()" id="myBtn">删除</button>
    </div>

    <p id="demo"></p>
    <script>
        
        document.getElementById("myDIV").addEventListener("mousemove",myFunction);
        //添加随机数事件
        function myFunction() {
            document.getElementById("demo").innerHTML = 
            Math.random();
        }

        //去除生成随机数的事件
        function removeHandler() {
            document.getElementById("myDIV").removeEventListener("mousemove",myFunction);
        }
    </script>
</body>

跨浏览器解决方案：

<body>

    <h1>JavaScript addEventListener()</h1>
    
    <p>Internet Explorer 8 及更早版本不支持 addEventListener() 方法。</p>
    
    <p>此例演示了适用于所有浏览器的解决方案。</p>
    
    <button id="myBtn">试一试</button>
    
    <script>
    var x = document.getElementById("myBtn");
    if (x.addEventListener) {
      x.addEventListener("click", myFunction);
    } else if (x.attachEvent) {
      x.attachEvent("onclick", myFunction);
    }
    
    function myFunction() {
      alert("Hello World!");
    }
    </script>
    
    </body>

JavaScript学习笔记（DOM 事件、事件监听器）