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

JavaScript的事件_键盘事件的处理函数与HTML事件的处理函数

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

标签:

一、键盘事件的处理函数

  1、keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。

<script type="text/javascript">
    window.onload = function(){
        onkeydown = function () {//不需要对象调用
            alert(‘Lee‘);
        };
    }
</script>

</head>
<body>
    <input type="button" value="按钮" /> 
</body>

 

  2、keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。

<script type="text/javascript">
    window.onload = function(){
        onkeypress = function () {
            alert(‘Lee‘);
        };
    } 
</script>

</head>
<body>
    <input type="button" value="按钮" /> 
</body>

 

  3、keyup:当用户按了键盘上的任意键释放键盘上的键时会触发。

<script type="text/javascript">
    window.onload = function(){
        onkeyup = function () {
            alert(‘Lee‘);
        };
    }
</script>

</head>
<body>
    <input type="button" value="按钮" /> 
</body>

 

 

 

 

 

 

二、HTML事件的处理函数

   1.load:当页面完全加载后在 window 上面自动触发,或当框架集加载完毕后在框架集上触发。

<script type="text/javascript">
    window.onload = function(){
         alert(‘Lee‘);
    }
</script>
</head>
<body>
    <input type="button" value="按钮" /> 
</body>

 

  2.unload:当页面完全卸载后(关闭没有,刷新的时候会有)在 window 上面自动触发,或当框架集卸载后在框架集上触发。

<script type="text/javascript">
    window.onunload = function(){
        alert(‘Lee‘);
    }
</script>

</head>
<body>
    <input type="button" value="按钮" /> 
</body>

 

  3.select:当用户选中文本框(input 或 textarea)中的一个或多个字符并松开后触发。

<script type="text/javascript">
    window.onload = function(){
        var input = document.getElementsByTagName("input")[0];
        input.onselect=function(){
            alert(‘Lee‘);
        };
    };
</script>

</head>
<body>
    <input type="text" value="按钮" /> 
</body>

 

  4.change:当文本框(input 或 textarea)内容改变且失去焦点后触发

<script type="text/javascript">
    window.onload = function(){
        var input = document.getElementsByTagName("input")[0];
        input.onchange=function(){
            alert(‘Lee‘);
        };
    };
</script>
</head>
<body>
    <input type="text" value="按钮" /> 
</body>

 

  5.focus:当页面或者元素获得焦点时在 window 及相关元素上面触发

<script type="text/javascript">
    window.onload = function(){
        var input = document.getElementsByTagName("input")[0];
        input.onfocus=function(){
            alert(‘Lee‘);
        };
    };
</script>

</head>
<body>
    <input type="text" value="按钮" /> 
</body>

 

  6.blur:当页面或元素失去焦点时在 window 及相关元素上触发。

<script type="text/javascript">
    window.onload = function(){
        var input = document.getElementsByTagName("input")[0];
        input.onblur=function(){
            alert(‘Lee‘);
        };
    };
</script>
</head>
<body>
    <input type="text" value="按钮" /> 
</body>

 

  7.submit:当用户点击提交按钮在<form>元素上触发。

<script type="text/javascript">
    window.onload = function(){
        var form = document.getElementsByTagName("form")[0];
        form.onsubmit=function(){
            alert(‘Lee‘);
        };
    };
</script>
</head>
<body>
<form>
    <input type="submit" value="按钮" /> 
</form>
</body>

 

    8.reset:当用户点击重置按钮在<form>元素上触发。

<script type="text/javascript">
    window.onload = function(){
        var form = document.getElementsByTagName("form")[0];
        form.onreset=function(){
            alert(‘Lee‘);
        };
    };
</script>
</head>
<body>
<form>
    <input type="reset" value="按钮" /> 
</form>
</body>

 

  9.resize:当窗口或框架的大小变化时在 window 或框架上触发(火狐会执行两次)。

<script type="text/javascript">
    window.onresize = function(){
            alert(‘Lee‘);
    };
</script>

 

  10.scroll:当用户滚动带滚动条的元素时触发(有些浏览器刷新的时候滚动条会动那么该事件也会执行)。

<script type="text/javascript">
    window.onscroll = function(){
            alert(‘Lee‘);
    };
</script>

</head>
<body>
<p>jkdasjfkasfja></p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>jkdasjfkasfja></p>
</body>

 

JavaScript的事件_键盘事件的处理函数与HTML事件的处理函数

标签:

原文地址:http://www.cnblogs.com/LO-ME/p/4591470.html

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