事件总览

243 阅读1分钟

1. 事件流:冒泡、捕获。

2. 事件处理程序

  • 标签里的 onclick
  • btn.onclick
  • addEventListen('click', function)
  • attachEvent('click', function)

3. 事件对象 event

4. 事件类型

  1. UI事件:load, unloader, error, resize, scroll, select
  2. 焦点事件:focus, blur
  3. 鼠标与滚轮事件:click, dbclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup

    mouseenter:当鼠标移入某元素时触发。
    mouseleave:当鼠标移出某元素时触发。
    mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发。
    mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发。
    mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发。
    mouseout、mouseover和mouseleave、mouseenter最大的区别,在于子元素连带触发。

    <style>
        .a{
          width: 500px;
          height: 500px;
          background: aliceblue;
        }
        .b{
          width: 200px;
          height: 200px;
          background: beige;
        }
        .c{
          width: 100px;
          height: 100px;
          background: violet;
        }
    </style>
     <div class="a">A
      <div class="b"
        onmouseenter="mouseenter()"
        onmouseleave="mouseleave()"
        onmouseout="mouseout()"
        onmouseover="mouseover()"
        onmousemove="mousemove(event)">B
        <div class="c">C
        </div>
      </div>
    </div>
    <script>
      function mouseenter(){
        console.log('mouseenter')
      }
      function mouseleave(){
        console.log('mouseleave')
      }
      function mouseout(){
        console.log('mouseout')
      }
      function mouseover(){
        console.log('mouseover')
      }
      function mousemove(event){
        console.log('mousemove')
      }
    </script>
    
  4. 键盘事件:keydown, keyup
  5. 变动事件:DOMSubtreeModified(dom树变化), DOMNodeInserted, DOMNodeRemoved,,,
  6. HTML5 事件:contextmenu(自定义右键), beforeunload(页面卸载前), DOMContentLoad(DOM树之后就出发,不理会img,js,,是否下载完毕), readystatechange(IE), hashchange(URL #变化)
  7. 触摸事件:touchstart, touchmove, touchend, touchcancel

5. 性能

限制页面中事件处理程序的数量,使用事件委托,适当时机移除事件处理程序。