如何綁定事件處理函數(shù)
1.ele.onxxx = function(event){}
兼容性很好矿卑，但是一個元素的同一個事件上只能綁定一個處理函數(shù)尚镰，基本等同于寫在HTML行間上
<div style ="width:100px;height:100px;
background-color:red;" onclick ="console.log('a')">
</div>這是行間 等同于于下面的
var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
console.log('a');
}
2.obj.addEventListener(type, fn, false);
IE9以下不兼容院仿，可以為一個事件綁定多個處理程序
div.addEventListener('click', function(){
console.log('a');
},false);
div.addEventListener('click', function(){
console.log('b');
},false); a,b
3.obj.attachEvent('on' + type, fn);
IE獨有，一個事件同樣可以綁定多個處理程序
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
var liCol = document.getElementsByTagName('li'),
len = liCol.length;
for(var i = 0; i<len; i++){
(function(i){
liCol[i].addEventListener('click', function(){
console.log(i);
}, false);
}(i))
}
事件處理程序的運(yùn)行環(huán)境
1.ele.onxxx = function(event){}
程序this指向是dom元素本身
2.obj.addEventListener(type, fn , false);
程序this指向是dom元素本身
3.obj.attachEvent('on' + type, fn);
程序this指向window
封裝兼容性的addEvent（elem, type, handle)方法
function addEvent(elem,type ,handle){
if(elem.addEventListener){
elem.addEventListener(type, handle, false);
}else if(elem.attachEvent){
elem.attachEvent('on'+ type,function(){
handle.call(elem);
})
}else{
elem['on' + type] = handle;
}
}
解除事件處理程序
ele.onclick = false/''/null;
ele.removeEventListener(type, fn, false);
ele.detachEvent('on' + type, fn);
注：若綁定匿名函數(shù)拓哟，則無法解除
1.div.onclick = null;
2.div.addEventListener('click', test, false);
function test(){
console.log('a');
}
div.removeEventListener('click', test, false);
事件處理模型——事件冒泡丶捕獲
- 事件冒泡：
結(jié)構(gòu)上(非視覺上)嵌套關(guān)系的元素主到，會存在事件冒泡的功能，即同一事件阴挣，自子元素冒泡向父元素气堕。(自底向上) - 事件捕獲：
結(jié)構(gòu)上(非視覺上)嵌套關(guān)系的元素，會存在事件捕獲的功能畔咧，即同一事件茎芭，自父元素捕獲至子元素(事件源元素)。（自頂向下）
IE沒有捕獲事件 - 觸發(fā)順序誓沸，先捕獲梅桩，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡
.wrapper{
width:300px;
height:300px;
background-color:red;
}
.content{
width:200px;
height:200px;
background-color:green;
}
.box{
width:100px;
height:100px;
background-color:orange;
}
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
var wrapper =
document.getElementsByTagName('wrapper')[0];
var content =
document.getElementsByTagName('content')[0];
var box = document.getElementsByTagName('box')[0];
wrapper.addEventListener('click',function(){
console.log('wrapper')
},false);
content.addEventListener('click',function(){
console.log('content')
},false);
box.addEventListener('click',function(){
console.log('box')
},false);
wrapper.addEventListener('click',function(){
console.log('wrapper1')
},true);
content.addEventListener('click',function(){
console.log('content1')
},true);
box.addEventListener('click',function(){
console.log('box1')
},true);
return wrapper1, content1,box,box1,content,wrapper
到黃色區(qū)域的時候 是box的事件執(zhí)行，按事件綁
定的順序執(zhí)行拜隧，所以先執(zhí)行最頂上的返回box宿百，在
返回box1. 別的都一樣 按正常順序來
取消冒泡和阻止默認(rèn)事件
取消冒泡：
- W3C標(biāo)準(zhǔn)event.stopPropagation();但不支持ie9以下版本
- IE獨有event.cancleBubble = true;
.wrapper{
width:300px;
height:300px;
background-color:red;
}
<div class = 'wrapper'></div>
document.onclick = function (){
console.log('你閑的啊')；
}
var div = documemt.getElementsByTagName('div')[0];
div.onclick = function(e){
e.stopPropagation();
//e.cancleBubble = true;
this.style.background = 'green';
}
這個參數(shù)e是事件對象虹蓄，如果console.log(e)就會打
印出函數(shù)犀呼，所以這個 e.stopPropagation();取消了
冒泡事件，也就是沒有'你閑的啊'
封裝取消冒泡的函數(shù)stopBubble(event)
function stopBubble(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancleBubble = true;
}
}
阻止默認(rèn)事件:
- 默認(rèn)事件—表單提交薇组，a標(biāo)簽跳轉(zhuǎn)外臂，右鍵菜單等
1.return false; 以對象屬性的方式注冊的事件才生效(只有句柄方式才好使 addEventListener不好使)
document.oncontextmenu = function (){
console.log('a');
return false;
}右鍵只出a 不出菜單 默認(rèn)事件被取消了
2.event.preventDefault(); IE9以下不兼容
document.oncontextmenu = function (e){
console.log('a');
e.preventDefault();
3.event.returnValue = false; 兼容IE
封裝阻止默認(rèn)事件的函數(shù)canceHandler(event);
function canceHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
事件對象
event || window.event 用于IE
事件源對象：
event.target 火狐只有這個
event.srcElement IE只有這個
這倆chrome都有
兼容性寫法
<div class = 'wrapper' style = 'width:100px;
height:100px; background-color:red; '>
<div class = 'box' style = 'width:50px;
height:50px; background-color:green; '>
</div>
</div>
var wrapper =document.getElemenstByTagName('wrapper')[0];
var box=document.getElemenstByTagName('box')[0];
wrapper.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target);
}
事件委托
利用事件冒泡，和事件源對象進(jìn)行處理
優(yōu)點：
1.性能 不需要循環(huán)所有的元素一個個綁定事件
2.靈活 當(dāng)有新的子元素時不需要重新綁定事件
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
var ul = document.getElementsByTagName('ul')
[0];
ul.onclick = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
console.log(target.innerText);
}
無論里面有多少li律胀，都是ul的子對象宋光，都能冒泡給ul
事件分類
- 鼠標(biāo)事件
click, mousedown, mousemove, mouseup, contextmenu, mouseover, mouseout, mouseenter, mouseleave
<div style="width:100px; height:100px;
background-color:red; position:absolute; left:0;
top:0;"></div>
function drag(elem){
var div = document.getElementsByTagName('div')[0];
var disX,
disY;
div.onmousedown = function(e){
disX = e.pageX - parseInt(div.style.left);
disY = e.pageY - parseInt(div.style.top);
document.onmousemove = function(e){
var event = e || window.event;
div.style.left = e.pageX - disX + 'px';
div.style.top = e.pageY - disY + 'px';
}
document.onmouseup = function (){
document.onmousemove = null;
}
}
小木塊跟隨鼠標(biāo)移動，拖拽運(yùn)動
<div style="width:100px; height:100px;
background-color:red; "></div>
var div = document.getElementsByTagName('div')[0];
div.onmouseover = function (){
div.style.background = ''yellow";
}
div.onmouseout = function (){
div.style.background = 'green';
}
鼠標(biāo)覆蓋時div變yellow炭菌，離開時變green
onmouseover == onmouseseenter
onmouseout == onmouseleave
- 用button來區(qū)分鼠標(biāo)的按鍵 0/1/2
document.onmousedown = function(e){
if(e.button == 2){
console.log('right');
}else if (e.button == 0){
console.log('left');
}
}
var firstTime = 0;
var lastTime = 0;
var key = false;
document.onmousedown = function (){
firstTime = new Date().getTime();
}
document.onmouseup = function(){
lastTime = newDate().getTime();
if(lastTime - firstTime < 300){
key = true;
}
}
document.onclick = function (){
if(key){
console.log('click');
key = false;
}
}
- DOM3標(biāo)準(zhǔn)規(guī)定：click事件只能監(jiān)聽左鍵罪佳，只能通過mousedown和mouseup來判斷鼠標(biāo)鍵
- 如何解決mousedown和click的沖突
鍵盤事件
- keydown keyup keypress
keydown > keypress > keyup
keydown 和keypress
keydown可以相應(yīng)任何鍵盤按鍵，keypress只可以相應(yīng)字符類鍵盤按鍵
keypress返回ASCII碼 黑低，可以轉(zhuǎn)換成相應(yīng)字符
文本操作事件
input, focus, blur, change
input{
border: 1px solid #01f;
}
<input type='text' value = '請輸入用戶名'
onfocus="if(this.value = '請輸入用戶名'){this.value
= ''}" onblur="if(this.value =''){this.value = '請輸入
用戶名'}">
var input = document.getElementsByTagName('input')[0];
input.oninput = function(e){
console.log(this.value);
}
window.onsrcoll = function (){
console.log(window.pageXOffset + " " +
window.pageYOffset)
滾動條當(dāng)前位置
window.onload = function(){
console.log();
}
這個函數(shù)就是等所有程序都完事了,頁面全初始化完成赘艳，這個函數(shù)才會觸發(fā)，效率最低
