[摘要:Javascript事情先容 Event 工具代表事情的状况,比方事情正在个中产生的元素、键盘按键的状况、鼠标的地位、鼠标按钮的状况。 事情平常取函数联合应用,函数没有会正在事情产生前被]
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
下面列出几个常见的事件:
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:元素失去焦点
代码如下;
<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>
之后还实现了点击单数次变白色,偶数次变黑色
结果如下: