JavaScript事件

事件基础

1.绑定事件

• 1.把事件当做HTML元素的属性

<button onclick="code...">

我是按钮

• 2.把事件当做dom对象的方法

  dom.onclick = function(){code....}

  你是按钮  //获取button元素  var btn = document.getElementById("btn");  //给btn元素绑定事件  btn.onclick = function(){      document.body.style.backgroundColor = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")";  }

• 3.事件监听方式
• addEventListener(eventName,fn,true/false)

• attachEvent(eventName,fn)

  它是按钮     //获取 btn1 对象     var btn1 = document.getElementById("btn1");     //给btn1绑定事件     btn1.addEventListener("click", function(){         document.body.style.color = "rgb("+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+","+Math.floor(Math.random() * 256)+")";     });

事件监听的正规写法

事件监听
    
按钮

2.解除事件的绑定

• 1.绑定方式：把事件当做html元素属性/把事件当做dom对象的方法

重新绑定一个空的function,覆盖前面

• 绑定方式 是事件监听方式
• removeEventListener(event,fn)

• detachEvent(event,fn)

  //获取按钮bth2         var btn2=document.getElementById('btn2');         //给btn btn0 btn1取消绑定         btn2.onclick=function(){     btn.onclick=function(){     };     document.getElementById('btn0').onclick=function(){     };     btn1.removeEventListener("click",randomColor)            }

3.this的用法

• 循环给一组元素绑定事件的时候

• 事件作为html元素属性的时候函数调用，传this表示该元素

            
                              
        
            
         
  哈哈哈
            
         
  嘿嘿嘿
            
         
  嘻嘻嘻
            
         
  呵呵呵
            
         
  咦咦咦
        
        
            

  事件类型

  1.鼠标事件

• click 单击

  单击

• dblclick 双击
• contextmenu 右击
• mouseover 鼠标放上
• mouseout 离开
• mousedown 按下
• mouseup 抬起

• mousemove 鼠标移动

  2.键盘事件

• keydown 键盘按键按下
• keyup 抬起

• keypress 键盘按键按下，并不是所有的按键都可以触发（只有可以输入字符的按键）

  3.文档事件

• load 加载完成
• unload 关闭

• beforeunload 文档关闭

  4.表单事件

• submit 提交事件
• reset 表单重置
• blur 失去焦点
• focus 获得焦点
• change 改变

• select input或textarea内容被选中的时候触发

  5.图片事件

• abort 图片加载中断
• load 图片加载完成

• error 图片加载错误

  6.其他事件

• scroll 滚动事件

• resize 绑定给window,窗口尺寸发生变化

Event对象

Event种类

• mouseEvent
• keyboardEvent
• focusEvent

属性

• clientX
• clientY
• keyCode

• target 具体触发事件的元素

event.target的应用

    
                
    
        
     
小丽丽
        
     
小丽丽
        
     
小丽丽
        
     
小丽丽
        
     
小丽丽
        
     
小丽丽
    
    
    
    
    添加    

方法

• stopPropagation() 阻止冒泡
• preventDefault() 阻止默认动作

事件的冒泡和捕获

• 捕获阶段先找大的后找小的
• 冒泡从小到大（冒泡阶段触发）
• 先捕获后冒泡