常用事件分类:
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