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)
}