js事件操作

常用事件分类：

onload（网页加载完）

onclick（点击）　　onmouseover（鼠标放上）　　onmouseout（鼠标移开）　　onmousemove(鼠标移动)　　ondblclick（鼠标双击）　　

onmousedown:      鼠标按下去的时候发生（注意此时鼠标还没有抬起来）

onmouseup:          鼠标抬起来的时候发生

表单事件：

                   onsubmit :        当一个表单正要“提交”的时候发生

                   onfocus:            当一个表单项“获得焦点”的时候发生。

                   onblur:               当一个表单项“失去焦点”的时候发生

                   onchange:        当一个表单项的数据发生改变的时候——通常只用于select标签的选项改变。

键盘事件：

　　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（IE是event.srcElement）