研究 html 的对象，事件和方法，从 js 的角度来思考，这个标签的属性是通过什么方法，触发什么事件来实现的 键盘鼠标事件 页面窗口事件 表单事件 一、window 事件属性 针对 window 对象触发的事件，在<body>中执行 1.onbeforeprint／onafterprint 在浏览器打印之间/后触发 <body onbeforeprint = print()> <script> function print() { alert("打印之间！") } </script> 打印前和打印后的事件方法类似，一个是在打印前触发事件，一个是在打印这个事件结束之后触发onafterprint这个事件 demo 查看 2.onbeforeunload/unload 离开页面之间触发的事件／之后触发的事件 打开 f12，然后刷新，或者关闭浏览器，可以在浏览器触发事件 <script> window.onbeforeunload = function(){ return "提示" //返回的内容不会显示， //在刷新的时候触发，或者关闭浏览器，浏览会直接提示是否重新加载，不能直接返回return } </script> demo 查看 3.onerror 当图片出错是可以触发该事件，支持该事件的标签只有 <img>,<object>,<style> <img src="1.gif" onerror = "myfun()"> <script> function myfun() { alert("图片出错") } </script> 1.gif 不存在，因此触发了一个 myfun() 事件，弹出窗口 demo 查看 4.onhashchange 当文档改变时发生的脚本 ？？？ 5.onload 页面加载完成之后触发 demo 查看 6.onmessage 在消息被触发时运行 ??? 7.onoffline 当浏览器离线时触发 <body onoffline="myfun()"> 8.ononline 当浏览器在线工作时触发 <body ononline="myfun()"> ononline和onoffline在网络断线或者连线时触发，可以控制电脑网络查看效果 9.onpagehide 当用户从网页离开时触发，也可以理解成当窗口隐藏时运行的脚本 刷新页面可以触发事件 demo 查看 10.onpageshow 打开一个新页面或者刷新的时候触发 demo 查看 相当于onload，加载页面时触发，但是在不同浏览器触发的有所不同 第一次加载页面时，onpageshow在ie浏览器中不触发，其他情况都触发 11.onresize 当浏览器窗口被改变大小时触发事件 <body onresize="myfun()"> <script> function myfun() { alert('浏览器窗口改变了') } </script> </body> demo 查看 12.onunload 页面被下载时触发，就是刷新或者关闭页面时触发 window.onunload = function() { return '确定关闭吗？' } 13.onpopstate 当浏览器窗口记录改变时运行的脚本， 14.onredo 当文档执行撤销时触发的事件 二、form 事件属性 由 html 表单内触发的事件，通常使用在 form 元素中 1.onblur 失去焦点时运行的脚本 <input name="int" id="int" onblur="myfun()"> <script> function myfun() { var int = document.getElementById('int').value; document.getElementById('int').value = int.toUpperCase(); } </script> 给 input 绑定一个 onblur=myfun() 的事件，当 input 失去焦点的时候产生什么样的效果 demo 查看 2.onfocus 元素获得焦点时触发事件，和 onblur 相反 demo 查看 3.onchange 当元素值被改变的时候触发事件 <input type="text" id="int" name="int" onchange="myfun()"> <script> function myfun() { alert('我的元素被改变啦！') } </script> 这个事件的意思就是，当我对 input 内容进行操作改变后，浏览器会弹出一个 alert demo 查看 4.oncontextmenu 当用户右键操作时触发该事件 可以绑定在任意元素中触发，可以一直触发，不用刷新 <div oncontextmenu="myfun()">这是一个文本框！</div> <script> function myfun() { alert('oncontentmenu事件触发') } </script> demo 查看 5.onformchange 当表单获得输入时可以触发事件 触发发不了脚本 6.onforminput 当表单获得用户输入时触发的事件，无法触发 浏览器不支持 6.oninput 当元素获得用户输入时触发的事件 当输入框输入或者删除时都会触发 oninput <input type="text" oninput="myfun()"> <script> function myfun() { alert('oninput触发了') } </script> onchange和oninput有相似的地方，都是改变文本内容时触发事件 但是onchange是在 input 失去焦点时才触发，oninput是立刻触发 demo 查看 7.oninvalid oninvalid事件要搭配required属性来使用 required如果使用该属性，代表必填字段，oninvalid是当元素无效时触发的事件 <form> <input type="text" oninvalid="myfun()" required> <input type="submit"> </form> <script> function myfun() { alert('填写为空') } </script> demo 查看 8.onreset 表单中重置按钮被点击时触发 <form onreset="myfun()"> <input type="text"> <input type="reset" value="reset"> </form> <script> function myfun(){ alert('重置成功') } </script> demo 查看 9.onselect 文本被选中时触发 <input onselect="myfun()" value="选中我"> <script> function myfun() { alert('onselect被触发 ') } </script> demo 查看 10.onsubmit 当表单被提交时触发 要把事件绑定到 form 标签里面 <form onsubmit="myfun()"> <!-- 注意：事件要绑定到form标签上面 --> <input type="text" name="name"> <input type="submit" value="submit"> </form> <script> function myfun() { alert('提交了') } </script> demo 查看 注意：提交了之后会自动刷新页面，document 和 console 的触发内容会立刻刷新，一闪而过，只有 alert 能停留在页面上，等待点击确定 三、key 键盘事件 1.onkeydown 按下任意键时触发，包括系统按钮，箭头和功能键 demo 查看 2.onkeypress 按下任意字母数字键时触发，但系统按钮，箭头和功能无法识别 3.onkeyup 松开任何之前按下的键盘时触发 demo 查看 四、mouse 鼠标事件 利用鼠标触发的事件 1.onclick 鼠标点击元素触发的事件 <p onclick="myfun()">点击我</p> <script> function myfun() { alert('点击成功') } </script> demo 查看 2.ondblclick 鼠标双击时触发的事件 <div ondblclick="myfun()">测试文本！</div> <script> function myfun() { alert('双击测试成功！') } </script> demo 查看 3.拖动事件 ondrag/ 元素被拖动时触发的事件 ondragstart/在拖动操作开端运行的脚本 ondrop/ 当元素正在被拖动时触发的事件 ondragend/在拖动操作末端运行的脚本 ondragenter/当元素元素已被拖动到有效拖放区域时运行的脚本 ondragleave/当元素离开有效拖放目标时运行的脚本 ondragover/当元素在有效拖放目标上正在被拖动时运行的脚本 4.onmousedown/onmouseup 当元素按下鼠标时触发的事件/鼠标释放时触发的事件 一个是按下去的瞬间就触发 一个是当鼠标被松开的时候触发 onmouseup效果和onclick一样，因为click也是点击过后触发 这两个事件加起来相当于一个click事件，但是并不能用这两个事件来做点击事件的效果 demo 查看 5.onmousemove 当鼠标移动到元素上时触发 相当于 css 里面的 :hover，但是作为事件拥有更灵活多变的用法 demo 查看 6.onmouseout 当鼠标离开元素时触发 demo 查看 7.onmouseover 当鼠标进入元素时触发 onmouseover和onmousemove都是鼠标进入元素触发 区别： 1. over在进入元素时触发，但在元素内部移动时不触发 move是进入元素时和在元素里面移动时都触发 2. over优先触发，然后才触发move 8.onmousewheel 当鼠标滚动被滚动时触发的事件 <style> div { height: 1000px; } </style> <body> <div onmousewheel="myfun()">测试</div> <script> function myfun() { alert('onmousewheel') } </script> </body> 每次滚动时都可以触发，可以绑定到 body 上 demo 查看 9.onscroll 当元素滚动条被滚动时触发的事件 <div onscroll="myfun()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</div> <p>滑动了<span id="ci"></span>次</p> <script> x = 0 function myfun() { document.getElementById('ci').innerHTML = x += 1 } </script> 这个案例－－－滑动滚动计数 demo 查看 区别： 1.wheel在滚轮滑动的时候有效，鼠标拖拽的时候无效 2.onscroll不管在滑动还是拖动的时候，均生效