dom事件

//在html的元素里添加操作(js函数)，导致修改的时候要修改两处地方
//所以将html和js函数处理分开，html里不添加onclick=function(){}的方法

//dom 0级处理添加事件
var j =document.getElementById('btn');
j.onclick=function(){}

//dom 2级处理添加事件
var j=document.getElementById('btn');
j.addEventListener(type,function(){},false);

/*
type是指触发的事件，注意任何有'on'都要去掉，即onclick变成click
function是触发后的操作
false这个参数是布尔值，一般在支持捕获事件流的浏览器里都用的是false这值
*/

IE 浏览器添加事件
var j=document.getElementById('btn');
j.attachEvent(type,function(){});

/*
type和dom 2级的处理不同，必须都要有'on' 比如onclick
function(){}触发后的操作
*/

跨不同浏览器处理
var eventUtil={
//添加句柄，封装在addHandler
addHandler:function(element,type,handler){
   if(element.addEventListener){
       element.addEventListener(type,handler,false);
   }
  else if(element.attachEvent){
       element.attachEvent('on'+type,handler);
   }
   else{
       element['on'+type]=handler;
    }
}
//删除句柄也相同道理，不细写。
}
/*
type 都是去掉on，click，mouseover之类的，处理IE浏览器时把on加上
element是变量，后边不能用.连接字符串，但.和[]的作用是一样的，这时用[]来连接

 

 

dom 事件对象(IE浏览器不支持)

事件目标 target

事件类型 type

 

 IE10版本之前的浏览器不支持document.getElementByClassName()函数

整个页面用document表示

 

 

举例

拖动QQ面板移动

获取QQ面板的对象，设为oTitle