码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript的事件_事件处理函数概述与鼠标事件的处理函数

时间:2015-06-21 07:09:11      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

一、事件处理函数概述

  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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!