JavaScript 事件

事件

• ele.onlick = function(event){ }
  • 兼容性很好，但是一个元素的同一个事件上只能拥有一个
  • 基本等同于写在HTML行间上
• obj.addEventListener(type,fu,false);
  • IE9以下不兼容，可以为一个事件绑定多个处理和方法
• obj.attachEvent(‘on’ + type,fn);
  • IE独有，一个事件同样可以绑定多个处理程序

事件处理程序的运行环境

• ele.onxxx = function(event){ }
  • 程序this指向dom元素本身
• obj.addEventListener(type,fn,false);
  • 程序this指向式dom元素本身
• obj.attachEvent(‘on’ + type,fn);
  • 程序this指向window
• 封装兼容性的addEvent(elem,type,handle);方法

解除事件处理程序

• ele.onclick = false 或者 null
• ele.removeEventListener(type, fn, false);

var div = document.getElementByTagName('div')[0];
div.addEventListener('click', test, false);
function test(){
    console.log('a');
}
div.removeEventListener('click', test, false);
//如果将test函数写在addEventListener里，则removeEventListener将找不到test函数，无法解除事件绑定

• ele.detachEvent(‘on’ + type, fn);
• 绑定匿名函数，则无法解除

事件处理模型

• 事件冒泡
  • 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
• 事件捕获（仅谷歌浏览器能使用）
  • 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）（自顶向下）
  • IE没有捕获事件

div.addEventListener('click', function(){ },false)
//第三个参数为flase则为事件冒泡，改为true则为事件捕获

• 触发顺序，先捕获，后冒泡
• focus，blur，change，submit，reset，select等事件不冒泡

取消冒泡和组织默认事件发生

• 取消冒泡
  • W3C标准 event.stopPropagation( );不支持IE9以下版本
  • IE独有event.cancelBubble = true;
  • 封装取消冒泡的函数stopBubble（event）
• 阻止默认事件
  • 默认事件——表单提交，a标签跳转，右键菜单等
  • return false；以对象属性的方法注册的事件才生效
  • event.preventDefault( );W3C标注，IE9以下不兼容
  • event.returnValue = false;兼容IE
  • 封装阻止默认事件的函数cancelHandler(event);

事件对象

• 事件源对象

  • event.target 火狐
  • event.srcElement IE
  • chrome都有

• 鼠标对象

• 用button来区分鼠标的按键； 0，1，2

  • document.onmousedown = function(e){
            if(e.button == 2){
                console.log('right');
            }else if(e.button ==0){
                console.log('left')
            }else if(e.button == 1){
                console.log('center')
    	}
    }
    

• 键盘事件

  • keydown keyup keypress
  • keydown > keypress >keyup
  • keydown和keypress的区别
    • keydown可以响应任意键盘按键，keypress只可以获取字符类键盘按键
    • keypress返回ASCLL码，可以转换成相应字符

事件分类

• 文本操作事件

• input；focus，blur，change

  //<input type="text">
  var input = document.getElementsByTagName('input')[0];
      input.onchange = function(){
          console.log(this.value)//输入内容，用户鼠标离开聚焦时打印
      }
  

  • onblur 当用户离开input输入框时执行一段Javascript代码
  • onfocus 当 input 输入框获取焦点时执行一段 Javascript代码,即点击输入框时

• 窗体类操作(windows上的事件)

• scroll

 window.onscroll = function(){
        console.log(window.pageXOffset + " " + window.pageYOffset);
    }//实时获取滚动条位置