夺命雷公狗---javascript NO:08 常用的事件

常用的事件

onLoad ：当页面载入完毕时触发，常用于body元素

lonUnload ：当页面卸载时（关闭时）触发，常用于body元素

lonBlur ：失去焦点时触发

lonFocus ：获得焦点时触发

lonClick ：单击时触发

lonMouseOver ：鼠标悬浮时触发

lonMouseOut ：鼠标离开时触发

lonMouseDown ：鼠标按下时触发

lonMouseUp ：鼠标弹起时触发

lonMouseMove ：鼠标移动时触发

lonChange ：状态改变时触发，常用于select

lonSelect ：内容选中时触发

lonkeypress ：键盘点击时触发

lonkeydown ：键盘按下时触发

lonkeyup ：键盘弹起时触发

lonSubmit ：表单提交时触发，常用于form表单元素

lonReset ：表单重置时触发，常用于form表单元素

示例代码：

例1：onload（当页面载入完毕时触发）与onunload（当页面卸载时（关闭时）触发）

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script>
function fun1(){
alert(‘页面载入时触发’);
}
function fun2(){
alert(‘页面关闭时触发’);
}
</script>
</head>
<body onload=fun1();οnunlοad=fun2();></body>
</html>

例2：onblur（失去焦点时触发）与onfocus（获得焦点时候触发）

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script>
function fun1(){
document.getElementById(‘username’).value;
}
function fun2(){
document.getElementById(‘tip’).innerHTML = ‘用户名不能为空';
}
</script>
</head>
<body>
<input type=”text” id=’username’ name=”username” value=”请输入用户名” οnfοcus=”fun1()”; οnblur=”fun2();”><span id=’tip’></span>
</body>
</html>

例3：onmouseover（鼠标浮动时触发）与onmouseout（鼠标离开时触发）

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script>
function fun1(){
document.getElementById(‘test’).innerHTML += ‘鼠标浮动<br/>';
}
function fun2(){
document.getElementById(‘test’).innerHTML += ‘鼠标离开<br/>';
}
</script>
</head>
<body>
<img src=”1.jpg” onmouseover=”fun1();” onmouseout=”fun2();” />
<div id=”test”></div>
</body>
</html>

例4：onchange（状态改变时候触发，常用于select）

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
</head>
<body>
<select id=”shengfen” onchange=”fun1();”>
<option>请选择省份</option>
</select>
<script>
var sheng = [‘广东’,’河北’,’湖南’,’福建’,’广西’,’山东’];
for(var i in sheng){
var op = new Option(sheng[i]);
document.getElementById(‘shengfen’).options.add(op);
}
function fun1(){
alert(‘状态改变了’);
}
</script>
</body>
</html>

例5：onsubmit（表单提交时触发）

<!DOCTYPE html>
<html>
<head>
<meta charset=’utf-8′>
<title></title>
<script>
function fun1(){
alert(“相关数据不能为空”);
return false;
}
</script>
</head>
<body>
<form method=”post” action=”” onsubmit=”return fun1();”>
<input type=”submit” name=”submit” value=”提交”>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/leigood/p/5031824.html

夺命雷公狗---javascript NO:08 常用的事件相关推荐

夺命雷公狗---javascript NO:03 流程结构
顺序结构在JavaScript代码中,代码是从上至下,从左至右执行的. 分支结构 if-else if-else switch 这里的分支结构和php里面的几乎一样循环结构 for循环 while ...
夺命雷公狗---javascript NO:20 面向对象历史起源
1.软件编程发展史面向机器面向过程面向对象案例:传智ERP系统咨询()à报名()à缴费()à分班()à学习()à就业() 面向过程:把一个系统分解为若干个步骤,每个步骤就是一个函数 func ...
夺命雷公狗---javascript NO:18 BOM模型
1.什么是BOM模型答:当我们打开某一web应用程序,系统会自动生成相关BOM模型,在该模型的最顶级对象是window,其他对象都是该对象的子对象. 2.BOM中常用的属性和方法 1)Window对 ...
夺命雷公狗---javascript NO:19 Navigator浏览器对象
Navigator浏览器对象 appCodeName:浏览器内核名称 appName :浏览器名称 appVersion :浏览器版本号 platform :操作系统信息 online:是否脱机工作 ...
夺命雷公狗---javascript NO:27 通过json调用12306查询车次信息
出发地:广州目的地:北京查询收费接口:数据聚合 http://www.juhe.cn/ 注册账号,申请12306接口进入控制应用里面里面有一个应用名称: 12306API 调用数据: ...
夺命雷公狗TP3.2.3商城2-----后台模版引入和后台控制器的创建
首先我们来到D:\phpStudy\WWW\shop\WEB 目录下,将Home目录进行复制一份,并且改名为Admin,如下所示: 然后将我们准备好的后台首页模版放入 D:\phpStudy\W ...
夺命雷公狗ThinkPHP项目之----商城10商品属性管理
我们一般做项目前就要分析业务逻辑先,这次也不例外. attr_type:是指属性的类型,有唯一,单选和多选之分唯一属性,是指用户在购买商品时,可以看到的扩展属性如下图所示: 单选属性,是指用户在购买 ...
夺命雷公狗---微信开发26----客服消息接口基础和推送视频
我们按照上一课的套路继续改写下index.php即可实现,代码如下所示: <?php /*** wechat php test*///define your token require_once ...
夺命雷公狗---微信开发39----微信语言识别接口1
语音识别接口的基本介绍注意: 由于客户端缓存,开发者开启或者关闭语音识别功能,对新关注者立即生效,对已关注用户需要24小时生效,开发者可以从新关注帐号进行测试. 我们可以在测试号下方的体验接口权限表 ...

夺命雷公狗---javascript NO:08 常用的事件

夺命雷公狗---javascript NO:08 常用的事件相关推荐

最新文章

热门文章