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

最新推荐文章于 2022-06-07 14:36:13 发布

原创最新推荐文章于 2022-06-07 14:36:13 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript_DOM编程同时被 2 个专栏收录

9 篇文章

订阅专栏

JavaScript学习大全

8 篇文章

订阅专栏

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>