JavaScript的事件的处理函数（鼠标，键盘，HTML）
事件处理函数概述
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）的更多相关文章
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...
- JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw
参考资料: 慕课网 DOM事件探秘 js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...
- javascript中事件总结&通用的事件侦听器函数封装&事件委托
前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...
- Java基础--Java---IO流------GUI(布局)、Frame、事件监听机制、窗体事件、Action事件、鼠标事件、对话框Dialog、键盘事件、菜单
* 创建图形化界面 * 1.创建frame窗体 * 2.对窗体进行基本设置 * 比如大小.位置.布局 * 3.定义组件 * 4.将组件通过窗体的add方法添加到窗体 * 5.让窗体显 ...
- Python——pyHook监听鼠标键盘事件
pyHook包为Windows中的全局鼠标和键盘事件提供回调. 底层C库报告的信息包括事件的时间,事件发生的窗口名称,事件的值,任何键盘修饰符等. 而正常工作需要pythoncom等操作系统的API的 ...
- Tkinter 鼠标键盘事件（一）
一: 鼠标事件 <Button-1> 鼠标左键单击 ...
- jquery鼠标键盘悬停事件，形变动画和淡入淡出
鼠标和键盘悬停 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
随机推荐
- [javaEE] 控制浏览器缓存资源
浏览器有默认的缓存机制,不同的浏览器,缓存头是不一样的 设置编码,调用setContentType()方法,参数:”text/html;charset=utf-8” 关闭缓存,调用setHeader( ...
- 十四、ReentrantLock重入锁
一.简介 JDK提供了Lock接口来实现更丰富的锁控制,ReentrantLock即Lock接口的实现 JDK文档:http://tool.oschina.net/uploads/apidocs/jd ...
- 第N次学习javaIO之后
io按流分 输入流.输出流 io按类型分(是类型吧) 字节流.字符流 ------------------------------------- 先说说一直以来混淆什么时候用输入流,什么时候用输出流. ...
- MySQL Metadata
http://www.devart.com/dotconnect/mysql/docs/MetaData.html In this overload first parameter is name o ...
- BZOJ3193: [JLOI2013]地形生成
传送门 Sol 第一问可以考虑按照山的高度从大到小放 但是这样如果遇到高度相同的就不好考虑,那么同时要求数量限制从小到大 这样每次放的时候后面的一定不会影响前面,并且高度相同的时候前面能放的位置后面的 ...
- redux、immutablejs和mobx性能对比（二）
三.分析数据 1.前提说明 我对测试出的10个数据摘除最大值与最小值,然后求平均值 根据平均值我绘制了一个曲线图一个柱状图 曲线图用于查看1000-100000的性能趋势 柱状图用于比较在相同条数下r ...
- 关于修改bug的思考
作者:朱金灿 来源:http://blog.csdn.net/clever101 有软件就有bug,这意味着软件研发不仅仅是新功能开发,更要拿出相当一部分精力去修改bug.但基本很多软件开发者并 ...
- 利用Mongodb做地理空间查询
MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. 前言 在移动开发中,经常会用到定位的功能,例如美团.饿了么.猫眼电影等的app ...
- android热加载随记
在我们日常的开发过程中,程序难免会出现BUG,一般有集中处理方式,发布新版本APP让用户来升级,或者打补丁来修复bug 前者本文在这里不错讨论,打补丁升级又分为两种一种是需要重启应用,一种是不需要.不 ...
- intellij idea下面安装热部署插件 JRebel 5.2
之前一直是用的eclipse的JRebel,因为现在的公司用的是idea,于是尝试了在idea下面安装,把安装的过程中出现的问题记录下. 1.首先是在 idea里面install JRebel,Fil ...