标签：utils range document function 事件 content 事件处理 目标 自己的
js事件事件理解
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js事件流模型</title> </head> <style> #con{ width:200px; height:200px; background: orange; } #outer{ position: relative; top: 50px; left: 50px; width:100px; height:100px; background: #eeddff; } #inner{ position: relative; top: 251px; left: 25px; width:50px; height:50px; background: #44ddff; } </style> <body> <div id="con"> con <div id="outer"> outer <div id="inner">inner</div> </div> </div> <script> </script> </body> </html>
1.执行顺序
document->html->body-con->outer->ineer->outer->con->body->html->document
2.响应某个时间的函数叫做事件处理程序
function fnHandler(){
}
<script>
// js事件流
// 事件添加
var con = document.getElementById(‘con‘);
// con.addEventListener(‘click‘,function(){
// alert(‘123‘);
// });
// con.addEventListener(‘click‘,function(){
// alert(‘123‘);
// },false);
// con.addEventListener(‘click‘,function(){
// alert(‘123‘);
// },true);
// DOM事件流
// DOM2级事件规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
// DOM2级事件定义了两个方法addEventListener()和removeEventListener()
// IE不同的它有自己的方法attachEvent()和detachEvent
var eventUtils = {
// addEventHandler:function(){}
addEventHandler: function(el,event,fnHandler){
// console.log(‘test‘);
if(el.addEventListener){
console.log(el.addEventListener);
el.addEventListener(event,fnHandler,true)
}
else{
console.log(el.attachEvent);
el.attachEvent(‘on‘+event,fnHandler)}
},
removeEventHandler: function(el,event,fnHandler){
// console.log(‘test‘);
if(el.removeEventListener){
console.log(el.removeEventListener);
el.removeEventListener(event,fnHandler,true)
}
else{
console.log(el.detachEvent);
el.detachEvent(‘on‘+event,fnHandler)}
}
}
eventUtils.addEventHandler(con,‘click‘,function(){
alert(‘123‘);
});
</script>
标签：utils range document function 事件 content 事件处理 目标 自己的
原文地址：http://www.cnblogs.com/alan-alan/p/7481697.html
