标签:
一、事件处理函数概述
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>
JavaScript的事件_事件处理函数概述与鼠标事件的处理函数
标签:
原文地址:http://www.cnblogs.com/LO-ME/p/4591467.html