- 什么是事件
- 掌握事件流
- 掌握DOM事件流與IE事件處理程序
- 掌握跨瀏覽器的事件處理程序
- 掌握event對象的常用屬性及方法
- 掌握常用的事件類型
事件
事件是可以被JavaScript偵測到的行為,通俗的講就是當用戶與Web頁面進行某些交互時,解釋器就會創(chuàng)建響應的event對象以描述事件信息
事件定義
一共有三種方式:
- 直接在HTML中定義元素的事件相關屬性
缺點:違反了內(nèi)容與行為相分離的原則,應盡可能少用
<button onclick=alert('hello')>按鈕</button>
- DOM0級事件,在JS中為元素的事件相關屬性賦值
此語法實現(xiàn)了內(nèi)容與行為相分離,但元素扔只能綁定一個監(jiān)聽函數(shù)
document.getElementById('btn').onclick = function(){
//...
}
document.body.onload = init;
function init(){
//...
}
- DOM2級事件,高級事件處理方式,一個事件可以綁定多個監(jiān)聽函數(shù)
此語法可以為一個元素綁定多個監(jiān)聽函數(shù),但需要注意瀏覽器兼容性問題
參數(shù) : 事件類型 事件句柄 false冒泡(默認false)/true捕獲
btn.addEventListener('click',function(){
//...
},false)
btn.addEventListener('click',function(){},flase); //DOM
btn.attachEvent('onclick',function(){}); //IE
document.body.addEventListener('load',init);
document.body.attachEvent('onload',init);
function init(){
//...
}
1.html中定義,html中寫js代碼,強耦合,不利于復用代碼
2.DOM0級事件,事件對象的屬性添加綁定事件,松耦合,缺點是有且只有一個事件句柄
3.DOM2級事件,通過addEventListener函數(shù)綁定事件,松耦合,綁定多個事件,事件捕獲和事件冒泡
事件解綁
移除addEventListener()方法添加的事件句柄
element.removeEventListener(event,function,useCapture)
參數(shù):
event : 必須,字符串,要移除的事件名稱
function : 必須,指定要移除的函數(shù)
useCapture : 可選,布爾值,指定移除事件句柄的階段
var fun = function(){ //解綁成功需要將事件句柄定義
//...
}
btn.removeEventListener('click',fun,false)
解綁成功要保證參數(shù)一致
IE事件流
添加事件
用于IE8以及以下的瀏覽器
attachEvent()
語法 : element.attachEvent(event,function)
功能 : 用于向指定元素添加事件句柄
參數(shù) : event事件名,必須加'on'前綴
function綁定事件的函數(shù)
移除事件
detachEvent()
同上
跨瀏覽器事件處理程序
事件句柄中,IE中的事件句柄 this是指向window
<button id="mybtn">點擊我</button>
<script>
//兼容所有瀏覽器
//addEventListener attachEvent
var eventUtil = {
addHandler : function(element,type,handler){
//綁定事件
//chrome,firefox,ie9等
//ie8及以下瀏覽器
if (element.addEventListener) {
element.addEventListener(type,handler,false);
}else if (element.attachEvent) {
element.attachEvent('on'+type,handler);
}else{
element['on'+type] = null;
}
},
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
}
}
}
var btn = document.getElementById('mybtn');
var handler = function(){
alert('clicked');
}
eventUtil.addHandler(btn,'click',handler);
// eventUtil.removeHandler(btn,'click',handler);
</script>
事件冒泡和事件捕獲
事件周期
解釋器創(chuàng)建一個event對象后,會按如下過程將其在html元素間進行傳播:
第一階段 : 事件捕獲,事件對象沿DOM樹向下傳播
第二階段 : 目標觸發(fā),運行事件監(jiān)聽函數(shù)
第三階段 : 事件冒泡,事件沿DOM樹向上傳播
IE的事件模型中沒有事件捕獲階段
事件周期
<div id="parent">
<div id="child">click son</div>
</div>
<script>
//事件冒泡
document.getElementById('parent').addEventListener('click',function(e){
alert('parent事件觸發(fā),'+this.id)
},false);
document.getElementById('child').addEventListener('click',function(e){
alert('child事件觸發(fā),'+this.id)
},false);
//點擊后 child事件觸發(fā) parent事件觸發(fā)
//事件捕獲
document.getElementById('parent').addEventListener('click',function(e){
alert('parent事件觸發(fā),'+this.id)
},true);
document.getElementById('child').addEventListener('click',function(e){
alert('child事件觸發(fā),'+this.id)
},true);
//點擊后 parent事件觸發(fā) child事件觸發(fā)
</script>
事件委托(原理是事件冒泡)
<div id="parent">
<div id="child">click son</div>
</div>
<ul id="ul">
<li class="theli">1</li>
<li class="theli2">2</li>
<li class="theli3">3</li>
<li class="theli4">4</li>
<li class="theli5">5</li>
</ul>
<script>
var ul = document.getElementById('ul');
ul.addEventListener('click',function(){
alert(event.target.className)
})
</script>
event
event對象常用屬性和方法
- type : 事件的類型
- srcElement/target : 事件源,就是發(fā)生事件的元素;
- cancelBubble : 布爾屬性,設為true的時候,將停止事件進一步氣泡到包容層次的元素
(e.cancelBubble = true相當于e.stopPropagation()) - returnValue : 布爾屬性,設置為false的時候可以阻止瀏覽器執(zhí)行默認的事件動作
(e.returnValue = false相當于e.preventDefault()) - event.clientY,pageY,screenY : 瀏覽器頂部底邊到鼠標位置(不包括滾動軸的距離) 瀏覽器頂部底邊到鼠標位置(包括滾動軸) 屏幕頂部底邊到鼠標位置
var btn = document.getElementById('child');
btn.addEventListener('click',function(e){
alert(e.type) //click
})
var parent = document.getElementById('parent');
parent.addEventListener('click',function(event){
console.log(event.target); //點擊誰誰就是target
console.log(event.currentTarget); //事件綁定在誰身上,就指向誰
})
*srcElement,cancelBubble,returnValue是IE的屬性 *
事件類型
- onclick : 點擊
- onfocus : 元素獲得焦點
- onblur : 元素失去焦點
- onmouseover : 鼠標移到某元素紙上
- onmouseout : 鼠標從某元素移開
- onmousedown : 鼠標按鈕被按下
- onmousemove : 鼠標被移動
- onmouseup : 鼠標按鍵被松開
UI事件
- load : 當頁面完全加載后在window上面觸發(fā)
EventUtil.addHandler(window,'load',function(e){
alert('loaded');
});
//圖片預加載
var image = new Image();
EventUtil.addHandler(image,'load',function(event){
alert('image loaded');
})
- resize : 窗口大小發(fā)生變化時觸發(fā)
- scroll : 窗口發(fā)生滾動時觸發(fā)
焦點事件
- blur : 元素失去焦點的時候觸發(fā)
- focus : 元素獲得焦點的時候觸發(fā)(不支持冒泡)
- focusin : 元素獲得焦點的時候觸發(fā),支持事件瀏覽器是IE5.5...支持冒泡
- focusout : 元素失去焦點的時候觸發(fā),支持事件瀏覽器是IE5.5...支持冒泡
鼠標事件
- click : 點擊
- dblclick : 雙擊
- mousedown : 鼠標按下時觸發(fā)的事件
- mouseup : 鼠標松開時觸發(fā)的事件
- mousemove : 鼠標移動時觸發(fā)的事件
- mouseout : 進入目標元素觸發(fā)(目標元素與其子元素都會執(zhí)行)
- mouseover : 離開目標元素觸發(fā)(目標元素與其子元素都會執(zhí)行)
- mouseenter : 只能進入目標元素觸發(fā)
- mouseleave : 只能離開目標元素觸發(fā)
鍵盤事件
- keydown
var myText = document.getElementById('myText');
//鍵碼,任意鍵觸發(fā)
EventUtil.addHandler(myText,'keydown',function(event){
console.log(event.keyCode);
})
- keyup
- keypress : 按下字符鍵
- textInput : 輸入信息時觸發(fā)
EventUtil.addHandler(myText,'textInput',function(event){
console.log(event.data);
})
- DOMContentLoaded : 在DOM樹之后觸發(fā),快于load
移動端事件類型
- 手指觸摸屏幕時觸發(fā)
EventUtil.addHandler(myBtn,'touchstart',function(event){
console.log('當前觸摸屏幕的觸摸點數(shù)組' + event.touches);
console.log('數(shù)組中只包含引起事件的觸摸點信息' + event.changedTouches);
console.log('只包含放在元素上的觸摸信息' + event.targetTouches);
})
- 手指在屏幕上滑動時觸發(fā)
EventUtil.addHandler(myBtn,'touchmove',function(event){
console.log(123456789);
})
- 手指從屏幕上移開時觸發(fā)
EventUtil.addHandler(myBtn,'touchend',function(event){
console.log(123456789);
})
