Javascript事件相关操作以及行为事件分离

当前位置：首页观点详细内容

Javascript事件相关操作以及行为事件分离

类别：观点更新时间： 2016-03-13

[摘要：Javascript事情先容 Event 工具代表事情的状况，比方事情正在个中产生的元素、键盘按键的状况、鼠标的地位、鼠标按钮的状况。事情平常取函数联合应用，函数没有会正在事情产生前被]

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>

实现结果：
Javascript事件相关操作以及行为事件分离_image0

当鼠标激活第一个输入框时，边框变成红色

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>

结果如下:
Javascript事件相关操作以及行为事件分离_image1

鼠标激活第一个输入框时，输入框边框变红色
鼠标离开一个输入框时，输入框回复原状

表单提交事件

描述如下：当遇到需要提交表单内容，例如填写注册页面时，若不用表单提交事件，而是将用户填写的所有信息一并提交给服务器，经由服务器判断是否合法后再返回给用户。该过程使得这一行为太过于繁琐与耗时，因此使用表单提交事件处理，即可在本地代码中先将用户输入的相关信息进行判断看其是否合法。好处之二：未使用表单提交事件处理，若经由服务器返回判断结果，若输入不合法，会重新刷新界面，使得之前填写的所有信息都消失。
使用表单提交事件处理，可以保证输入非法时，可让用户重新输入，其之前输入的信息还在。
事例代码如下：

<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>

常见的一些事件处理函数如下表：

Javascript事件相关操作以及行为事件分离_image2

鼠标 / 键盘属性

Javascript事件相关操作以及行为事件分离_image3

IE属性
Javascript事件相关操作以及行为事件分离_image4

标准Event属性
Javascript事件相关操作以及行为事件分离_image5

标准Event方法
Javascript事件相关操作以及行为事件分离_image6

行为事件分离

有点类似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>

之后还实现了点击单数次变白色，偶数次变黑色
结果如下：
Javascript事件相关操作以及行为事件分离_image7

感谢关注 V8指尖世界JS频道，v8en.com是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 V8指尖世界!

指尖世界

分享的乐趣