DOM事件

注：部分参考来源：JavaScript 高级程序设计（第 3 版）
注：部分参考来源：慕课网

什么是事件

• 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

事件流

• 事件流描述的是从页面中接收事件的顺序。
• IE 的事件流是事件冒泡流。
• Netscape Communicator 的事件流是事件捕获流。

事件冒泡

• IE 的事件流叫做事件冒泡。
• 单击页面中的 <div>，这个 click 事件按照下图顺序传播：

事件捕获

• Netscape Communicator 团队的事件流叫做事件捕获。
• 单击页面中的 <div>，这个 click 事件按照下图顺序传播：

HTML 事件

• 直接在 HTML 元素标签内添加事件、执行脚本。
• 语法：<tag 事件 =“执行脚本”></tag>
• 在 HTML 元素上绑定事件。
• 执行脚本可以是一个函数的调用
• 缺点：HTML 代码和 javaScript 代码紧密耦合。

<input type="button" value = "弹出"  onclick = "alert(' 我是按钮 ')">

DOM0 级事件

• 语法：ele. 事件 = 执行脚本
• 功能：在 DOM 对象上绑定事件
• 说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

<div class="btn" id="btn"> 开始 </div>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function () {alert("我是按钮！！");
    }
</script>

DOM2 级事件

• 定义了两个方法：addEventListener()、removeEventListener()
• 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

<div id="button"> 按钮 </div>
<script>
    var btn = document.getElementById("button");
    btn.addEventListener("click",function(){alert("Hello world!");
    },false);
</script>

事件类型

• UI 事件
• 焦点事件
• 鼠标事件
• 滚轮事件
• 文本事件
• 键盘事件
• 合成事件
• 变动事件

onload：页面加载时触发	onclick：鼠标点击时触发
onmouseover：鼠标滑过时触发	Donmouseout：鼠标离开时触发
onfoucs：获得焦点时触发	onblur：失去焦点时触发
onchange：域的内容改变时发生

小例子：当脚本放在 head 之间时，加 onload

<script>
   // 页面加载时执行，unload 页面卸载
   window.onload = function(){var btn = document.getElementById("btn");
    btn.onclick = function () {alert("我是按钮！！");
    }
}
</script>

小例子：onfoucs、onblur

<style>
    .tip{display: none;}
</style>

<script>
    var phone = document.getElementById("phone"),
        tip = document.getElementById("tip");
    phone.onfocus = function(){tip.style.display = "block";}
    phone.onblur = function(){
        var phoneVal = this.value;
        if(phoneVal.length == 11 && isNaN(phoneVal) == false){
            tip.innerHTML = "输入正确";
          /* tip.innerHTML = "<img src='img/1.png'>";*/
        }
        else {tip.innerHTML = "输入错误";}
    }
</script>

小例子：onchange

<div class="box">
    请选择颜色：<select name=""id="menu">
        <option value=""> 请选择 </option>
        <option value="#f00"> 红色 </option>
        <option value="#0f0"> 绿色 </option>
        <option value="#00f"> 蓝色 </option>
        <option value="#ff0"> 黄色 </option>
        <option value="#ccc"> 灰色 </option>
    </select>
</div>
<script>
     var menu = document.getElementById("menu");
     menu.onchange = function(){
     var bgcolor = this.value;
     if(bgcolor == ""){document.body.style.background = "#fff";}
     else{document.body.style.background = bgcolor;}
 }
</script>

键盘事件与 keyCode 属性

onkeydown：在用户按下一个键盘按键时发生	onkeypress：在键盘按键被按下并释放一个键时发生
onkeyup：在键盘按键被松开时发生	keyCode：返回 onkeypress、onkeydown 或 onkeyup 事件触发的键的值的字符代码，或键的代码

小例子：keyCode

document.onkeypress = function(event){console.log(event.keyCode);
}

小例子：onkeyup

<style>
   .text span{
       font-weight: bold;
       color: #f00;
   }
    em{font-style: normal;}
</style>
<div>
    <p class="text"> 您还可以输入 <span><em id="count">30</em>/30</span></p>
    <div class="input">
        <textarea name=""id="text"cols="70"rows="4"></textarea>
    </div>
</div>
<script>
    // 获取文本框
    var text = document.getElementById("text");
    var total = 30;
    var count = document.getElementById("count");
    // 绑定键盘事件
    document.onkeyup = function(){
      // 获取文本框的长度
     var len = text.value.length;
        var allow = total - len;
        count.innerHTML = allow;
  }
</script>

事件委托

• 事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。即：利用冒泡机制将一类事件触发尽可能高的委托给其父节点或祖先节点来触发事件处理函数，这样只需要定义一个函数，访问一次 DOM 对象，减少了内存的占用以及访问 DOM 元素的时间，降低了性能的消耗。如：li–>ul

<ul class="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    var list = document.querySelector(".box");
    list.onclick = function (e){
        var e = e || window.event;
        var targer = e.target || e.srcElement;
        if(targer.nodeName.toLowerCase() === "li"){console.log(targer.textContent);
        }
    }
</script>

<div class="btn-list">
    <button id="1">1</button>
    <button id="2">2</button>
    <button id="3">3</button>
</div>
<script>
    var btnList = document.querySelector(".btn-list");
    btnList.onclick = function (e){
        var e = e || window.event;
        var targer = e.target || e.srcElement;
        switch (targer.id) {
            case "1":
                console.log(targer.textContent);
                break;
            case "2":
                console.log(targer.textContent);
                break;
            case "3":
                console.log(targer.textContent);
                break;
        }
    }
</script>

不好的地方，请多多指教