事件处理函数概述

JavaScript 可以处理的事件类型为：鼠标事件、键盘事件、HTML 事件

所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如 click 事件的事件处理函数就是：onclick。

对于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理将失效。

鼠标事件的处理函数

鼠标事件的处理函数在页面的所有元素中都可触发

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>

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>

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>

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>

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>

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>

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>

键盘事件的处理函数

keydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发。

<script type="text/javascript">

    window.onload = function(){

        onkeydown = function () {//不需要对象调用

            alert('Lee');

        };

    }

</script>

</head>

<body>

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

</body>

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发（不需要对象调用）。

<script type="text/javascript">

    window.onload = function(){

        onkeypress = function () {

            alert('Lee');

        };

    }

</script>

</head>

<body>

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

</body>

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

<script type="text/javascript">

    window.onload = function(){

        onkeyup = function () {

            alert('Lee');

        };

    }

</script>

</head>

<body>

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

</body>

HTML事件的处理函数

load：当页面完全加载后在 window 上面自动触发，或当框架集加载完毕后在框架集上触发。

<script type="text/javascript">

    window.onload = function(){

         alert('Lee');

    }

</script>

</head>

<body>

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

</body>

unload：当页面完全卸载后（关闭没有，刷新的时候会有）在 window 上面自动触发，或当框架集卸载后在框架集上触发。

<script type="text/javascript">

    window.onunload = function(){

        alert('Lee');

    }

</script>

</head>

<body>

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

</body>

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>

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>

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>

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>

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>

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>

resize：当窗口或框架的大小变化时在 window 或框架上触发（火狐会执行两次）。

<script type="text/javascript">

    window.onresize = function(){

            alert('Lee');

    };

</script>

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）的更多相关文章

  1. JavaScript onkeydown事件入门实例(键盘某个按键被按下)

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  2. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  3. JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...

  4. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

  5. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

  6. Java基础--Java---IO流------GUI(布局)、Frame、事件监听机制、窗体事件、Action事件、鼠标事件、对话框Dialog、键盘事件、菜单

     * 创建图形化界面  * 1.创建frame窗体  * 2.对窗体进行基本设置  *   比如大小.位置.布局  * 3.定义组件  * 4.将组件通过窗体的add方法添加到窗体  * 5.让窗体显 ...

  7. Python——pyHook监听鼠标键盘事件

    pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...

  8. Tkinter 鼠标键盘事件（一）

    一: 鼠标事件 <Button-1>                                                                     鼠标左键单击 ...

  9. jquery鼠标键盘悬停事件，形变动画和淡入淡出

    鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. yii2 页面加载警告框

    在视图页面代码如下 <?php use kartik\alert\Alert; echo Alert::widget([ 'type' => Alert::TYPE_INFO, 'titl ...

  2. JS中的 ES6新类型iterable

    1.1 iterable字面意思:可迭代的,可重复的 iterable是ES6标准引入的新的类型.而Array.Map和Set都属于iterable类型 1.2 为什么加入iterable类型? 遍历 ...

  3. WPF的MediaElement指定Source无法播放问题解决

    最近学wpf,在使用 MediaElement 指定 Source 进行视频播放时,在源码界面可以正常显示,但运行时控件显示空白. 源码界面如下图:(可正常显示) 运行后如下图所示:(控件位置显示空白 ...

  4. [转]如何选择Html.RenderPartial和Html.RenderAction

    Html.RenderPartial与Html.RenderAction这两个方法都是用来在界面上嵌入用户控件的. Html.RenderPartial是直接将用户控件嵌入到界面上: <%Htm ...

  5. c#参数修饰符-ref

    ref 关键字通过引用传递参数. 方法定义和调用方法必须显式使用ref关键字: 调用方法时参数必须初始化: 参数中可以声明多个ref修饰的参数. 例: public void UseRef( ref ...

  6. mac obs直播软件 无法输出音频解决办法

    搜索大量的网页,确没有一个实用的设置教程,也正是speechless. 直接做个教程,方便大家的使用 1.安装 boom 2 到app store 上搜索boom 我安装的是正版的,需要128元. 你 ...

  7. 【原】zookeeper集群配置常见问题说明

    zookeeper集群网上demo一大堆,补充一下一些不明白的地方 1 复制2份zookeeper,savle作为备份节点 2.配置zoo.cfg # The number of millisecon ...

  8. 【原】Spring和Dubbo基于XML配置整合过程

    背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时,只需一个 ...

  9. mybatis必知必会二

    关联: 嵌套查询:通过执行另外一个 SQL 映射语句来返回预期的复杂类型. 嵌套结果:使用嵌套结果映射来处理重复的联合结果的子集.首先,然让我们来查看这个元素的属性.所有的你都会看到,它和普通的只由 ...

  10. eml文件解析实例，简历信息抓取工具

    先上工具效果图,如下图所示: 背景 某公司使用58同城进行人员招聘,当有应聘人员通过58同城给该公司投简历后,58同城会发送一份邮件到该公司的注册邮箱,邮件内容如上图右侧显示,主题为“应聘贵公司XXX ...