2017-7-18

收获到了什么?

1. JavaScript的事件流 ―― 冒泡流和捕获流

• 冒泡流：从子元素到父元素的传递过程，由内向
• 捕获流：从父元素到子元素的传递过程，与冒泡流相反 （不常用）

2. JavaScript的事件处理程序

• HTML处理：事件以及事件处理程序直接写在HTML文档里

示例：按钮

• DOM 0级：获取元素，把事件写在JavaScript页面里

示例：
element.onclick = function(){
alert("Hello World");
}

• DOM 2级：addEventListener()添加事件，removeEventListener()删除事件

示例：
element.addEventListener("事件名",函数,布尔值) 布尔值等于true，为捕获流，等于false，为冒泡流

• 跨浏览器事件处理程序：创建一个EventUtil对象，为这个对象添加方法，为方法封装一个函数。 方法主要解决事件在主流浏览器和IE8之间的兼容性。比如刚才的addEventListener()事件，主流的浏览器支持，但是IE8浏览器不支持，所以这时候就要通过别的方法来代替这个方法，IE8只支持attachEvent()方法，但是主流浏览器不支持这个方法，这个时候在事件执行之前，要对浏览器进行一个判断，判断该使用哪个方法去执行事件。

示例：
var EventUtil = {
addListener:function(element,type,hanler){
if(element.addEventListener){
element.addEventListener(type,hanler,false);
}else{
elemennt.attachEvent('on' + type,hanler);
}
}
}
调用方法：
EventUtil.addListener(元素,'事件名','执行函数')

3. 事件对象方法

• 主流浏览器：

  • 阻止冒泡 stopPropagation()
  • 阻止默认行为 preventDefault()
  • 事件的类型 type
  • 事件的目标 target

• IE8：

  • 阻止冒泡 cancelBubble
  • 阻止默认行为 returnValue = false
  • 事件的类型 type
  • 事件的目标 srcElement

示例：
var EventUtil = {
stop:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble;
}
}
}
调用方法:
function(event){
EventUtil.stop(evet);
}

对于今天收获的想法？

• 很新奇，有兴趣继续学下去

明天的打算？

• 复习昨天学习的内容
• 跟着教程把可以拖动的QQ登陆框做出来