JavaScript的事件_事件处理函数概述与鼠标事件的处理函数
一、事件处理函数概述
JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML 事件。
所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如 click 事件的事件处理函数就是：onclick。
对于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理将失效。
二、鼠标事件：页面所有元素都可触发
1、click：当用户单击鼠标按钮或按下回车键时触发。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName('input')[0]; input.onclick = function () { alert('Lee'); }; } </script> </head> <body> <input type="button" value="按钮" /> </body>
2、dblclick：当用户双击主鼠标按钮时触发。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName('input')[0]; input.ondblclick = function () { alert('Lee'); }; } </script> </head> <body> <input type="button" value="按钮" /> </body>
3、mousedown：当用户按下了鼠标还未弹起时触发。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName('input')[0]; input.onmousedown = function () { alert('Lee'); }; } </script> </head> <body> <input type="button" value="按钮" /> </body>
4、mouseup：当用户释放鼠标按钮时触发。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName('input')[0]; input.onmouseup = function () { alert('Lee'); }; } </script> </head> <body> <input type="button" value="按钮" /> </body>
5、mouseover：当鼠标移到某个元素上时触发。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName('input')[0]; input.onmouseover = function () { alert('Lee'); }; } </script> </head> <body> <input type="button" value="按钮" /> </body>
6.mouseout：当鼠标移出某个元素时触发。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName('input')[0]; input.onmouseout = function () { alert('Lee'); }; } </script> </head> <body> <input type="button" value="按钮" /> </body>
7.mousemove：当鼠标指针在元素上移动时触发（跟mouseover差不多鼠标移到某个元素上时就触发）。
<script type="text/javascript"> window.onload = function(){ var input = document.getElementsByTagName('input')[0]; input.onmousemove = function () { alert('Lee'); }; } </script> </head> <body> <input type="button" value="按钮" /> </body>