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 ...
随机推荐
- 响应者链UIResponder-扩大UIButton的点击范围
在开发中,我们经常看到有按钮等的点击,会出现响应事件.按钮->view->ViewController->UIWindow->UIApplication,这就形成了一个响应链. ...
- NLP入门（一）词袋模型及句子相似度
本文作为笔者NLP入门系列文章第一篇,以后我们就要步入NLP时代. 本文将会介绍NLP中常见的词袋模型(Bag of Words)以及如何利用词袋模型来计算句子间的相似度(余弦相似度,cosi ...
- 利用Python测量滴水湖的水面面积
美丽的滴水湖 美丽的滴水湖坐落在上海的东南角,濒临东海,风景秀丽,安静舒适,是旅游.恋爱的绝佳去处.笔者有幸去过一回,对那儿的风土人情留下了深刻的印象,如果有机会,笔者还会多去几次! 滴水湖是 ...
- Spring Boot入门（2）使用MySQL数据库
介绍 本文将介绍如何在Spring项目中连接.处理MySQL数据库. 该项目使用Spring Data JPA和Hibernate来连接.处理MySQL数据库,当然,这仅仅是其中一种方式,你也 ...
- 《Office 365开发入门指南》上市说明和读者服务
写在最开始的话 拙作<Office 365开发入门指南>上周开始已经正式在各大书店.在线商城上市,欢迎对Office 365的开发.生态感兴趣的开发者.项目经理.产品经理参考本书,全面了解 ...
- Winform杂项
1.控件右键属性:ContextMenuStrip,设置菜单 2.编辑代码:this.treeView1.Nodes.Remove(this.treeView1.SelectedNode);//获取树 ...
- [leetcode]984. 不含 AAA 或 BBB 的字符串
给定两个整数 A 和 B,返回任意字符串 S,要求满足: S 的长度为 A + B,且正好包含 A 个 'a' 字母与 B 个 'b' 字母: 子串 'aaa' 没有出现在 S 中: 子串 'bbb' ...
- SpringBoot+kafka+ELK分布式日志收集
一.背景 随着业务复杂度的提升以及微服务的兴起,传统单一项目会被按照业务规则进行垂直拆分,另外为了防止单点故障我们也会将重要的服务模块进行集群部署,通过负载均衡进行服务的调用.那么随着节点的增多,各个 ...
- JavaScript 中的相等操作符 ( 详解 [] == []、[] == ![]、{} == !{} )
ECMAScript 中的相等操作符由两个等于号 ( == ) 表示,如果两个操作数相等,则返回 true. 相等操作符会先转换操作数(通常称为强制转型),然后比较它们的相等性. 在转换不同的数据类型 ...
- 记录微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function
微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function 这个报错是在将数组对象通过 ...