Doctype(文档类型)
浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。
包含混杂模式和标准模式
- 标准模式(standards mode):浏览器根据标准规约来渲染页面。
- 混杂模式(quirks mode):浏览器采用更加宽松的、向后兼容的方式来渲染页面。默认模式
事件
事件流
- 事件冒泡:事件开始由最具体的元素接收,然后逐级向上传播。支持性良好,兼容早期版本
- 事件捕获:不太具体的节点更早接收事件,而最具体的节点最后接收事件。新版本浏览器支持,建议优先使用事件冒泡
- 事件流:事件捕获阶段、目标阶段、冒泡阶段
事件处理程序
- DOM0级:btn.onClick = fn
- DOM2级:btn.addEventListener('click', fn, boolean), false表示冒泡阶段执行,true表示捕获阶段执行。btn.removeEventListener('click', fn, boolean), 移除事件处理, fn必须是同一个函数引用
- IE事件处理:btn.attachEvent('onClick', fn), btn.dettachEvent('onClick', fn)
跨浏览器的事件处理
var EventUtil = {
//添加事件监听
addHandler: function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, fn, false)
} else if (element.attachEvent){
element.attachEvent("on" + type, handler)
} else {
element["on"+type] = handler
}
},
// 移除事件监听
removeHandler: function(element, type, handler){
if(element.removeEventListener){
element.removeEventListener(type, handler, false)
} else if (element.detachEvent){
element.detachEvent("on"+type, handler)
} else {
element["on"+type] = handler
}
},
// 获取事件本身
getEvent: function(event){
return event || window.event
},
// 获取目标元素
getTarget: function(event){
return event.target || event.srcElement
},
// 阻止默认事件
prevenDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false
}
},
// 阻止事件冒泡
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
网友评论