事件机制概念
当我们的行为动态满足了一定的条件后,会触发某类事务的执行
作用:主要结合函数来使用
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获取屏幕的高度分辨率