1.何为事件
2.重要吗？
交互体验的核心功能

如何绑定事件

1 elem.onxxx = function (event) {}
兼容性很好 但是一个元素只能绑定一个处理程序
基本等同于写在HTML行间样式表上
2 elem.addEventListener(type , func(){} , false);
type为事件类型且要写为字符串形式 func为处理函数
IE9以下不兼容 可以为一个事件绑定多个处理程序

如

  1.     <script>
  2.         var div = document.getElementsByTagName('div')[0];
  3.         div.addEventListener('click',function (){
  4.             console.log('a');
  5.         },false)
  6.         div.addEventListener('click',function (){
  7.             console.log('a');
  8.         },false)
  9.                 //这样写点击时会触发两次  如果里面传的是同一个函数引用  那么只会触发一次
  10.         //div.addEventListener('click',test,false)
  11.         //div.addEventListener('click',test,false)
  12.         //function test(){
  13.             //console.log('a');
  14.         //}
  15.     </script>

3 elem.attachEvent(‘on’ + type, func);
IE独有 一个事件同样可以绑定多个处理程序

事件处理程序的运行环境

1 elem.onxxx = function (event) {}
程序的this指向dom元素本身
2 obj.addEventListener(type, func(){}, false);
程序的this指向dom元素本身
3 obj.attachEvent(‘on’ + type, func(){});
程序的this指向window
要想让this指向obj对象 那可以把事件处理函数写在外部 然后在function中执行事件处理函数
并通过call改变this指向
如
div.attachEvent(‘onclick’, function(){
handleFunc.call(div);
});
function handleFunc(){}
封装兼容性的 addEvent(elem, type, handleFunc); 方法 给dom对象添加该事件类型的处理函数

  1.     <script>
  2.         function addEvent(elem,type,handleFunc){
  3.             if(elem.addEventListener){
  4.                 elem.addEventListener(type,handleFunc,false);
  5.             }else if(elem.attachEvent){
  6.                 elem.attachEvent('on'+type,function(){
  7.                     handleFunc.call(elem);
  8.                 })
  9.             }else{
  10.                 elem['on'+type] = handleFunc;
  11.             }
  12.         }
  13.     </script>

解除事件处理程序

1 elem.onclick = false/ ‘’ /null;
2 elem.removeEventListener(type, func(){}, false);
3 elem.detachEvent(‘on’ + type, func(){});
注:若绑定的是匿名函数，则无法解除
即若想解除事件处理程序 那么只能把事件函数写在外部 再将事件函数引用传递给形参