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:搜索引擎 ...
随机推荐
- COURSES---poj1469 hdu1083(最大匹配)
题目链接:http://poj.org/problem?id=1469 http://acm.hdu.edu.cn/showproblem.php?pid=1083 题意:有n个学生p门课, 每门 ...
- ansible(3)
一.setup模块 ansible的setup模块主要用来收集信息,查看参数: [root@localhost ~]# ansible-doc -s setup # 查看参数,部分参数如下: filt ...
- 【转】sql server 订阅发布、快照发布(一)
原文链接:https://blog.csdn.net/tiandi_5000/article/details/11646023 SQL SERVER 2012 使用订阅发布同步数据库(一) 2013年 ...
- 使用递归打印二叉树的左视图 java
使用递归打印二叉树的左视图 java package com.li.jinRiTouTiao; public class PrintLeftView { static class TreeNode{ ...
- PAT 1138 Postorder Traversal [比较]
1138 Postorder Traversal (25 分) Suppose that all the keys in a binary tree are distinct positive int ...
- SpringBoot 通过自定义注解实现AOP切面编程实例
一直心心念的想写一篇关于AOP切面实例的博文,拖更了许久之后,今天终于着手下笔将其完成. 基础概念 1.切面(Aspect) 首先要理解‘切’字,需要把对象想象成一个立方体,传统的面向对象变成思维,类 ...
- 35. Search Insert Position(二分查找)
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- PostgreSQL 9.3:在windows(包括win7)下的安装与正确配置
首先,以下是常用命令: ③ initdb 初始化 数据库. ④ pg_ctl start 启动数据库 ⑤ pg_ctl stop 停止数据库 ⑥ post_svc -install 建立windows ...
- 前端学习笔记之CSS过渡模块
阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...
- EL表达式判断条件要写在${}内
由于老没开发框架了,今天提取公共省市县三级联动组件时,使用jsp传参搞了半天才弄出来. 组件代码 $(function(){console.log("${param.init}") ...