javascript事件

1，在触发DOM上的某个事件时，会在事件处理程序函数中会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

2，再来看看IE中的事件对象 。event对象作为window对象的一个熟悉存在。

************************************************************************************************************************************

event.type属性表示事件类型。 

event的属性currentTarget意思是事件处理程序当前正在处理事件的那个元素，target意思是事件的目标。在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。看个例子：

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert(event.currentTarget ===this);//true
    alert(event.target ===this);//true
};

 

把事件处理程序直接指定给目标元素btn，则this、currentTarget和target包含相同的值。如果把事件处理程序注册在btn的父节点上（例如document.body），那么：

document.body.onclick =function(envent) {
    alert(event.currentTarget === document.body);//true
    alert(this ===document.body);//true
    alert(event.target === document.getElementById("myBtn"));//true
};

 

target元素等于btn元素，因为它是click事件真正的目标，由于没有注册事件处理程序，结果click冒泡到document.body上，在那里事件得到了处理。

一个函数处理多个事件：

var btn = document.getElementById("myBtn");
var handler = function(event) {
    switch(event.type) {
        case "click":
            alert("Clicked");
            break;
        case "mouseover":
            event.target.style.backgroundColor ="blue";
            break;
        case "mouseout":
            event.target.style.backgroundColor ="red";
            break;
    }
};
btn.onclick= handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

 

event有个preventDefault()方法，阻止特定事件的默认行为。

event.stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。例如：

 

var btn =document.getElementById("myBtn"); btn.onclick = function(event) {alert("Clicked"); event.stopPropagation(); }; document.body.onclick =function(event) { alert("Body Clicked"); };

 

如果不调用event.stopPropagation()，就会出现两个警告框。可是调用了这个方法后，click事件不会传播到document.body，因此就不会触发这个元素上的onclick事件处理程序。

************************************************************************************************************************************

ie：window.event

标准下：event

 

 

跨浏览器的事件对象

var EventUtil = {
    getEvent: function(event) {
        returnevent ?event : window.event;
    },

getTarget: function(event) {
        return event.target ||event.srcElement;  //target是Firefox下的属性srcElement是IE下的属性，Crome浏览器同时有这两个属性
    },

preventDefault: fuction(event) {//window.event.returnValue属性相当于DOM中的preventDefault()方法
        if(event.preventDefaule()){
            event.preventDefaule();
        } else {
            event.returnValue =false;
        }
    },

stopPropagation: function(event) {  //window.event.cancelBubble属性与DOM中的stopPropagation()方法作用相同，都是用来停止事件冒泡的。

 //由于IE不支持事件捕获，因而只能取消事件冒泡，但stopPropagation（）可以同时支持事件捕获和冒泡。

 

        if(event.stopPropagation()) {
            event.stopPropagation();
        } else {
            event.cancelBubble =true;
        }
    }
};

btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);//等等
}

*****************

事件委托

如果事件处理程序过多，会占用内存，导致性能变差。解决办法是用事件委托。就是制定一个事件处理程序，管理某一类型的所有事件。例如：click事件会一直冒泡到document层次，就是说我们可以为整个页面制定一个onclick事件处理程序，而不必为每个单击的元素分别添加事件处理程序。例如：

<ul id="lists">
    <li id="goSomewhere">Go</li>
    <li id="doSomething">Do</li>
    <li id="sayHi">Hi</li>
</ul>

var item1 =document.getElementById("goSomewhere");
var item2= document.getElementById("doSomething");
var item3= document.getElementById("sayHi");

EventUtil.addHandler(item1,"click",function(event) {
    location.href = "http://www.google.com";
});
EventUtil.addHandler(item2, "click",function(event) {
    alert("Me");
});
EventUtil.addHandler(item3, "click",function(event) {
    alert("Hi");
});

 

如果在一个复杂的web应用程序中都使用这种方式，那就会有无数的代码添加事件处理程序，然而可以事件委托技术解决，就是在DOM树的尽量最高的层次添加一个事件处理程序：

var list = document.getElementById("lists");
EventUtil.addHandler(list,"click",function(event) {
    event =EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

switch(target.id) {
        case"goSomewhere":
            location.href = "http://www.google.com";
            break;
        case"doSomething":
            alert("Me");
            break;
        case"sayHi":
            alert("Hi");
            break;
    }
});

 

把事件委托给目标的父元素或者祖先元素，在ul添加添加一个onclick事件处理程序，由于所有目标元素都是这个元素的子节点，而且他们也会过得一个onclick事件，由于事件会冒泡，所以点击事件最终会被ul元素的处理事件程序处理。采用事件委托技术只添加了一个事件处理程序，占用的内存更少。

 

移除事件处理程序，在不需要的时候移除，也能提高性能，如果内存中留有那些过时不用的空事件处理程序，会造成内存和性能问题。

我们一般会用removeChild()和replaceChild()方法，但更多的是发生在使用innerHTML替换页面中的某一部分，如果把带有事件处理程序的元素用innerHTML替代原先的内容，那么原先添加到元素中的事件处理程序可能无法被当做垃圾回收。例子：

<divid="myDiv">
    <input type="button"value="Click me"id="myBtn">
</div>
<scripttype="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function() {
        //执行某些任务
        document.getElementById("myDiv").innerHTML="Changing...";
    }
</script>

 

点击按钮就将按钮移除并替换成一个消息，在开发中很流行，但问题是，当按钮被从页面中移除时，它还带着一个事件处理程序。设置innerHTML可以把按钮移走，但事件处理程序仍然与按钮保持着引用关系，那么有些浏览器可能会把元素对事件处理程序的引用保存在内存中，生成了空事件处理程序，如果你知道某个事件即将被移除，那么最好手工处理：

<divid="myDiv">
    <input type="button"value="Click me"id="myBtn">
</div>
<scripttype="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function() {
        //执行某些任务
        btn.onclick = null;//移除事件处理程序
        document.getElementById("myDiv").innerHTML="Changing...";
    }
</script>

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果

event 对象：事件源：不管在哪个事件中，只要你操作的那个元素就是事件源

ie：window.event.srcElement 标准下：event.target

nodeName:找到当前元素的标签名称

例子：如果想让ul下的li移入后变背景色

老方法：遍历ul下的li然后给li添加事件，但是如果新增加了li，新增加的li的事件就没有绑定上

下面是新方法

oUl.onmouseover=function(ev){

var ev=ev||window.event;

var target=ev.target||ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase()=='li'){

target.style.background='red';}

};

好处：

1，提高性能

2，新添加的元素，还会有之前的事件

//冒泡 例：页面有select 点别的地方自动收起来

window.onload=function()

{

var oBtn=document.getElementById('btn1');

var oDiv=document.getElementById('div1');

oBtn.onclick=function(ev)

{

var oEvent=ev||event;

oDiv.style.display='block';

oEvent.cancelBubble=true;

};

document.onclick=function()

{

oDiv.style.display='none';

}

}

***********************************************************************

事件绑定

IE

 

oBtn.attachEvent('onclick',function(){

alert(this==window); //true

});

oBtn.attachEvent('onclick',b);

解决this问题用call

事件解绑定：detachEvent(事件名称，函数)

DOM

oBtn.addEventListener('click',function(){

 alert(this==window) //false

},false);

oBtn.addEventListener('click',b,false);

解决this问题用call

解除绑定：removeEventListener(事件名称，函数，捕获)

functionmyAddEvent(obj, sEv, fn) {

    if (obj.attachEvent) {

        obj.attachEvent('on' + sEv, function (){

            fn.call(obj);

        });

    }

    else {

        obj.addEventListener(sEv, fn, false);

    }

}