JavaScript -- 时光流逝（八）：js中的事件Event的使用
JavaScript -- 知识点回顾篇（八）：js中的事件Event的使用
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
(1) onabort : onabort 事件会在图像加载被中断时发生。
<!doctype html>
<html>
<head>
<script type="text/javascript">
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="test.jpg" onabort="abortImage()" />
</body>
</html>
(2) onblur :元素失去焦点时触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function txtToupper(){
var x=document.getElementById("txt1").value
document.getElementById("txt1").value=x.toUpperCase()
}
</script>
</head>
<body>
输入小写字母：
<input type="text" id="txt1" onblur="txtToupper()" />
</body>
</html>
(3) onchange :域的内容被改变触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function txtToupper(){
var x=document.getElementById("txt1").value
document.getElementById("txt1").value=x.toUpperCase()
}
</script>
</head>
<body>
输入小写字母：
<input type="text" id="txt1" onchange="txtToupper()" />
</body>
</html>
(4) onclick :当用户点击某个对象时触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function txtToupper(){
var x=document.getElementById("txt1").value
document.getElementById("txt1").value=x.toUpperCase()
}
</script>
</head>
<body>
<button onclick="txtToupper()">点我一下</button>
<input type="text" id="txt1" />
</body>
</html>
(5) ondblclick :当用户双击某个html元素时触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function txtToupper(){
var x=document.getElementById("txt1").value
document.getElementById("txt1").value=x.toUpperCase()
}
</script>
</head>
<body>
<button ondblclick="txtToupper()">点我一下</button>
<input type="text" id="txt1" />
</body>
</html>
(6) onerror :在加载文档或图像时发生错误触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function loadImageError(){
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="test.jpg" onabort="loadImageError()" />
</body>
</html>
(7) onfocus :元素获得焦点触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onfocus="setStyle(this.id)" />
</body>
</html>
(8) onkeydown :某个键盘按键被按下触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onkeydown="setStyle(this.id)" />
</body>
</html>
(9) onkeypress :某个键盘按键被按下并松开触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onkeypress="setStyle(this.id)" />
</body>
</html>
(10) onkeyup :某个键盘按键被松开触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onkeyup="setStyle(this.id)" />
</body>
</html>
(11) onload :一张页面或一幅图像完成加载触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function alertLoadingPageInfo(){
alert('页面加载中');
}
</script>
</head>
<body onload="alertLoadingPageInfo()">
</body>
</html>
(12) onmousedown :鼠标按钮被按下触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onmousedown="setStyle(this.id)" />
</body>
</html>
(13) onmousemove :鼠标被移动触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onmousemove="setStyle(this.id)" />
</body>
</html>
(14) onmouseout :鼠标从某元素移开触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onmouseout="setStyle(this.id)" />
</body>
</html>
(15) onmouseover :鼠标移到某元素之上触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onmouseover="setStyle(this.id)" />
</body>
</html>
(16) onmouseup :鼠标按键被松开触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="green";
}
</script>
</head>
<body>
<input type="text" id="txt1" onmouseup="setStyle(this.id)" />
</body>
</html>
(17) onreset :重置按钮被点击触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(){
document.getElementById('txt1').style.background="yellow";
}
</script>
</head>
<body>
<form onreset="setStyle()">
<input type="text" id="txt1" />
<input type="reset" value="Reset" />
</form>
</body>
</html>
(18) onresize :窗口或框架被重新调整大小触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(){
document.getElementById('txt1').style.background="yellow";
}
</script>
</head>
<body onresize="setStyle()">
<input type="text" id="txt1" />
</body>
</html>
(19) onselect :文本被选中触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function setStyle(){
document.getElementById('txt1').style.background="yellow";
}
</script>
</head>
<body>
<input type="text" id="txt1" /><br/>
<input type="text" onselect="setStyle()" />
</body>
</html>
(20) onunload :用户退出页面触发该事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function alertClosePageInfo(){
alert('将会关闭本页面');
}
</script>
</head>
<body onunload="alertClosePageInfo()">
</body>
</html>
JavaScript -- 时光流逝（八）：js中的事件Event的使用的更多相关文章
- 看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
- js中冒泡事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
- JS学习五(js中的事件)
[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计 原文出处: aitangyong 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...
- js中的事件委托或是事件代理
JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...
- JS中的事件传播流程
JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...
随机推荐
- navicat连接不上Linux服务器上的MySQL
1.首先确定你的linux已经关闭防火墙 详细操作点这里: 如果是公司服务器防火墙比较重要不能关闭,那就麻烦点了,需要在防火墙的配置文件下配置属性. 如果还不能解决,请继续往下看. 2.如果是云服务器 ...
- python安装第三方库的最简单方式
一.准备工作 (只做一次准备工作,以后都会很方便) 1. 安装pip (1)下载pip到D:\download pip下载地址:https://pypi.python.org/pypi/pip#dow ...
- 【转载】Sqlserver中查询窗口显示行号
在Sqlserver中编写语句的时候,有时候因为业务逻辑比较复杂,编写的语句会比较多,此时如果编辑器中显示代码的行号,则对于我们的语句编写有很好的辅助作用.sqlserver默认未开启行号显示功能,可 ...
- WPF 绕圈进度条（一）
在设计界面时,有时会遇到进度条,本次讲解如何设计自定义的绕圈进度条,直接上代码: 1.控件界面 <UserControl x:Class="ProgressBarControl&quo ...
- [nodejs] nodejs开发个人博客（二）入口文件
错误处理中间件 定义错误处理中间件必须使用4个参数,否则会被作为普通中间件 /*错误处理器*/ application.use(function(err,req,res,next){ console. ...
- adb命令中的keyevent事件
电话键 KEYCODE_CALL: 拨号键 KEYCODE_ENDCALL: 挂机键 KEYCODE_HOME: 按键Home KEYCODE_MENU: 菜单键 KEYCODE_BACK: 返回键 ...
- javascript中数组的常用算法深入分析
Array数组是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array是前端必修的功课.本文将给大家详细介绍了javascri ...
- 浅谈JS中String()与 .toString()的区别
我们知道String()与 .toString()都是可以转换为字符串类型,但是String()与 .toString()的还是有区别的 1..toString()可以将所有的的数据都转换为字符串,但 ...
- CSS3 - 盒子的 box - size
两个参数: border-box和content-box <!DOCTYPE html> <html lang="en"> <head> < ...
- 14.Odoo产品分析 (二) – 商业板块(7) –制造(1)
查看Odoo产品分析系列--目录 一旦你收到了库存中所需的原材料,就可以开始生产终端产品了.ERP系统的部分功能是帮助您根据可用资源调度这些订单.其中一项资源是原产品.其他资源可以包括可用劳动力或特定 ...