JavaScript基础8事件函数

1.添加事件的方式
①获取节点后添加onclick属性

var i = document.getElementById("box")
i.onclick = function(){
    alert("hello word1")
}
i.onclick = function(){
    alert("hello word2")
}                       重复的会覆盖

②获取节点后添加事件监听属性

var i = document.getElementById("box")
i.addEventListener("click",function(){alert("第一次出现")}，false)
i.addEventListener("click",function(){alert("第二次出现")}，false)      重复的不干扰，不会覆盖

删除则不用匿名函数
var i = document.getElementById("box")
function func(){ 
          alert("hello") 
          }
i.addEventListener("click",func,false)
i.removeEventListener("click",func,false) 

2.事件函数
①聚焦事件 （一般用于文本框）

<input type="txt" id="txt" />
<script type="text/javascript">
    var i = document.getElementById("txt")            获取input节点
    i.addEventListener("focus",function(){
        alert("聚焦")
   },false)                         聚焦事件
   i.addEventListener("blur",function(){
        alert("离焦")     
   },false)                        离焦事件
</script>

②单击&双击事件

<div id="box" style="width=100px;height:100px;background-color:red;">
</div>
<script type="text/javascript">
    var i = documnet.getElementById("box")          获取div节点
    i.addEventListener("click",function(){ 
       clearTimeout(time)
       time=setTimeout(function(){
               console.log("单击") 
             },300)                             
    },false)                          单击事件
    i.addEventListener("dblclick",function(){
     clearTimeout(time)
     console.log("双击") },false)               双击事件
</script>

③ 鼠标事件

<ul>
    <li>鼠标进入变红色</li>
    <li>鼠标离开变蓝色</li>
    <li>鼠标按下字体大两倍</li>
    <li>鼠标抬起字体小两倍</li>
</ul>
<script type="text/javascript">
      var lis = document.getElementBtTagName("li")
      for(var i=0;i<lis.length;i++){
           lis[i].addEventListener("mouseover".function(){ this.style.backgroundColor="red"},false)
           lis[i].addEventListener("mouseout".function(){ this.style.backgroundColor="blue"},false)
                                                                         鼠标进入离开改变背景颜色
           lis[i].addEventListener("mousedown".function(){
               this.style.fontSize=parseInt(getComputedStyle(this,null).fontSize)*2+"px"
           },false)
           lis[i].addEventListener("mouseup".function(){
               this.style.fontSize=parseInt(getComputedStyle(this,null).fontSize)/2+"px"
           },false)                                                  鼠标按下抬起改变字体大小
     }
</script>