1. 事件流:冒泡、捕获。
2. 事件处理程序
- 标签里的 onclick
- btn.onclick
- addEventListen('click', function)
- attachEvent('click', function)
3. 事件对象 event
4. 事件类型
- UI事件:load, unloader, error, resize, scroll, select
- 焦点事件:focus, blur
- 鼠标与滚轮事件: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>
- 键盘事件:keydown, keyup
- 变动事件:DOMSubtreeModified(dom树变化), DOMNodeInserted, DOMNodeRemoved,,,
- HTML5 事件:contextmenu(自定义右键), beforeunload(页面卸载前), DOMContentLoad(DOM树之后就出发,不理会img,js,,是否下载完毕), readystatechange(IE), hashchange(URL #变化)
- 触摸事件:touchstart, touchmove, touchend, touchcancel
5. 性能
限制页面中事件处理程序的数量,使用事件委托,适当时机移除事件处理程序。