首页 > 代码库 > js事件操作

js事件操作

常用事件分类:

  onclick(点击)  onmouseover(鼠标放上)  onmouseout(鼠标移开)  onfocus(获得焦点)  onblur(失去焦点)  onload(网页加载完)   ondblclick(鼠标双击)  onkeydown(键盘按下)  onkeyup(键盘抬起)  onkeypress(按下并抬起)

 

DOM0级事件设置方式:

  a)         <input  onclick=”alert(this)”>  this指引当前input框

  b)        <input  onclick=”fn()”>   fn内部的this指引window对象

  c)         it.onclick=fn                       fn内部this指引input框对象 

  d)        it[‘onclick’] = fn          fn内部this指引input框对象

缺陷:1、未能为一个对象设置多个相同的事件,例如onclick事件。  2、不能取消事件

 

DOM2级事件设置方式

  addEventListener(事件类型,处理,捕捉冒泡);  //冒泡(从里到外,从最里面的元素)捕捉(从外到里,从最外面最大的元素)

  dom.addEventListener(‘click‘,function(){alert(‘div bei dianji‘)},false);  设置事件绑定

  dom.removeEventLinstener(‘click‘,f1,false);  移除事件绑定,不能解除匿名函数的事件绑定

 

在IE里边有自己的事件绑定方法

  a)         attachEvent(类型, 处理)   绑定事件   

  b)        detachEvent(类型, 处理)   解除绑定

  c)         类型必须有on标志

  d)        没有第三个参数,事件流就是“冒泡型”

 

绑定事件的兼容处理

function addHandler(obj,tp,fn){        //判断浏览器类型        //查看obj对象本身有何属性,即可判断浏览器类型        if(obj.addEventListener){            //主流浏览器            obj.addEventListener(tp,fn,false);        } else if (obj.attachEvent){            //IE浏览器            obj.attachEvent("on"+tp,fn);        } else {            obj["on"+tp] = fn;        }    }    function removeHandler(obj,tp,fn){        if(obj.removeEventListener){            //主流浏览器            obj.removeEventListener(tp,fn,false);        } else if (obj.detachEvent){            //IE浏览器            obj.detachEvent("on"+tp,fn);        } else {            obj["on"+tp] = null;        }    }

  

事件对象event

  a)         键盘事件,需要知道哪个键盘被按下

  b)        鼠标事件,我们可能需要知道鼠标当前的位置

  c)         事件流,冒泡型,确定事件对象目标

  d)        需要借助事件对象获得以上信息

  e)         获得事件对象:

 

function(evt){}是主浏览器获得事件对象的固定用法

window.event  IE浏览器的事件对象是window对象下的一个属性

//获取event对象的兼容处理dom.onclick = function(evt){        //console.log(event);        var event = evt ? evt : window.event;        alert(event);        alert("abc");    }

获取事件发生时鼠标的位置:event.clientX和event.clicentY;获取事件发生时按下的键:event.keyCode;获取触发事件的dom对象:event.target