js注冊事件

1.   元素.on+'事件名'=函數       

（1） click點擊事件

var box=document.getElementById('box')
box.onclick=function(){
  console.log('box被點擊了')
}

（2）.給a標簽注冊點擊事件 

<a id="box" href="#">點擊</a>
<img id="img" src="./img01.jpg" alt="">

var box=document.getElementById('box')
var img=document.getElementById('img')
box.onclick=function(){
  img.src='./img01.jpg'
  // return  false;     //阻止a標簽的默認行為
}

（3） mouseover 鼠標進入事件    mouseout 鼠標移除事件   

var box=document.getElementById('box')
box.onmouseover=function(){ console.log('鼠標進入了') } box.onmouseout=function(){ console.log('鼠標移除了') }

（4） mouseenter 鼠標進入事件    mouseleaver 鼠標移除事件   不冒泡   （推薦使用）

var bt=document.getElementById('bt')
var box=document.getElementById('box') box.onmouseenter=function(){ console.log('鼠標進入了') } box.onmouseleave=function(){ console.log('鼠標移除了') }

（5）keydown 鍵盤按下時觸發   keyup  鍵盤抬起時觸發  keypress 鍵盤按下時觸發

var box=document.getElementById('box')
box.onkeydown=function(e){ console.log(e.keyCode) }

var box=document.getElementById('box')   //keydown 不區分大小寫，返回的都是大寫的ASCII碼，keypress區分大小寫
box.onkeypress=function(e){ console.log(e.keyCode) }

var box=document.getElementById('box')
box.onkeyup=function(e){ console.log(e.keyCode) }

（6）. scroll事件，監聽滾動條變化

var father = document.getElementById('father')
father.onscroll=function(){ console.log( father.scrollLeft) console.log( father.scrollTop) }

 

2.元素.on+'事件名'=null 移除事件

var box=document.getElementById('box')
var bt=document.getElementById('bt') box.onclick=function(){ console.log('胖子') } bt.onclick=function(){ box.onclick=null }

 

3.  元素.addEventListener (''事件名',事件處理函數，false)    可以給同一元素多次注冊同一元素   本來是自己做的事  委托給父級元素做

var box=document.getElementById('box')
box.addEventListener('click',function(){
console.log('魯小師')
},false)

box.addEventListener('click',function(){
console.log('魯大師')
},false)

 

4.元素.removeEventListener(''事件名',事件處理函數，false)  移除事件

var box=document.getElementById('box')
var bt=document.getElementById('bt')
box.addEventListener('click',fn,false)  
 function fn(){
  console.log('胖子')
}
bt.onclick=function(){
  box.removeEventListener('click',fn,false)
}