私人定制javascript事件处理机制，浅谈
看到园子里关于事件监听发表的文章，我都有点不好意思写了。不过想想我的题目以私人定制作开头也就妥妥地写吧。
事件相关概念
1.事件类型 发生事件的字符串
有传统事件类型 比如表单、window事件等
DOM事件类型
HTML5事件类型 drag、drop
触摸屏和移动设备事件类型 例如touchmove
2.事件目标 Window/Document/Element/XMLHttpRequest/...
3.事件对象 与特定事件相关且包含有关事件详细信息的对象 就是大家熟悉的event
4.事件传播 浏览器决定哪个对象触发其事件处理程序的过程 有冒泡阶段和处于阶段和捕获阶段
注册事件处理程序
1.设置事件目标的属性为所需事件处理程序函数
例如dom1.onclick=function(){/*....*/};
2.设置HTML标签属性为事件处理程序
例如
<p onclick='alert('我的小苹果');'/>
但实际javascript引擎做了如下加工:相当于将作用域前置了,表示对with理解不是很深。
function(event){
with(document){
with(this.form||{}){
with(this){
/*这里是编码*/
}
}
}
} 最后给出的建议是：建议js代码与html分开，因为这样才符合html与javascript各自的职责
事件处理程序的运行环境
1.通过属性注册处理程序时,例如e.onclick=function(){/**/} this 是指事件目标对象
2.对于attachEvent()此时的this指window对象 所以可以参考下列代码
function addEvent(target,type,handler)
{
if(target.addEventListener)
target.addEventListener(type,handler,false);
else
target.attachEvent("on"+type,
function(event){
return handler.call(target,event);
});
}事件处理程序的返回值
很多返回值为false的可以阻止浏览器默认操作，比如链接的跳转，如果return false可以阻止跳转
事件调用顺序
1.通过设置对象属性或HTML属性注册的处理程序一直优先调用
2.addEventListener()注册的处理程序按照它们的注册顺序调用
3.attachEvent()注册的处理程序可能按照任何顺序调用
谈到事件调用顺序，这里不得不说的就是
DOM2级事件规定事件包含三个阶段
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
此处借用http://www.cnblogs.com/yexiaochai/p/3567597.html的例子并膜拜其发现
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
#c { width: 200px; height: 200px; border: 1px solid red; }
#sub { width: 100px; height: 100px; border: 1px solid red; }
</style>
</head>
<body>
<div >
parent
<div >
child
</div>
</div>
<script type="text/javascript">
window.alert = function (msg) {
console.log(msg);
};
var p = document.getElementById('p'),
c = document.getElementById('c');
p.addEventListener('click', function (e) {
alert('父节点冒泡')
}, false);
c.addEventListener('click', function (e) {
alert('子节点捕获')
}, true);
c.addEventListener('click', function (e) {
alert('子节点冒泡')
}, false);
p.addEventListener('click', function (e) {
alert('父节点捕获')
}, true);
</script>
</body>
</html>结果如下
//父节点捕获
//子节点捕获
//子节点冒泡
//父节点冒泡
先按照DOM2执行但是如果到了2.处于阶段此时若绑定了捕获又绑定了冒泡那么按照注册顺序执行
所以如果是下列代码
p.addEventListener('click', function (e) {
alert('父节点冒泡')
}, false);
c.addEventListener('click', function (e) {
alert('子节点冒泡')
}, false);
c.addEventListener('click', function (e) {
alert('子节点捕获')
}, true);
p.addEventListener('click', function (e) {
alert('父节点捕获')
}, true);那么答案是多少呢？
//父节点捕获
//子节点冒泡
//子节点捕获
//父节点冒泡
鼠标事件
除了mouseenter和mouseleave外的所有鼠标事件都能冒泡
事件取消
通过事件对象(event)的preventDefault()/returnValue=false(IE)
事件对象的stopPropagation()可以在事件传播的任何时间调用，无论是捕获阶段、事件目标本身中和冒泡阶段
就是阻止事件的进一步传播，不管捕获也好还是冒泡也好
/cancelBubble=true(IE)只能取消冒泡事件传播
文档加载事件
当文档加载解析完毕且有所延迟(deferred)脚本执行完毕时会触发DOMContentLoaded事件，此时图片和异步(async)脚本
可能依旧在加载，但是文档已经为操作准备就绪了。
在IE中，每次状态改变都伴随着Document.readystatechange事件
那么document.readyState属性随着文档加载过程而变如果是complete则表示文档就绪
这里readystatechange执行顺序早于DOMContentLoaded早于load
但是readystatechange会多次轮询调用，我猜的没有验证。
文档准备就绪封装的函数
var whenReady = (function () {
var funcs = [];
var ready = false;
function handler(e) {
if (ready) return;
//此处是为了readystatechange事件做的判断，如果document.readyState === "complete"说明所有的文档准备就绪包括图片
//和外部请求的资源的那个
if (e.type === "readystatechange" && document.readyState !== "complete") {
return;
}
for (var i = 0; i < funcs.length; i++) {
funcs[i].call(document);
}
ready = true;
funcs = null;
};
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", handler, false);
document.addEventListener("readystatechange", handler, false);
window.addEventListener("load", handler, false);
}
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", handler);
window.attachEvent("onload", handler);
}
return function whenReady(f) {
if (ready) f.call(document);
else funcs.push(f);
}
}());
function fn() {
console.log("fn is exec");
}
document.addEventListener("DOMContentLoaded", fn, false);
whenReady(fn);结束语
事件处理调用机制，首先要了解3个阶段和一些常用的事件类型函数，毕竟前端js是事件驱动写法比较多，本人水平有限，如有错误，希望指出，如果对你有那么一点点帮助，请支持推荐一下。
