1 事件类型： 2 1.界面事件 3 onload：描述文档，图片，css已经frame,object加载完毕时触发，window.onload 4 window.onload = function(){ 5 //代表图片，dom元素，iframe,css加载完毕以后 6 //才触发的事件 7 } 8 $(function(){ 9 //dom css js 初始化就加载事件 10 //调用了图片的unload事件 11 }); 12 13 onunload：移除加载事件 14 onabort：XMLHttpRequest 15 onerror：文档加载失败，图片加载失败的时候调用事件，XMLHttpRequest 16 请求失败是调用的函数 17 onresize：一般用于窗口，body，frameset改变窗口大小的时候调用 18 onscroll：用户滚动文档触发的事件 19 oncontextmenu：右键触发的事件 20 2.聚焦事件 21 blur： 22 focus 23 focusin 24 focusout 25 3.表单事件 26 onchange 27 onreset 28 onsubmit 29 onselect 30 4.鼠标事件 31 onclick 32 ondbclick 33 onmousedown 34 onmousemove 35 onmouseover 36 onmouseup 37 onmouseleave 38 5.滚轮事件 39 wheel 40 6.键盘事件 41 onkeydown 42 onkeyup 43 onpress 44 7.触屏事件 45 ontouchstart 46 ontouchchend 47 ontouchmove 48 ontouchleave 49 8.window,body中的嵌套事件 50 onafterprint:文档打印时候立刻会执行方法 51 onbeforeprint:打印之前执行事件 52 onpagehide:当浏览器即将离开的事件 53 onpageshow:当浏览器即将立刻的事件 54 onbeforeunload:当浏览器即将立刻的事件 55 拖拽事件 56 ondrag 57 ondragstart 58 ondragend 59 ondragenter 60 ondragleaveover 61 文档事件 62 onreadystatechange:XMLHttpRequest 63 64 javascript中一般使用:addEventListener进行监听事件
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>js</title> <meta name="keywords" content=""/> <meta name="description" content=""/> <style type="text/css"> *{margin:0;padding:0;} body{font-size:16px;font-family:"微软雅黑";color:#666; background:#fff; } #box{font-size:64px;margin:100px auto;} </style> </head> <body> <div id="box">click me</div> <script type="text/javascript"> /* 一个元素绑定事件分为两种：一种属性事件和动态绑定事件addEventListener 可以互相兼容，同一种事件类型是进行覆盖 addEventListener(事件类型，回调函数，cp(true/false)) true:事件扑捉 false:事件冒泡 为什么推荐使用冒泡，而不用事件扑捉 默认就是冒泡行为 阻止冒泡：event.stopPropagation(); 阻止默认行为:event.preventDefault 有默认行为的标签:a, 输入框,checkbox radio */ window.addEventListener("click",function(){ console.log("window的点击事件"); },false); document.addEventListener("click",function(){ console.log("document的点击事件"); },false); document.body.addEventListener("click",function(){ console.log("body的点击事件"); },false); document.querySelector("div").addEventListener("click",function(e){ console.log("div的点击事件"); e.stopPropagation(); },false); </script> </body> </html>