绑定事件处理函数

1. // 只能绑定一个
div.onclick = function () {
    this.style.backgroundColor = 'red';
}
// 基本等同于写在行间样式上
<div onclick="alter('')"> </div>

------------------------------------------------------------------------------

2. // IE8 no
   // 可绑定多个
   // 填3个参数（事件类型, 处理函数, false）
div.addEventListener('click', function(){

}, false);

------------------------------------------------------------------------------

3. // IE 独有
   // 可绑定多个
   // 填2个参数（'on' + type, fn)
   // 较addEventlistener更为松散
obj.attachEvent('onclick', function () {});

事件处理程序的运行环境

1. ele.onxxx = function (event) {} // this --> dom
2. obj.addEventListener (type, fn, false); this --> dom
3. obj.attachEvent('on' + type, fn); this --> window

// 封装兼容性 addEvent(ele, type, handle)方法 *
function addEvent(ele, type, handle) {
  if (ele.addEventListener) {
    ele.addEventListener(type, handle, false);
  } else if (ele.attachEvent) {
    ele.attachEvent("on" + type, function () {
      handle.call(ele);
    });
  } else {
    ele["on" + type] = handle;
  }
}

解除事件处理程序

ele.onclick = false/''/null;
ele.removeEventListener(type, test, false);
ele.detachEvent('on' + type, test);
// 若绑定匿名函数则无法解除。

事件处理模型-事件的冒泡、捕获 *

• 冒泡：结构上嵌套关系的元素，自子元素冒泡向父元素；
• 捕获：结构上嵌套关系的元素，自父元素捕获至子元素。 ele.addEventListener('click', function() {}, true);
• // IE no
• 触发顺序，先捕获，后冒泡。
• focus, blur, change, submit, reset, select等事件不冒泡。

取消冒泡和阻止默认事件

• 取消冒泡：

1. W3C标准 event.stopPropagation(); IE8 no
2. IE event.cancelBubble = true;

// 封装取消冒泡的函数 stopBubble(event) {
    if(event.stopPropagation){
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}

• 阻止默认事件： 默认事件-表单提交，a标签跳转，右键菜单等
  1. return false; 以对象属性的方式注册的事件才生效 //兼容性好、原始、以句柄的方式来阻止默认事件，所以只有以句柄的方式绑定的事件才ok addEventListener(), attachEvent() no
  2. event.preventDefault(); // W3C标准，IE8 no
  3. event.returnValue = false; 兼容IE

// 封装阻止默认事件的函数 cancelHandler(event);
function cancelHandle(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

阻止右键菜单

事件对象

• event || window.event 用于IE
• 事件源对象 event.target firlfox只有这个 event.srcElement IE只有这个 chrome 都有

// 兼容性写法
var event = e || window.event;
var target = event.target || event.srcElement;