【总结整理】JavaScript的DOM事件学习（慕课网）

事件：在文档或者浏览器窗口中发生的一些，特定的交互瞬间

          HTML和JavaScript的交互通过事件 来实现

比如：1.滚动条向下滑动，加载图片 2.图片轮播，鼠标由2-5页调换

 

本章内容
1、理解事件流
2、使用事件处理程序
3、不同的事件类型
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
1、事件冒泡
　事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
　事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

二、事件处理程序
1、HTML事件处理程序

     直接赋值在标签上，用事件调用，麻烦，改动至少要改两个地方
2、DOM0级事件处理程序

     比较传统的方式：把一个函数赋值给一个事件的处理程序的属性，简单，可跨浏览器

　　btn2.onclick=showMessage;// 函数调用不加引号不叫括号
3、DOM2级事件处理程序
　　DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()

　　它们都接收三个参数：

　　　　要处理的事件名；//去掉on 

　　　　作为事件处理程序的函数；// 函数调用不加引号不叫括号

　　　　一个布尔值。//主要用false

      true在捕获阶段调用事件处理程序，false在冒泡阶段调用事件处理程序（主要）

btn3.addEventListener('click',showMessage,false);//ie不起作用

btn3.removeEventListener('click',showMessage,false)
4、IE事件处理程序
　　attachEvent()添加事件
　　detachEvent()删除事件

btn3.attachEvent('onclick',showMessage);

btn3.detachEvent('onclick',showMessage);//事件还是要有on
　　这两个方法接收相同的两个参数：（事件处理程序名称， 事件处理函数）//两个参数的原因：因为IE8及更早期的版本只支持事件冒泡，默认加到冒泡阶段

支持ie事件处理器的浏览器有ie和opera

5、跨浏览器的事件处理程序

//element.'on'+type
//element.('on'+type)
//element.onclick===element['onclick']

js中用element.加属性都等价于element[] 

三、事件对象
事件对象event : 在触发DOM上的某个事件的时候都会产生一个事件对象
1、DOM中的事件对象
　　(1)、type:获取事件类型
　　(2)、target：用于获取事件目标，事件给谁加上，事件来自于哪个属性     或者节点名称（element.target.nodeName）  
　　(3)、event.stopPropagation() 阻止事件冒泡  event.preventDefault()  写了这个函数后，就不会向上冒泡
　　(4)、event.preventDefault() 阻止事件的默认行为

               默认行为：比如：<a href='#'>超链接</a>

　　　　a标签的默认行为就是跳转

　　　　bubbles属性 canselable属性
2、IE中的事件对象
　　(1)、type:获取事件类型
　　(2)、srcElement：用于获取事件的目标
　　(3)、cancelBubble=true阻止事件冒泡　　
　　(4)、returnValue=false阻止事件的默认行为