一、事件（所有事件都是用的小写）

交互是你对页面动一下，页面给一个反馈

1. 何为事件 —— 就是一个动作，没效果也是事件
2. 重要吗？—— 交互体验的核心功能

演示 demo — 拖拽，和点击

二、如何绑定事件

1、ele.onxxx = function (event) {}

1）兼容性很好，但是一个元素只能绑定一个事件处理程序

div.onclick = function(){}

div.onclicck 就叫做可以被点击的事件（绑定事件类型），function(){}是反馈，一旦事件被触发，就要执行 function 里面的函数（绑定的是一个事件处理函数）

2）基本等同于写在 HTML 行间上，如下图

οnclick=”consolo.log(‘a’)”是句柄的绑定方式，写在行间不用写 function(){}

2、ele.addEventListener(type, fn, false);里面可以填三个参数

IE9 以下不兼容，可以为一个事件绑定多个处理程序

div.addEventListener（’事件类型’，处理函数，false）

div.addEventListener（‘click’，function(){}，false）
function(){} 是函数引用，和外面定义一个 function test(){}直接写 test 是一样的

事件有一个事件监听机制

一个事件绑定了两个处理函数。

若 console.log 两个都是(‘a‘)打印出来是两个 a。这是两个处理函数，是两个地址

下面只执行一个 a。下面和上面的结果是不一样的。这种写法是一个地址，一个人

ele.addEventListener 不能给同一个函数绑定多次，重复的绑定一个函数就不能用了

3、ele.attachEvent(‘on’ + type, fn);

IE 独有，一个事件同样可以绑定多个处理程序，同一个函数绑定多次都可以

div.attachEvent(‘on’ + 事件类型，处理函数);
div.attachEvent(‘onclick’ ，function（）{});

想给三个 li 都绑定这个事件

绑定事件出现在循环里面（用到 i），考虑是否形成闭包，用立即执行函数来写

三、事件处理程序的运行环境