事件的处理程序

当用户的行为（点击、移动）发生时，会自动被JavaScript引擎中的事件驱动所捕获并执行相应的事件处理程序，我们把这个过程就称之为事件驱动式。
所谓的事件处理程序就是在事件发生时所执行的程序，就称之为事件的处理程序。

常用事件

页面事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="点击" name="" onclick="alert(1)">
</body>
</html>

焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" value="请输入用户名" id="t">
    <script>
        var t = document.getElementById('t');
        t.focus=function(){
            t.value='';
        }
        t.onblur = function (){
            t.value='请输入用户名';
        }
    </script>
</body>
</html>

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d">
        asdasd
    </div>
    <script>
        var d = document.getElementById('d');
        d.onmouseover= function() {
            //鼠标悬浮指定元素之上时触发
            console.log('lll');
        }
        d.onmouseout = function (){
            //鼠标离开事件
            console.log('22222');
        }
        //鼠标点击
        d.onmousedown = function (){
            console.log('3333');
        }
        //鼠标弹起
        d.onmouseup = function (){
            console.log('4444');
        }
        //鼠标移动
        d.onmousemove = function (){
            console.log('4444');
        }
    </script>
</body>
</html>

键盘事件

onkevpress：键被按下后又被释放，输入了字符
onkevdown：当键盘按下时触发I
onkevup：当键盘弹起时触发

form 表单事件

onsubmit：当表单提交时触发
onreset：当表单重置时触发（<input type=’reset’value=’重量’/>）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" id="f">
        xingmin <input type="text" id="name"><br/>
      //表单提升教事件，注意，要绑定到form表单上，不能绑定到submit按钮上
        <input type="button" value="提交">
        <input type="button" value="重置">
    </form>
    <script>
        var f = document.getElementById('f');
        f.onsubmit = function(){
            alert(2);
        }
        f.onreset= function(){
            alert(3);
        }
    </script>
</body>
</html>

内容变化事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="t" value="请输入">
    <script>
        var t = document.getElementById('t');
        //内容发生变化并失去焦点后触发
        t.onchange = function (){
            console.log(5);
        }
        //内容变化事件，此事件仅支持H5
        t.oninput = function(){
            console.log(6);
        }
    </script>
</body>
</html>

事件绑定

所谓的事件绑定就是对某个对象的某个事件绑定相应的事件处理程序。
前面我们已经用过两个了；其实，事件的绑定有三种形式：行内绑定、动态绑定、事件监听

行内绑定

HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。

动态绑定

事件监听

addEventListener方法用于在当前节点或对象上，定义一个特定事件的监听函数；

//使用格式
target.addEventListener(type.listener[,useCapture])

addEventlistener方法接受三个参数：
type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段触发（后面事件传播细讲），默认为false（监听函数只在冒泡阶段被触发）

三种事件绑定的区别

小总结：
行内绑定：事件处理程序中的this指向window对象
动态绑定：事件处理程序中的this指向当前对象
总结:
第一种”HTML标签的on-属性”，违反了HTML与JavaScript代码相分离的原则；处理函数中this指向的window对象；
第二种”Element节点的事件属性”的缺点是，同一元素同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。但是处理函数中的this指向的选中的对象；所以，这两种方法都不推荐使用，除非是为了程序的兼容问题，因为所有浏览器都支持这两种方法。
第三种：addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。
处理函数中的this指向的也是选中的元素；

移除事件监听

事件的传播

现象

在JS中当一个事件发生以后，它会在不同的DOM节点之间传播。
这种传播分成三个阶段：
第一阶段：从window对象传导到目标节点，称为捕获阶段。
第二阶段：在目标节点上触发，称为目标阶段。
第三阶段：从目标节点传导回window对象，称为冒泡阶段。

事件的传播顺序：html->body->div3->div2->div1：
捕获阶段及目标阶段Div1->div2->div3->body->html：冒泡阶段

设置事件执行阶段

想让事件监听在捕获阶段，只能通过addEventListener方法的进行设置：
动态绑定和行内绑定的事件都是在冒泡阶整执行，且不能改变；

事件对象

事件对象概念

事件发生以后，会生成一个事件对象，作为参数传给监听函数。
有关事件发生的一切信息，都包含在这个事件对象中根据事件类型的不同，事件对象中包含的信息也有所不同；如点击事件中，包含鼠标点击的横纵坐标位置，键盘事件中，包含键盘的键值等；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d">
        ddd
        <p>qqq</p>
    </div>
    <script>
        var d =document.getElementById('d');
        d.addEventListener('click',function(e){
            console.log(e);
        });
        document.addEventListener('keydown',function(e){
            console.log(e)
        });
    </script>
</body>
</html>

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <img src="c.png" alt="" id="im" style="position:absolute; width:50px;height: 50px;">
      <script>
          var im = document.getElementById('im');
          im.onclick=function(){
              document.onmousemove =function (e){
                  im.style.left=e.clientX+'px';
                  im.style.top=e.clientY+'px';
              }
          }
      </script>
</body>
</html>

事件的常用元素

事件常用属性

event.bubbles：属性返回一个布尔值，表示当前事件是否会冒泡；
event.eventPhase：返回一个整数值，表示事件目前所处的节点
0：事件目前没有发室。
1：事件目前处于捕获阶段。
2：事件到达目标节点。
3：事件处于冒泡阶段。

事件委托

DOM模型

基本模型

DOM 是JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（增删改查）。
浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，
再由这些节点组成一个树状结构（DOM Tree）所有的节点和最终的树状结构，都有规范的对外接口。

节点的概念

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。
每个节点可以看作是文档树的一片叶子。
最顶层的节点就是document节点，它代表了整个文档。
是文档的根节点，每张网页都有自己的document节点，
window.document属性就指向这个点，只要浏览器开始载入HTML文档，
这个节点对象就存在了，可以直接调用。
每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象；
文档里面最高一层一般是HTML标签，其他HTML标签节点都是它的下级。
除了根节点以外，其他节点对于周圈的节点都存在三种关系：
父节点关系（parentNode）：宣校的那个上级节点
子节点关系（childNodes）：宣楼的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点

document.getElementById；//通过ID属性获取元素对象 document.getElementsByName；//通过name属性获取元素对象 document.getElementsByClassName；//通过class属性获取元素对 document.getElementsByTagName；//通过标签属性获取元素对象 document.querySelector('#p');//通过ID属性获取元素对象 document.querySelector('.p');//通过CLASS属性获取元素对象

创建节点及添加节点

创建节点，也需要使用document提供的一些列方法；
createElement O）
用来生成网页元素节点，泰数为元素的标签名；
createTextNode ()
用来生成文本节点，参数为所要生成的文本节点的内容；
appendChild()
接受一个节点对象作为参数，将其作为最后一个子节点，播入当前节点；
hasChildNodes ()
返回一个布尔值，表示当前节点是否有子节点
removeChild()
接受一个子节点作为参数，用于从当前节点移除该子节点
cloneNode()
用于克隆一个选中的节点。
它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。
注意：不会克隆绑定到该元素上的事件；
innerHTML
返回该元素下的所有内容。该属性可读写，常用来设量某个节点的内容；

节点属性

关系节点

nextElementSibling
返回紧跟在当前节点后面的第一个同级Element节，如果当前节点后面没有同级节点，则返回nul1；previousElementSibling
返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回nul1；parentElement
返回当前节点的父级Element节点；
childNodes
返回一个Nodelist集合，成员包括当前节点的所有子节点（注意空格回车也算）。

代码知识

事件