Javascript事件介绍
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
下面列出几个常见的事件:
onfocus事件
onfocus获得元素焦点事件:
示例代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function t1(){
document.getElementsByName('username')[0].style.border='1px solid red';
}
</script>
<body>
<h1>onfocus onblur事件</h1>
<p>
用户名<input type ="text" name = "username" onfocus = "t1();/>
</p>
<p>
email:<input type = "text" name ="email">
</p>
</body>
</html>
实现结果:
当鼠标激活第一个输入框时,边框变成红色
onblur事件
onblur:元素失去焦点
代码如下;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function t1(){
document.getElementsByName('username')[0].style.border='1px solid red';
}
function t2(){
document.getElementsByName('username')[0].style.border='';
}
</script>
<body>
<h1>onfocus onblur事件</h1>
<p>
用户名<input type ="text" name = "username" onfocus = "t1();" onblur="t2()"/>
</p>
<p>
email:<input type = "text" name ="email">
</p>
</body>
</html>
结果如下:
鼠标激活第一个输入框时,输入框边框变红色
鼠标离开一个输入框时,输入框回复原状
表单提交事件
描述如下:当遇到需要提交表单内容,例如填写注册页面时,若不用表单提交事件,而是将用户填写的所有信息一并提交给服务器,经由服务器判断是否合法后再返回给用户。该过程使得这一行为太过于繁琐与耗时,因此使用表单提交事件处理,即可在本地代码中先将用户输入的相关信息进行判断看其是否合法。好处之二:未使用表单提交事件处理,若经由服务器返回判断结果,若输入不合法,会重新刷新界面,使得之前填写的所有信息都消失。
使用表单提交事件处理,可以保证输入非法时,可让用户重新输入,其之前输入的信息还在。
事例代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function t1 () {
alert('who');
}
function t2(){
alert('请填写完整');
return false;
}
</script>
<body>
<h1>表单提交事件</h1>
<form action ='25.html' onsubmit ='return t2()'>
<p><input type = "text" name='username' ></p>
<p><input type = "text" name='email' ></p>
<p><input type = "submit" value='提交' ></p>
</form>
</body>
</html>
常见的一些事件处理函数如下表:
鼠标 / 键盘属性
IE属性
标准Event属性
标准Event方法
行为事件分离
有点类似Java中的MVC模式开发,即将html中的body主体与script脚本以及css属性分离开来,各司其职,互不干涉
实例代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title></title>
</head>
<style type="text/css">
div{
width: 300px;
height: 100px;
border: 1px solid red;
}
</style>
<body>
<div>
<p>
<ul>
<li>好的</li>
</ul>
</p>
</div>
</body>
<script type="text/javascript">
document.getElementsByTagName('div')[0].onclick = function () {
this.style.border = "1px solid green";
}
</script>
</html>
利用所学知识编写一个永远抓不到的图片
实现方法:
加载图片,设置鼠标移动事件。若鼠标移动到图片所在位置,图片相应位置改变一定距离,实现永远触碰不到图片
示例代码如下;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title></title>
</head>
<style type="text/css">
img{
width: 200px;
height: 200;
position: relative;
left: 0px;
top: 0px
}
</style>
<body>
<img src="./photo.jpg">
</body>
<script type="text/javascript">
document.getElementsByTagName('img')[0].onmouseover=function (ev) {
console.log(ev);
this.style.left = ev.pageX+10+'px';
this.style.top=ev.pageY+10+'px';
}
</script>
</html>
事件委托
实例:有一个二维表格,每点击一次单元格,该单元格变成黑色。用到了事件委托技术
点击了td标签,需将td标签的对象委托给父标签table标签,然后在通过父标签的target属性获得点击了的是哪一个标签
具体代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<title>事件委托</title>
</head>
<style type="text/css">
table{
width: 400;
height: 400;
border: 0;
border-collapse: collapse;
background: green;
}
td{
border: 1px solid gray;
}
</style>
<body>
<h1>事件委托</h1>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script type="text/javascript">
var num =0;
document.getElementsByTagName('table')[0].onclick=function(ev){
ev.target.style.background=num++%2?'black':'white';
}
/*
var tds = document.getElementsByTagName('td');
var i =0 ;
while(i<tds.length){
tds[i].onclick = function(){
this.style.background ='black';
}
i++;
}
*/
</script>
</html>
之后还实现了点击单数次变白色,偶数次变黑色
结果如下: