JS文档对象模型（DOM）事件的类型与事件对象

事件的三要素

        元素、事件类型、事件对象

事件对象的作用

        携带着相关事件类型的所有属性和方法

        ps：事件对象的产生，必须有事件；根据需求，事件对象可有可无。

调用事件对象的写法：

        document.οnclick=function(evt){
        var e=evt||event;
        console.log(e)}

---

鼠标事件对象的属性

        e.pageX/e.pageY——针对整个页面的左顶点

        e.clientX/e.clientY——针对可视窗口的左顶点

        e.offsetX/e.offsetY——针对父元素的左顶点

---

键盘事件

事件类型

        document.οnkeyup=funcation(){}——按键弹起的时刻触发

        document.onkeydown——按键按下的时刻触发

        document.onkeypress——按键生成一个字符时触发

事件对象
获取录入字符的ASC码值:

        var key=e.charCode||e.keyCode||e.which

ASC码值转字符:

        String.fromCharCode(key)

ps:常用ASC码值
        10（ctrl+回车）
        13（回车）
        32（空格）
        48（"0"）
        65（"A"）
        97（"a"）
判断ctrl是否被按下——e.ctrlKey（返回布尔值）

键盘事件的元素基本都是document

---

事件流

        (当某个事件执行时，从子元素向父元素触发或从父元素向子元素触发)

冒泡——子到父

阻止冒泡事件（给子元素停止向上传递）

兼容写法:

        e.stopPropagation?e.stopPropagation():e.cancelBubble=true

阻止浏览器默认行为

        e.preventDefault?e.preventDefault():e.returnValue=false

        renturn false

---

事件绑定的三种方式

1、通过HTML元素直接绑定

        <div οnclick="函数对象名（）">
2、通过JS对象绑定

        节点对象.οnclick=function(){}

3、通过事件的监听绑定

        节点对象.addEventListener("去掉on的事件类型"，回调函数，false/true)

事件监听的好处：

        可以为同一元素多次绑定相同的事件

        可以决定事件流为冒泡还是捕获

---

事件的解绑

通过js对象的方式解绑

        document.οnclick=function(){}

        document.οnclick=null

对监听的事件进行解绑

        节点对象.removeEventListener("",  )

---

事件的委托

        子元素事件由父元素实现（依赖于事件的冒泡）

        好处：可以批量的为子元素通过父元素绑定事件，提高程序运行效率

常规写法：

        for(let i=0;i<xli.length;i++){

        xli[i].οnclick=function(){

        xli[i].style.backgroundColor="red";}

事件委托写法：

        xul.οnclick=function(e){

        var e=e||event
        var target=e.target||e.srcElement;
        if(target.tagName=="LI"){

        target.style.backgroundColor = "red";

        }