什么是事件

操作之后有反馈

如何绑定事件

dom上面本身就有事件，我们需要绑定事件触发函数

on+事件()

div.onclick = function(给一个事件绑定一个处理函数){
//写我们需要的逻辑
}

addEventListener(给一个事件绑定多个处理函数，注意同一个函数只能绑定一次)

div._addEventListener(事件类型,处理函数，false)_

  1. div.addEventListener("click",function(){
  2.            console.log('a')
  3.        },false)

attachEvent(事件类型,处理函数__)//兼容性问题，只能在IE上面使用

所有浏览器封装公共的事件方法：_

  1.  //elem 为dom，type为事件类型，handle为事件
  2.         function addEvent(elem, type, handle) {
  3.             if (elem.addEventListener) {
  4.                 elem.addEventListener(type, handler, false);
  5.             } else if (elem.attachEvent) {
  6.                 elem.attachEvent("on" + type, function () {
  7.                     handler.call(elem);
  8.                 })
  9.             } else {
  10.                 elem['on' + type] = handle;
  11.             }
  12.         }

dom元素事件中的__this指向元素本身，但是attchEvent的this指向window，可以考虑通过方法.call(dom)

解除事件

1) div.onclick=null;
2)dom.removeEventLinsten(事件类型，事件，false)//注意事件必须使用引用
例如：

  1. <body>
  2.     <ul>
  3.         <li>a</li>
  4.         <li>b</li>
  5.         <li>c</li>
  6.         <li>a</li>
  7.     </ul>
  8.     <script type="text/javascript">
  9.         var licol = document.getElementsByTagName('li');
  10.         for (var i = 0; i < licol.length; i++) {
  11.             (function (j) {
  12.                 licol[j].addEventListener("click", test, false)
  13.             }(i))
  14.         }
  15.         function test() {
  16.             console.log(this)
  17.             this.removeEventListener("click", test, false)
  19.         }
  21.     </script>
  22. </body>

事件处理模型（重要）

事件冒泡：

对于代码结构父子嵌套结构元素，点击子元素会一级一级的往父元素的扩展，自低往上

事件捕获：

对于代码结构父子嵌套结构元素，点击子元素会一级一级的往父元素的扩展，自顶往下

注意：执行顺序为先捕获后执行
focus blur change submit reset select 等事件不冒泡

取消冒泡

w3c标准 ：e._stopPropagation()_
IE独享：e.cancelBubble=true
封装一个函数取消冒泡：

  1. function stopBubble(event) {
  2.             if (event.stopPropagation()) {
  3.                 event.stopPropagation();
  4.             } else {
  5.                 event.cancelBubble = true;
  6.             }
  7.         }

阻止默认事件

return false //针对句柄语句
event.preventDefault();//W3C标注，IE9不兼容
event.returnValue=false 兼容IE
封装阻止默认事件的函数

  1.  function cancleHandler(event) {
  2.             if (event.preventDefault()) {
  3.                 event.stopPropagation();
  4.             } else if(event.returnValue){
  5.                 event.returnValue=false;
  6.             }
  7.         }

实例：比如我们想要取消a标签的点击事件

  1. dom.onclick = function(){
  2.             return false
  3.         }

事件对象

IE的e不起作用：做个兼容 var event = e||window.evemt
事件源对象：var target = event.target||event.srcElement

事件委托

利用事件冒泡，和事件源对象进行处理
优点：
1.性能不需要循环所有的元素一个个绑定
2.灵活当有新的子元素是不需要重新绑定事件
例如：

  1. <body>
  2.     <ul>
  3.         <li>a</li>
  4.         <li>b</li>
  5.         <li>c</li>
  6.         <li>a</li>
  7.     </ul>
  8.     <script type="text/javascript">
  9.        var ul = document.getElementsByTagName('ul')[0];
  10.        ul.onclick = function(event){
  11.            var event = event||window.event;
  12.            var target = event.target||event.srcElement;
  13.              console.log(target.innerHtml)
  14.        }
  15.     </script>
  16. </body>

事件类型

拖拽功能封装

  1. function drag(elem) {
  2.             var disX, disY;
  3.             elem.onmousedown = function (e) {
  4.                 var event = e || window.event;
  5.                 disX = event.pageX - parseInt(elem.style.left);
  6.                 disY = event.pageY - parseInt(elem.style.top);
  7.                 document.addEventListener("", function (event) {
  8.                     var event = event || window.event;
  9.                     elem.style.left = event.pageX - disX + "px"
  10.                     elem.style.top = event.pageX - disY + "px"
  11.                 }, false)
  12.                 document.onmouseup = function () {
  13.                     elem.onmouseup = null
  14.                 }
  15.             }
  16.         }

鼠标事件

1) click mousedown mouseup contexmenu mousemove mouseover mouseenter mouseleaver
2)区分鼠标左右键 mouseup mousedown//e.button

键盘事件