JavaScript中的事件概念（冒泡与捕获），绑定方式，事件对象，事件分类

目录

一、 事件的基本概念

二、 事件的绑定方式

三、 删除事件绑定：

四、 事件对象

                 1.   来源：当事件发生时，都会产生一个事件对象（event对象）

                 2.   作用：通过事件对象可以了解与事件相关的信息

                                （DOM对象、事件的类型……）

                 3.    获取事件对象:

                 4.   常用属性：

                5.   常用函数：

  五、事件的分类 

                1、鼠标事件：

                2、 页面事件

                3、焦点事件：多用于表单验证

                 4、在鼠标事件中，鼠标的位置信息的获取

                        强调：事件对象的兼容性处理

                 5、键盘事件：用户在使用键盘时触发

                 6、表单事件：操作表单时触发

---

一、 事件的基本概念

        1.   事件：JavaScript可以侦测到的行为 (用户在页面上进行的某种操作)；

                页面加载（浏览器打开页面）、单击鼠标、鼠标进入某个区域、焦点、键盘

        2.  事件处理程序：用户进行某种操作后，所运行的js程序块

        3.  事件驱动式：当事件发生后才去执行相应的程序

        4.   事件流：事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺

              序进行传播，这个事件传播的过程就是事件流。

        5.   在web中对事件流的解决方案：

                A.  事件捕获：网景公司（Netscape）

                B.  事件冒泡：微软公司（Microsoft）

                        冒泡的前提是：父级也定义了相应的事件，当子元素与父元素有相同的事件时，当

                        子元素的被触发时父元素也会被触发——冒泡机制

                捕获：从DOM树的根节点到发生事件的元素节点

                冒泡： 从发生事件的元素节点到DOM的根节点

                C.  W3C的事件的流处理：在事件发生阶段采用捕获方式（此时不处理），在事件处理

                      阶段采用冒泡

         6.   事件捕获的实现：

                addEventListener(事件名，事件处理程序 ， 事件处理方式）

                参数1：事件名（click、change 、 load、 mousedown...)

                参数2：事件处理程序

                参数3：默认为false----表示冒泡； true ----表示捕获

        二、 事件的绑定方式

                1.  行内绑定式： <标签名 事件名=“事件处理程序”></标签名>

                2.   动态绑定式： DOM对象名.事件名  =  事件处理程序

                两种方式的区别

                        a、 “行内绑定式”中事件名作为标签的属性，”动态绑定式”中事件名作为DOM对象

                                的属性

                        b、”行内绑定式”的事件处理程序中的this代表的是window对象，

                             ”动态绑定式”的事件处 理程序中的this代表的是触发事件的DOM对象

                       

                 3.   事件监听式： 可以给DOM对象的同一个事件绑定多个事件处理程序

                                DOM对象.addEventListener(type, callback, [capture]);     //标准浏览器

                ​                 DOM对象.attachEvent(type, callback); //早期IE浏览器

           三、 删除事件绑定：

                 DOM对象.removeEventListener(type, callback);

          四、 事件对象

                 1.   来源：当事件发生时，都会产生一个事件对象（event对象）

                 2.   作用：通过事件对象可以了解与事件相关的信息