事件机制概念
当我们的行为动态满足了一定的条件后，会触发某类事务的执行
作用：主要结合函数来使用
js中添加事件的一种方式：
在HTML上直接使用事件属性进行添加，属性值为所监听的函数；js中的事件只有在当前html元素上有效；一个事件可以先监听多个函数的执行，但是不同的函数用分号隔开。
单双击事件
单击(onclick） 当鼠标单击时会触发
双击(ondbclick) 当鼠标双击时会触发
鼠标事件
onmouseover 当鼠标悬停在某个HTML元素上的时候触发
onmousemove 当鼠标在某个HTML元素上移动的时候触发
onmouseout 当鼠标在某个HTML元素上移出的时候触发
键盘事件
onkeyup 当鼠标在某个HTML元素上弹起的时候触发
onkeydown 当鼠标在某个HTML元素上下压的时候触发
焦点事件
onfocus 当某个HTML元素上获取焦点触发
onblur 当某个HTML元素上失去焦点触发
页面加载事件
onload 当页面加载成功后触发
代码如下：
<script type="text/javascript">
<!--
js的事件机制
注意js中添加事件的一种方式是
在html中直接使用事件属性进行添加属性为所监听执行的函数
一个html元素可以添加多个不同的单击-->
function testOnclick(){
alert("我是单击");
}
//测试双击
function testOndbclick(){
alert("我是双击");
}
//鼠标事件
function testOnmouseover(){
alert("我是鼠标悬停事件");
}
function testOnmousemove(){
alert("我被移动了");
}
function testOnmouseout(){
alert("我被移除了");
}
//键盘事件学习
function testOnkeyup(){
alert("我是键盘弹起事件了");
}
function testOnkeydown(){
alert("我是键盘下压事件");
}
//焦点事件
function testOnfocus(){
document.getElementById("showdiv").innerHTML="haha";
alert("我是获取焦点事件");
}
function testOnblur(){
alert("我是失去焦点事件");
}
//页面加载
function testOnload(){
alert("");
}
</script>
<style type="text/css">
#showdiv{
width:300px;
height:300px;
border:solid 1px;
}
</style>
</head>
<body onload="testOnload()">
<div>js的事件机制学习</div>
<input type="button" value="测试单击" onclick="testOnclick();" />
<input type="button" value="测试双击" onclick="testOndbclick();" />
<hr />
<br>
<br>
<div id="showdiv" Onmouseover="testOnmouseover()" Onmousemove="testOnmousemove()" Onmouseout="testOnmouseout()">
</div>>
<hr/>
键盘事件学习:<br>
键盘弹起事件：<input type="text" value="" onkeyup="testOnkeyup();"/><br><br>
键盘下压事件:<input type="text" value="" onkeyup="testOnkeydown();" /><br><br>
<hr />
焦点事件学习：<br>
获取焦点：<input type="text" value="" onkeyup="testOnfocus();" /><br />
失去焦点：<input type="text" value="" onkeyup="testOnblur();" /><br />
</body>
</html>
结合实际选择相应的事件
| 事件 | 添加位置 |
|---|---|
| onchange | select下拉框 |
| onload | body标签 |
| 单双击 | 用户会进行点击动作的HTML元素 |
| 鼠标事件 | 用户会进行鼠标移动操作的 |
| 键盘事件 | 用户会进行鼠标移动的HTML元素 |
事件的冲突
当事件的处罚条件包含相同部分的时候，会产生事件的冲突
事件的阻断
当事件所监听的函数返回值返回给事件时：
false:阻断当前事件所在的HTML标签的功能
true：继续执行当前事件所在的HTML标签的功能
超链接调用js函数（不属于事件）
<script type="text/javascript">
<a href="javascript:函数名()">调用js函数</a>
</script>
window对象
window对象不用new ，直接进行使用即可，类似于Math的使用方法，window关键字可以省略不写
框体方法
alert：警告框：提示一个警告信息，没有返回值
confirm:确认框，提示用户选择一项操作（确定/取消）点击“确定”，返回true;点击“取消”,返回flase
prompt:提示框：提示用户某个信息的录入和收集。点击“确定”，返回当前用户录入的数据；默认返回空字符串；点击“取消”，返回null
定时和间隔执行方法
setTimeout:指定时间后执行指定的函数
参数1：函数对象
参数2：时间，单位好毫秒
返回值：返回当前定时器的id
setInterval:每间隔指定的时间执行指定的函数
参数1：函数对象
参数2：时间，单位毫秒
返回值：返回当前间隔器的id
clearTimeout:用来停止指定的定时器；
参数：定时器的id
clearInterval:用来停止指定的间隔器：
参数：间隔期的id
子窗口方法
window.open(‘子页面的资源（相对路径）’，‘开卡方式’，‘配置’);
注意：关闭子页面的方法window.close();但是此方法只能关闭open方法打开Dev子页面
子页面调用父页面的函数
window.opener.父页面的属性
js的window对象常用属性
地址栏属性：location
window.location.href=“资源路径（相对路径（URL））”
window.location.reload()重新加载页面资源
历史记录属性
window.history.forward() 页面资源前进，历史记录前进
window.history.back() 页面资源后退，历史记录后退
window.history.go(index)跳转到指定的历史记录页面中
注意：window.history.go(0)相当于刷新
屏幕属性
window.screen.width; 获取屏幕的宽度分辨率
window.screen.height获取屏幕的高度分辨率
