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:搜索引擎 ...
随机推荐
- 小米范工具系列之二：小米范 web目录扫描器
最新版本1.1,下载地址:http://pan.baidu.com/s/1c1NDSVe 文件名scandir,请使用java1.8运行 小米范web目录扫描器主要功能是探测web可能存在的目录及文 ...
- linux 的nohup & 和daemon 总结(转)
add by zhj:守护进程貌似跟nohup + &方式启动的进程差不多.都可以实现与终端的无关联. 原文:http://blog.csdn.net/lovemdx/article/de ...
- Redis持久化磁盘IO方式及其带来的问题
有Redis线上运维经验的人会发现Redis在物理内存使用比较多,但还没有超过实际物理内存总容量时就会发生不稳定甚至崩溃的问题 一.对Redis持久化的探讨与理解 redis是一个支持持久化的内存数据 ...
- 模块讲解----subprocess模块
历史 #输出结果到屏幕上,并不返回执行状态os.system('dir')#保存命令的执行结果输出ret = os.popen('dir').read() 问题:上面2条是把命令结果保存下来了,但是返 ...
- Preview all adidas NMD Singapore colorways just below
A week ago, we've got a glimpse into adidas NMD Singapore for the future using their Tubular line. O ...
- c++11 类默认函数的控制："=default" 和 "=delete"函数 void fun() = default; void fun()=delete;
转自:lsgxeva #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #includ ...
- spring基础-01
IOC : inversion of 缩写, DI:dependency injection 即在调用者中注入被调用者的实例. AOP 面向切面编程,是代理模式的体现.spring默认使用JDK的动态 ...
- tp模板基础
目录简介 创建应用 在项目目录创建入口文件shop/index.php 创建虚拟主机,访问应 路由形式 路由: 系统从URL参数中分析出当前请求的分组.控制器.和操作的过程就是“路由”. Tp框架路由 ...
- Lyft Level 5 Challenge 2018 - Final Round (Open Div. 2)
A. The King's Race 签. #include <bits/stdc++.h> using namespace std; #define ll long long ll n, ...
- SecureCRT 下载，安装，绝佳配色，实用配置，上传下载配置合集
SecureCRT 下载,安装,绝佳配色,实用配置,上传下载配置合集 chocoball 发布于 2年前,共有 3 条评论 SecureCRT 是一款支持 SSH2.SSH1.Telnet.Telne ...