一: 理解事件流.(冒泡与捕获理论)

二:使用事件处理程序

三:不同的事件类型.

总结:通过今天的课程,学会使用窗口的移动,和抽奖系统

一:什么是事件,事件在计算机中的原理?

事件的作用?

是js与网页的交互

(1) 事件流

冒泡流

IE

Nt浏览器

捕获流

IE10以上双兼容.

多个主流浏览器兼容

第二节

使用事件处理程序

1. HTML事件处理程序

2. DOM 0级事件处理程序

A:较传统的方式,把一个函数赋值,丢给一个事件处理程序的属性 (简单跨浏览器优势)

人话:先把一个对象取出来,然后再给这个对象添加一个属性,然后再后面干些事情,(接一个函数)

3. DOM2级处理事件

怎么没有1级? 没错,没有1级.

DOM2级事件定义了两个方法

用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

括号里面接受三个参数();

要处理的事件

作为事件处理的函数

布尔值: true代表捕获阶段调用函数 false代表冒泡阶段调用函数

注意IE不起作用,它有自己的处理方式

4. IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

原因IE8及更早的版本,只支持冒泡

这种写法不需要加上三个参数,因为它本身就是冒泡没得选择

当使用了IE事件以后,其它浏览器,不支持,当使用DOM2级事件处理的时候IE又失效.

5. 跨浏览器事件处理

最后一节

三大章 事件对象

什么是事件对象?在触发DOM时都会触发一个对象.

事件对象event

1. DOM中的事件对象

(1) type属性用于获取事件类型.

(2) target属性用于获取事件目标

(3) stopPropagation()方法 用于阻止事件冒泡

(4) preventDefault事件 阻止事件的默认行为

2. IE中事件对象

(1) type属性用于获取事件类型.

(2) srcElement属性,用于获取事件目标

(3) cancelBubble属性 阻止事件冒泡

设置为true取消冒泡 false不阻止冒泡