javascript-事件處理

標籤：處理   type   use   span   onload   onclick   html   dha   btn   

前言：

click,load,mouseover都是事件的名字

而onclick,onload,onmouseover則是響應事件的事件處理常式

 

javascript事件處理有以下幾種處理方式

1.HTML事件處理常式　　

　　<input type=‘button‘ value=‘點擊我‘ onclick=‘alert(‘啊！被你擊中了‘)‘/>

2.Dom0級事件處理常式

　　<input type=‘button‘ value=‘點擊我‘ id=‘myBtn‘/>

　　var btn =document.getElementById(‘myBtn‘);

　　btn.onclick=function(){

　　　　alert(‘啊！再次被擊中了，這次是Dom0事件‘);

　　}

3.Dom1級事件處理常式

　　沒有！！！直接就是Dom2,鬼知道為什麼。

3（真正的第3種）Dom2級事件處理常式

　　<input type=‘button‘ value=‘點擊我‘ id=‘myBtn‘/>　　

　　var btn =document.getElementById(‘myBtn‘);

　　btn.addEventListener(‘click‘,function(){

　　alert(‘第三次被擊中，Dom2放學別走‘)；

　　},false)；

　　false:代表將事件處理常式添加到事件流的冒泡階段，可以最大程度的相容瀏覽器。

　　如果要刪除該事件處理常式，則調用

　　btn.removeEventListener(‘click‘,function(){

　　alert(‘第三次被擊中，Dom2放學別走‘)；

　　},false)；

　　上面的addEventListener()和removeEventListener()函數，第二個參數看似一樣，實則是兩個不同的匿名函數。要解決這個問題，則需要

　　var handler=function(){

　　alert(‘第三次被擊中，Dom2放學別走‘)；

　　}

　　btn.addEventListener(‘click‘,handler,false);

　　btn.removeEventListener(‘click‘,handler,false);

4.IE事件處理常式

　　由於我們IE瀏覽器逆天的不相容性，IE自己造了兩個事件處理常式函數。

　　<input type=‘button‘ value=‘點擊我‘ id=‘myBtn‘/>　　

　　var btn =document.getElementById(‘myBtn‘);

　　var handler=function(){

　　alert(‘第三次被擊中，Dom2放學別走‘)；

　　}

　　btn.attachEvent(‘oncick‘,handler);

　　刪除事件操作

　　btn.detachEvent(‘onclick‘,handler);

5.前方高能，大Boss來襲..

　　　為瞭解決跨瀏覽器的問題，而不是在項目裡面一下子使用DOM事件處理常式，一下子是IE事件處理常式

　　　我們寫一個對象 EventUtil,對象字面量法為其添加屬性，寫完它之後，跨瀏覽器就可以一勞永逸。

　　　var EventUtil = {

　　　　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;

　　　　　　　　}

　　　　removeHandler:function(element,type,handler){

　　　　　　　　if(element.removeEventListener){

　　　　　　　　　　element.removeEventListener(type,handler,false);

　　　　　　　　}else if(element.detachEvent){

　　　　　　　　　　element.detachEvent(‘on‘+type,handler);

　　　　　　　　}else{

　　　　　　　　　　element[‘on‘+type]=null;

　　　　　　　　}

          }

 

6.跨瀏覽器的事件對象

前面介紹的是跨瀏覽器事件處理常式

接下來要介紹的跨瀏覽器事件對象，IE中event對象的全部資訊和方法Dom對象中都有,但是實現方式不一樣。

還是剛才的那個對象EventUtil

var EventUtil={

　　getEvent:function(event){

　　　　return event?event:window.event;

　　},

　　getTarget:function(event){

　　　　return  event.target||event.srcElement;

　　},

　　preventDefault:function(event){

　　　　　if(event.preventDefault){

　　　　　　event.preventDefault();

　　　　　}else{

　　　　　　event.returnValue=false;

　　　　　}

}

　　　　

 

　　

javascript-事件處理