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:搜索引擎 ...
随机推荐
- 9.python的列表
list2 = [1, 2, 3, 4, 5, 6, 7 ]; print ("list2[1:5]: ", list2[1:5]) 得到 list2[1:5]: [2, 3, ...
- python 异常处理、进程
目录: 异常处理 python进程 python并发之多进程 一.异常处理(try...except...) 1.程序中难免出现错误,而错误分成两种: a.语法错误: b.逻辑错误(逻辑错误) 2.异 ...
- [css]单/多行居中&字体设置
行高和字号 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在"行"上的. line-height: 40px; 文字,是在自己的行 ...
- spark 调优概述
分为几个部分: 开发调优.资源调优.数据倾斜调优.shuffle调优 开发调优: 主要包括这几个方面 RDD lineage设计.算子的合理使用.特殊操作的优化等 避免创建重复的RDD,尽可能复用同一 ...
- sdut 迷之容器（线段树+离散化）
#include <iostream> #include <algorithm> #include <string.h> #include <stdio.h& ...
- Django小项目web聊天
WEBQQ的实现的几种方式 1.HTTP协议特点 首先这里要知道HTTP协议的特点:短链接.无状态! 在不考虑本地缓存的情况举例来说:咱们在连接博客园的时候,当tcp连接后,我会把我自己的http头发 ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON HSerializedItem
zw版[转发·台湾nvp系列Delphi例程]HALCON HSerializedItem procedure TForm1.FormShow(Sender: TObject);var img, im ...
- [OpenCV入门教程之十二】OpenCV边缘检测：Canny算子,Sobel算子,Laplace算子,Scharr滤波器合辑
http://blog.csdn.net/poem_qianmo/article/details/25560901 本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog ...
- HDU1160FatMouse's Speed
#include<stdio.h> #include<string.h> #include<algorithm> #include<set> #incl ...
- c++第三十天
P154~p159:语句1.通常情况下顺序执行. 2.C++提供一组控制流(flow-of-control)语句以支持更复杂的执行路径. 3.空语句的作用:语法上需要一条语句,但是逻辑上不需要. ) ...