JavaScript基础之事件event

事件的组成

1. 事件源：产生时间的地方；
2. 事件类型：click等
3. 时间对象：event
4. 事件处理程序：函数

事件注册

意思就是把以后要发生的事进行提前报备，方式主要有两种：

1. html的属性：
   • 属性名： on+事件类型：onclick;
   • 属性值设定：
     • 直接在DOM元素上面设定：onclick = func(); //注意带括号
     • 先通过js获取元素对象，再设定：div1.onclick = func; //注意函数名不用带括号
     • 清除事件：div.onclick = null;
2. 通过调用系统方法addEventListener()注册；
   • 语法如下：注意，第一个参数不是onclick，第二个参数不带括号，第三个参数是捕获/冒泡，默认为false（冒泡） div1.addEventListener("click",func,false);
   • 优点是可以绑定多个方法；
   • 删除事件：参数与之前添加一致： div1.removeEventListener("click",func,false);
3. IE8使用attachEvent()和detachEvent;

事件的传播：

• 当多个标签嵌套时，父元素可以监听到子元素上面的事件：
• 默认条件下，点击页面某个标签，处在传播路径上的所有标签都能监听到事件；
• 传播路径：基本上就是嵌套路径；

事件流之捕获和冒泡：

-就像回声一样分为两个阶段，用addEventListener()的第三个参数来选择：

1. 捕获阶段（true）： 执行顺序从起始位置（如body）到目标位置；
2. 冒泡阶段（默认false）： 执行顺序从目标位置到起始位置；

• 终止冒泡的方法：

1. 有些事件本身就不会冒泡，比如一些键盘输入的事件；
2. 在函数中使用：e.stopPropagation();

事件代理

• 有些情况下，比如ul下的li的数量是动态的，就很难给每个li绑定事件，这是就需要利用冒泡特性，在父级ul上绑定事件，同时监听li上的事件，这就叫做事件代理；
• 通过e.target可以获取到具体是哪个子元素触发了事件；