BOM之JavaScript常用事件
body, table{font-family: 微软雅黑; font-size: 10pt}
table{border-collapse: collapse; border: solid gray; border-width: 2px 0 2px 0;}
th{border: 1px solid gray; padding: 4px; background-color: #DDD;}
td{border: 1px solid gray; padding: 4px;}
tr:nth-child(2n){background-color: #f8f8f8;}
鼠标移动事件
鼠标点击事件(click/dblclick/mousedown/mouseup)
加载与卸载事件(load/unload)
聚焦与离焦事件
|
键盘事件
提交与重置事件
选择与改变事件 //比如选地址,选完省份后面跟着跳出对应的市区
|
<script type="text/javascript">
//回调函数 我们没有显示的调用它。
function movefunc(event){
//window.status = "hello"; //浏览器左下角状态栏显示信息
window.status = event.clientX+","+event.clientY;
//alert("hello");
}
function clear(event){ //与上面相对,括号里可以不传参数
window.status = "清空了";
}
function over(){ //鼠标遇到div边界触发
//alert("I am in");
}
</script>
<center>
<div style="border:solid 2px; width:5cm; height:5cm" onmousemove = "movefunc(event)" onmouseout="clear(event)" onmouseover="over()">
</div>
|
<script type="text/javascript">
function function1(){
alert("你刚刚双击了!");
}
function function2(){
alert("你刚刚单击了!");
}
</script>
<input type="button" value="双击我" ondblclick="function1()">
<input type="button" value="单击我" onclick="function2()">
|
<script type="text/javascript">
function changePosition(){
var adv = window.document.getElementById("adv");
adv.style.top=Math.random()*60+"px";
adv.style.left=Math.random()*100+"px";
setTimeout("changePosition()",1000);
}
function showmsg(){
alert("要关闭了");
}
</script>
<body onload="changePosition()" onunload="showmsg()">
<div id="adv" style="position:absolute; top:0.5cm; left:1cm">
<a href="http://www.baidu.com" target="_blank"><img src="cartoon.gif" /></a>
</div>
|
<script type="text/javascript">
function cleardefault(){
document.getElementById("name").value="";
}
function validate(){
var psd= document.getElementById("psd").value ;
if(psd=="")
alert("密码不能为空")
}
</script>
<pre>
用户名 <input id="name" type="text" value="请在此输入姓名" onfocus="cleardefault()" onblur="alert('用户名不能为空')" ><br>
密 码 <input id="psd" type="password" value="" onblur="validate()">
</pre>
|
<script type="text/javascript">
function handle(event){
if(event.keyCode==13) //keycode 是对应键值的ascII码,确认是13
alert("你点击了确认键,请问是否要提交?")
}
</script>
<form method="post" action="">
<input type="text" value="123" onkeypress="handle(event)" />
</form>
|
<script type="text/javascript">
function confirm_xxx(){ //当用户点击表单里的提交按钮时,自动被调用
var confrimvalue= window.confirm("是不是要提交");
if( confrimvalue )
return true;
else
return false;
}
function showmsg(){
alert("数据已经复位!")
}
</script>
<form method="post" action="02inner.html" onsubmit="return confirm_xxx(this) onreset="showmsg()" >
<input type="submit" value="提交" onclick="alert('hello')"/>
//onclick不要也可以,点击提交会执行function
<input type="reset" value="重置" />
</form>
|
<script type="text/javascript">
function changCity(){
//先获取第一个select的值
var select1= document.getElementById("province")
citylist1=['济南','青岛','威海'];
citylist2=['长沙','岳阳','湘潭'];
var select2= document.getElementById("city")
if(select1.selectedIndex==1){
for(var i=0;i<citylist1.length;i++)
select2.innerHTML += "<option value=" +citylist1[i]+ ">"+citylist1[i]+"</option>"
}else{
for(var i=0;i<citylist2.length;i++)
select2.innerHTML += "<option value=" +citylist2[i]+ ">"+citylist2[i]+"</option>"
}
}
</script>
|
籍贯:
<select id="province" onchange="changCity()">
<option value="0">请选择省份</option>
<option value="1">山东</option>
<option value="2">湖南</option>
</select>
<select id="city"></select>
|
BOM之JavaScript常用事件的更多相关文章
- JavaScript常用事件
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 on ...
- javascript——常用事件总结
Event对象:Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件标签属性 当以下情况发生时,出现此事件 onabort 图像加载被中断 ...
- js中的BOM和DOM常用事件方法
笔记: window对象 ● window.innerHeight - 浏览器窗口的内部高度 ● window.innerWidth - 浏览器窗口的内部宽度 ● window.open() - 打开 ...
- JavaScript常用事件参考
onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档 ...
- javascript常用事件及方法
1.获取鼠标坐标,考虑滚动条拖动 var e = event || window.event; var scrollX = document.documentElement.scrollLeft || ...
- javascript之常用事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript基础之常用事件
js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...
- Javascript中常用事件集合和事件使用方法
Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...
- javaScript入门之常用事件
JS中的常用事件 onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适. onclick/ondblclick:鼠标单击和双击事件 onkeydown/onkeypress:搜索引擎 ...
随机推荐
- Python开发【笔记】:“~” 按位取反运计算方法
按位取反: 要弄懂这个运算符的计算方法,首先必须明白二进制数在内存中的存放形式,二进制数在内存中是以补码的形式存放的 原码 原码(true form)是一种计算机中对数字的二进制定点表示方法.原码表示 ...
- Python开发【模块】:time、datatime
时间模块 时间相关的操作,时间有三种表示方式: 时间戳 1970年1月1日之后的秒,即:time.time() 格式化的字符串 2014-11-11 11:11, ...
- django的restfulapi
Django Rest framework 的流程大概是这样的 建立 Models 依靠 Serialiers 将数据库取出的数据 Parse 为 API 的数据(可用于返回给客户端,也可用于浏览器显 ...
- Day01 html详解
day01 html详解 1.html的简介 1.1 什么是html? - HyperText Markup Language:超文本标记语言,网页语言 ...
- centos LB负载均衡集群 三种模式区别 LVS/NAT 配置 LVS/DR 配置 LVS/DR + keepalived配置 nginx ip_hash 实现长连接 LVS是四层LB 注意down掉网卡的方法 nginx效率没有LVS高 ipvsadm命令集 测试LVS方法 第三十三节课
centos LB负载均衡集群 三种模式区别 LVS/NAT 配置 LVS/DR 配置 LVS/DR + keepalived配置 nginx ip_hash 实现长连接 LVS是四层LB ...
- angry_birds_again_and_again(2014年山东省第五届ACM大学生程序设计竞赛A题)
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2877 题目描述 The problems ca ...
- monkey基础学习
原文地址https://blog.csdn.net/beyond_f/article/details/78543070 一.Monkey测试简介 Monkey测试是Android平台自动化测试的一种手 ...
- cookie、session、sessionid ,jsessionid 的区别
本文是转载虫师博客的文章http://www.cnblogs.com/fnng/archive/2012/08/14/2637279.html cookie.session.sessionid 与js ...
- Mbps MB/S Mb/s
以前都没有注意这几个的区别,今天百度科普了一下 所谓 10M 带宽,其实是指 10Mbps (兆比特) 1.平时所说的10m带宽,其实是指 10Mbps (兆比特)bit是计算机的最小位单位,1byt ...
- bzoj1619 / P2919 [USACO08NOV]守护农场Guarding the Farm
P2919 [USACO08NOV]守护农场Guarding the Farm 相似题:P3456 [POI2007]GRZ-Ridges and Valleys 按海拔是否相同分块 每次bfs海拔相 ...