web 学习笔记4-BOM和JavaScript事件
2017-04-23 23:31
731 查看
1、BOM的概述:
2、window的属性：
3、history对象：
4、location对象：
5、常用事件：
browser object modal :浏览器对象模型。 浏览器对象：window对象。 Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
2、window的属性：
innerHeight:
innerWidth: IE不支持
通用写法：document.body.clientWidth
document.body.clientHeight
self :等同于window对象
parent：是打开窗口的父窗口对象
opener：是打开窗口的父窗口对象。
2种情况下使用opener:
1.使用winodw.open()方法打开的页面
2.超链（里面的target属性要设置成_blank）
2种情况下使用parent:
1.iframe 框架
2.frame 框架
frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.
open方法，是打开一个页面.
window.open("sub.html","","width=200,height=200,status=no,titlebar=no,menubar=no,toolbar=no,resizable=0") ;
close方法：
window.close() ;
例如：
function init(){
var x = window.document.body.clientWidth ;
var y = window.document.body.clientHeight ;
alert(x + ":" + y) ;
}
一般opener用的会多一点
opener属性：
<script type="text/javascript">
<!--
//示例： 将子窗口中的文本框中的数据传递到父窗口中的文本框中显示
function fun(){
//1.拿到文本框中填写的数据
var v = document.getElementById("txt").value ;
//2.拿到父窗口对象
var w = window.opener ;
//3.拿到父窗口中的文本框对象
var txt = w.document.getElementById("txt") ;
//4.将内容赋值给父窗口中的文本框对象的value属性
txt.value = v ;
}
//-->
</script>
parent属性：
<script type="text/javascript">
<!--
function fun(){
//1.拿到文本框中填写的数据
var v = document.getElementById("txt").value ;
//2.拿到父窗口对象
var w = window.parent;
//3.拿到父窗口中的文本框对象
var txt = w.document.getElementById("txt") ;
//4.将内容赋值给父窗口中的文本框对象的value属性
txt.value = v ;
}
//-->
</script>
对话框：
1)消息框 alert() ;
2)确认框 confirm() ;
3)输入框 prompt() ; 一般用的比较少，因为没有人喜欢界面老是弹出框
例如：
window.alert("你好") ;
while(true){
if(confirm("按确定才能推出") == false)
continue ;
break ;
}
var a = prompt("请输入年龄：",12) ;
alert(a) ;
定时器：
setTimeout ,setInterval
1.setTimeout() :只会调用1次
2.setInterval() ：每隔一段时间调用1次
例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>window对象的计时器</title>
</head>
<script type="text/javascript">
<!--
var t ;
var t1 ;
function fun(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ;
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
t = setTimeout("fun()",1000) ;//注意必须放在里面，因为只会调用一次，如果放在外面执行完就不会再执行了
}
function fun1(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ;
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
}
function fun2(){
clearTimeout(t) ;
}
//t1 = setInterval("fun1()",1000);
function fun3(){
clearInterval(t1) ;
}
function fun4(){
t1 = setInterval("fun1()",1000);
}
//-->
</script>
<body>
<p id = "p">10</p><br>
<input type="button" value="setTimeout" onclick="fun()">
<input type="button" value="clearTimeout" onclick="fun2()">
<input type="button" value="setInterval" onclick="fun4()">
<input type="button" value="clearInterval" onclick="fun3()">
</body>
</html>
模态窗体:窗口不关闭就不能进入到其他的页面
window.showModelessDialog("你好");3、history对象：
a.forward()前进 b.back() 后退 c.go(n) 正数是前进，负数是后退.
4、location对象：
1.href 属性： 是指要连接到其他的URL
写法一、window.location.href='test.html' ；
写法二、window.location='test.html' ；
2.reload方法: 刷新
写法： window.location.reload() ；
例如：
<script type="text/javascript">
<!--
function fun(){
//window.location.href = "test.html" ;
window.location = "test.html" ;
}
function fun1(){
window.location.reload();
}
//-->
</script>
<body>
<input type="button" value="test.htmll" onclick="fun()">
<input type="button" value="重新加载本页面" onclick="fun1()">
</body>5、常用事件：
鼠标移动事件
onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
onmouseover : 鼠标悬停事件
onmouseout : 鼠标移出事件
鼠标点击事件
onclick
加载与卸载事件
onload ,onunload
聚焦与离焦事件
onfocus, onblur
键盘事件
onkeypress,onkeyup,onkeydown
提交与重置事件
onsubmit,onreset
选择与改变事件
例如鼠标移动事件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>鼠标的移动事件</title>
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red ;
}
</style>
</head>
<script type="text/javascript">
<!--
//示例：当鼠标在div上移动的时候显示鼠标的坐标
function fun(e){
var x = e.clientX;
var y = e.clientY ;
//显示在文本框中
var txt = document.getElementById("txt") ;
txt.value = x + " :" + y ;
}
//-->
</script>
<body>
<input type="text" name="" id = "txt">
<div onmousemove = "fun(event)"></div>//注意一定要将event传过去
</body>
</html>
例如悬停和移除事件：注意一个标签设置2个事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>鼠标的悬停及移出事件</title>
<style type="text/css">
.one{
color:red ;
border:6px solid green ;
cursor:hand;
}
</style>
</head>
<script type="text/javascript">
<!--
function fun(){
//拿到p标签对象
var p = document.getElementById("p") ;
//定义p的样式
//p.style.color = "red" ;
//p.style.border = "5px dashed green" ;
p.style.backgroundColor = "red" ;
p.className = "one" ;//使用css类选择器
}
function fun1(){
//拿到p标签对象
var p = document.getElementById("p") ;
p.className = "" ;
}
//-->
</script>
<body>
<p onmouseover = "fun()" onmouseout= "fun1()" id = "p">你好</p>//注意标签里面可以写2个鼠标事件
</body>
鼠标的单击事件：
<script type="text/javascript">
<!--
//示例：点击按钮让图片消失
function init(){
//拿到按钮对象
var btn = document.getElementById("btn") ;
var btn1 = document.getElementById("btn1") ;
//动态注册事件
btn.onclick = function(){
//拿到图片对象
var img = document.getElementById("img") ;
img.style.display = "none" ;
this.disabled = "true" ;
}
btn1.onclick = function(){
//拿到图片对象
var img = document.getElementById("img") ;
img.style.display = "block" ;
//删除属性
var btn = document.getElementById("btn") ;
btn.removeAttribute("disabled") ;
}
}
function fun2(obj){
obj.value = "新浪" ;
}
//-->
</script>
<body onload = "init()">
<img src = "images/2.gif" id = "img">
<input type="button" value="图片不见了" id = "btn">
<input type="button" value="显示图片" id = "btn1">
<input type="button" value="搜狐" id = "btn2" onclick = "fun2(this)">
<p id = "p"></p>
</body>
加载与卸载事件：
<body onload = "fun(),fun1()" onunload = "fun2()">
aaaaaaaa
</body>
聚焦离焦事件
<body>
<input type="text" name="" onfocus = "fun(this)" onblur = "fun1(this)">
</body>
键盘事件
<script type="text/javascript">
<!--
function fun(obj,e){
//拿到按键的asc码
obj.value = e.keyCode ;
}
//-->
</script>
<body>
<input type="text" name="" onkeypress = "fun(this,event)">
</body>
提交与重置事件
<script type="text/javascript">
<!--
function check(form){
//拿到文本框中的内容
var txt = form.username.value ;
//判断内容
if(txt == ""){
document.getElementById("sname").innerHTML = " <font color = red>* 姓名必须填写</font>" ;
form.username.focus() ;
return false;
}
return true ;
}
function fun(form){
alert("重置事件") ;
return true ;
}
//-->
</script>
<body>
<form method="post" action="01-鼠标的单击事件.html" onsubmit = "return check(this)" onreset = "return fun(this)">
姓名:<input type="text" name="username"><span id = "sname"></span><br>
<input type="submit" value = "提交">
<input type="reset" value = "重置">
</form>
</body>
选择与改变事件
<script type="text/javascript">
<!--
function fun(obj){
alert(obj.value) ;
}
function fun1(v){
alert(v) ;
}
function fun2(v,index){
alert(v + ":" + index) ;
}
//-->
</script>
<body>
<input type="text" name="" onselect = "fun(this)" onchange = "fun1(this.value)" >
<select onchange = "fun2(this.value,this.selectedIndex)">
<option value = "china">中国</option>
<option value = "america"> 美国</option>
<option value = "japan">日本</option>
</select>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员--Java学习笔记之Web开发—JavaScript常用触发事件总结
- 【Web前端学习笔记】Javascript_04_BOM,DOM思想,正则表达式
- JavaScript学习笔记 3-if-then 和Link Events(链接事件)
- JavaScript 学习笔记（十六） js事件
- JavaScript 学习笔记【二】——事件侦听兼容写法
- Box2d的javascript版本Box2dWeb-2.1a.3学习笔记（一）
- javascript事件学习笔记
- javascript学习笔记-事件处理
- （13）JavaScript学习笔记 - Web浏览器环境
- JavaScript高级程序设计 事件学习笔记
- javascript学习笔记 第13章 事件
- javascript学习笔记之事件和事件处理
- JavaScript 学习笔记 之事件
- （13）JavaScript学习笔记 - Web浏览器环境
- javascript 事件模型学习笔记
- Javascript学习笔记13——关于响应事件
- Javascript学习指南（第2版）笔记(三) 排错、调试、事件捕获
- Javascript学习指南（第2版）笔记(四) 表单、表单事件及校验
- javascript学习笔记[8]--BOM基本应用
- JavaScript高级程序设计（第3版）学习笔记14——浏览器对象模型BOM