js中的事件物件和新增事件
阿新 • • 發佈:2019-01-09
//這裡只是適用於非ie 瀏覽器,ie瀏覽器的event物件和別的瀏覽器不一樣
switch(ev.target.id){
case "box1":
alert("box1");
break;
case "box2":
alert("box2");
break;
case "box3":
alert("box3");
break;
}
}
2.事件繫結的方法:
1.行內繫結:直接在元素上寫事件處理e.g:<input type="button" name="" onclick="alert('sssss')" /> ,當然,onclick的事件處理也可以寫成一個function,在onclick中呼叫 2.在js中獲取元素新增事件處理,e.g:elem.onclick=function(){},同樣這個function也可以不是匿名的.
3.(ie9+)在js中使用elem.addEventListener(事件名字(不需要on),事件處理函式,false代表在冒泡階段處理,true表示在捕獲階段處理)這個方法(當然從處理事件的方式上就可以看出第一種並不是一種好方法,它的耦合性太高,而且會出現載入順序問題)
(注:在新增事件處理的時候要注意確保頁面載入完畢,至少觸發事件的元素載入完畢,要不然就無法獲取元素也就無法觸發事件 )
(在ie8-也有類似的事件處理方法attachEvent("on事件名",function),事件名字前面必須要加on,預設冒泡捕獲所以不需要第三個引數,有一個注意點就是
在這個方法中的this並不是指向呼叫它的元素物件,而是window)
3.刪除事件處理:
1.將事件處理賦值為null,等待回收機制自己處理,如elem.onclick=null,
2.使用addEventListener()新增的事件要確保不能使用匿名函式,如果你想要刪除事件的話,使用removeEventListener(事件名,function,和add時候一樣)
在這裡如果使用的是匿名函式是無法刪除的因為兩個匿名函式不是同一個,即使內容相同 .ie8-用detachEvent(),注意點和上面相同 4.事件屬性:
1.bubbles:表示事件是否冒泡 2.cancelable:表示是否有預設事件 3.preventDefault():當cancelable為true的時候可以使用這個來阻止預設事件 4.stopPropagation():當bubbles為true的時候可以用來阻止冒泡 5.target:表示事件的目標 6.currentTarget:表示新增事件的目標 (this等於currentTarget,但是不一定等於target,要是事件繫結在祖先元素上,那麼currentTarget等於祖先元素,
而target等於你觸發的元素),舉個例子:
document.body.onclick=function(ev){
ev.currentTarget===this;//true
ev.target==this;//不一定,要是點選的是body元素那就等,要是點選的是子孫元素那target就等於子孫元素,而this還是
指的是document.body
}
7.ie中阻止預設事件是使用returnValue=false
8.ie中阻止冒泡使用cancelBubble=true
9.ie中的目標事件是srcElement
5.阻止預設事件就是阻止系統自帶的事件如點選含有href屬性的a元素會跳轉,點選submit按鈕會提交表單重新整理頁面,這些都是系統自帶,
6.在ie中使用dom0級方法新增的事件event是window的屬性,使用attachEvent()新增的事件event才是引數參入