12. 事件

1. 什么是事件？ 

        是用户或浏览器自身执行的某种动作，如onclick,load和mouseover都是事件的名字

        事件是javaScript和DOM之间交互的桥梁。

2. 一个事件由什么东西组成？【三要素】

        触发谁的事件： 事件源，产生动作的对象，给谁添加动作

        触发什么事件： 事件类型，这个是个啥动作

        触发以后做什么：事件处理函数，这个的动作的目的

3.  再啰嗦一下 ： 事件的三要素【事件源、事件、事件驱动程序】

4.  event  【event对象，也被称为事件对象】

        事件对象：存在兼容问题： e  =  e  ||  window.event

5.  DOM  0级事件

        DOM0级事件，表示接下来的内容是DOM中最基础的事件

       ^ _ ^ 获取元素节点（HTML标签）的方法

方法	描述
document.getElementById（id）	通过元素id来获取DOM对象
document.getElementsByTagName（HTML标签）	通过标签名来获取一个或多个DOM对象
document.getElementByClassName（class）	通过类名来获取一个或多个DOM对象
document.getElementByName（name）	通过Name获取一个或多个DOM对象
document.querySelector（css选择器）	通过CSS选择器选择一个元素
document.querySelectorAll（css选择器）	通过CSS选择器选择多个元素

    ^ _ ^  获取HTML值

方法	描述
元素节点.innerText	获取 HTML 元素的 innerText
元素节点.innerHTML	获取 HTML 元素的 innerHTML
元素节点.属性	获取 HTML 元素的属性值
元素节点.getAttribute（attribute）	获取 HTML 元素的属性值
元素节点.style.样式	获取 HTML 元素的行内样式值

看看有哪些事件：

常用事件
onblur	失焦事件
onfocus	得焦事件
onload	加载成功事件
error	加载失败事件
resize	大小改变事件

 

鼠标常用事件
onclick	点击事件
ondbclick	双击事件
onmousedown	鼠标按下事件
onmouseup	鼠标抬起事件
onmouseenter	鼠标移入事件
onmouseleave	鼠标移出事件
onmousemove	鼠标移动事件

       

键盘常用事件
onkeydown	键盘按下
onkeyup	键盘抬起
onkeypress	键盘按过【按下时触发】

5.1.  DOM 0级事件

        ele.onclick = function（）{ }

        DOM 0级缺点： 只能管一个事件

        例子：

//  0级DOM分为2个: 
//  一是在标签内写 onclick 事件
//  二是在JS写onclick = function ( ) { } 函数

1. <input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');" >

2. 
    document.getElementById("myButton").onclick = function () {
    alert('thanks');
   }

        删除DOM 0级事件处理程序，只要将对应事件属性设为 null 即可。

5.2 事件处理

        事件并不关键，关键的是处理事件

        我们通常使用的按钮对应事件来绑定函数来进行事件的处理，当条件被触发时【如按钮被点击关闭】其对应的函数会被调用，执行函数内的语句。

        DOM事件是将 HTML 与 JS 代码分开，这样便于维护。

6. DOM 2级事件

        一般写法 标准 浏览器：

        ele.addEventListener （' click ' , function（）{}，false）

and

        IE 浏览器 : ele.attachEvent（' onclick ' , function（）{}）

都有三个参数：  事件类型、事件处理函数、是否捕获：布尔值（ 默认为false ）

如果是 true 则表示在捕获阶段调用，为 false 表示在冒泡阶段调用

        DOM2级只有一个：监听方法；

        原生有两个方法可以用来添加和移除事件处理程序：addEventListener（）和 removeEventListener（）

• addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
• removeEventListener():不能移除匿名添加的函数

6.1   DOM0 和 DOM2的共性与个性

        1.  DOM 0级 与 DOM 2级的共同优点：

        能添加多个事件处理程序，按顺序执行，不过在HTML事件处理程序中无法做到

        

      2.  区别：

        如果定义了两个dom0级事件，dom0级事件会覆盖

        dom2不会覆盖，会依次执行

        dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

        DOM0事件：可以同时绑定多个不同的事件、不能同时绑定多个相同事件，会覆盖，只执行最后一个的函数。

        DOM2级事件：同时绑定多个事件【相同的也行不同的也行】，然后顺序执行，不会覆盖，缺点就是不具有跨浏览器优势，需要考虑兼容。

 

        

DOM2级 兼容封装函数

        function addEventListener（ obj , type , fn , bool ）{

                bool = bool || false; 左为假，返回右边，左真返左

                if（obj.addEventLister）{

                        obj.addEventListener（type,fn,bool）;

                }else if（ obj.attachEvent ）{

                        obj.attachEvent （ ' on ' + type , fn ）;

                }

        } 

/ /  eg： attEventListener（ btn, ' click ' , fn1）

         

// 这个看不懂没关系，需要慢慢消化，比较抽象，找机会多练习

7. 事件对象的认识

                什么是事件对象？ 【类似于飞机上的黑匣子、汽车上的行车记录仪、教室中的摄像头】

               当绑定事件的对象，在触发事件时，所发生的事情记录在一个地方，而这个地方称为事件对象

        如何获取事件对象？

                1. 标准浏览器获取事件对象的方式：触发事件后，会自动给事件处理程序传递一个参数，这个参数就是事件对象。

                2. IE浏览器获取事件对象的方式：window.event

                3. 兼容：

                        function getEvent（）{

                                return argument [ 0 ]  | |  window.event ;  

                }

        事件对象内鼠标相关信息

                鼠标的相对坐标值：【鼠标相对于所在对象上的坐标值】

                        event.offsetX  /  event.offsetY

                鼠标的可视区坐标值：【当前鼠标出发点距离当前窗口左上角的 X / Y 坐标】

                        event.clientX  /  event.clientY

                鼠标的绝对坐标值：【当前鼠标出发点距离 BODY 左上角的 X / Y坐标（IE9 一下没有这两个属性）】

       event.pageX  /  event.pageY

           // 兼容处理：

 event.clientX + ( document.documentElement.scrollLeft  ||  document.body.scrollLeft )

 event.clientY  +  ( document.documentElement.scrollTop ||  document.body.scrollTop )

        事件对象内键盘相关信息

                1. onkeydown  /   onkeyup ： event.keyCode

                        监听整个键盘，其中字母键只返回大写的编码值。

                2. onkeypress : event.keyCode  ||  event.charCode  ||  event.which

                        监听编辑键区，字母键返回大小的编码值

                        低版本浏览器中有可能监听功能键区、回车键出现过10

                        
                     

                           // 兼容：

                        // 获取键盘编码值的兼容

                        function getKeyCode（evt）{

                                var e = evt || window.event;

                                return e.keyCode  ||  e.charCode  ||  e.which;

                        }

                3.  altKey  /  shiftKey  /  ctrlKey  /  metaKey

                        1. event.metaKey : 返回一个布尔值标识meta键（windows键）是否被按键并保持

                        返回 true 表示 meta 键按下并保持

                        返回 false 表示没有满足 meta 键按下并保持的情况