收获到了什么?
1. JavaScript的事件流 ―― 冒泡流和捕获流
- 冒泡流：从子元素到父元素的传递过程，由内向
- 捕获流：从父元素到子元素的传递过程，与冒泡流相反 （不常用）
2. JavaScript的事件处理程序
- HTML处理：事件以及事件处理程序直接写在HTML文档里
示例：
<button onclick="alert("Hello World!")">按钮</button>
- 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登陆框做出来
