JavaScript之事件

最新推荐文章于 2022-03-18 21:55:22 发布

零怀念

最新推荐文章于 2022-03-18 21:55:22 发布

阅读量271

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/linghuainian/article/details/81736199

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

        function f1() {
            var input=document.getElementsByName("username")[0];
                input.style.border = "2px solid red";

        }
        function f2() {
            var input=document.getElementsByName("username")[0];
            input.style.border="";
        }
        function f3() {
            var input=document.getElementsByName("email")[0];
            input.style.background="red";
        }
        function f4() {
            var input=document.getElementsByName("email")[0];
            input.style.background="";
        }
        function f5() {
            alert("请填写完整");
            return false;
        }
        function f6() {
            alert("图像加载完毕");
        }
        function f7() {
            alert("页面加载完毕")
        }

        //等同于：
        //  window.onload=function () {
        //       alert("页面加载完毕")
        // }
        window.onload=f7;//思考：这里能否加引号以及加括号与不加括号的区别？
    </script>
</head>

<body >
<h1>获得焦点与失去焦点事件</h1>
    用户名：<input type="text" name="username" onfocus="f1()" onblur="f2()">
<h1>鼠标经过事件</h1>
<input type="text" name="email" onmouseover="f3()" onmouseout="f4()"/>
<h1>表单提交事件</h1>
<form action="test.html" onsubmit="return f5()" ><!--这里加return是为了阻止表单提交和跳转到另一个页面，它把它拦截到了当前表单的页面（f5()方法要返回false）-->
<input type="submit" >
</form>
<h1>onload事件</h1>
<img src="20171122191603_896cd9.jpg" onload="f6()">
</body>

</html>

运行结果：

结构行为样式相分离

示例：让代码的html结构，style结构，onclick事件相分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>

<body >
    <div id="test" ></div>
</body>
<script>
    function change() {
        document.getElementById("test").style.background="pink";
    }
    document.getElementById("test").onclick=change;//思考，这里为什么不加括号？

/*    以上4行代码也可以合并用如下的匿名函数:
    document.getElementById("test").onclick=function () {
        this.style.background="pink";
    }*/
</script>

</html>

调用函数时加括号与不加括号的区别

上面两个例子中有两处代码分别是window.οnlοad=f7和document.getElementById("test").οnclick=chage，为什么这里的事件调用函数都没有加括号，而html代码里onclick属性的引号里调用函数都要加括号呢？

当在js中事件调用函数的时候，不加括号其实就是把函数的指针赋予了事件，此时，事件与那个函数引用了同一块地址，两者是等同的，当事件发生时才执行函数体；而如果不加括号的话，js执行到那行代码就会执行函数体，不会等事件被触发。

而在html中，onclick属性中的内容其实就是在conclick函数里的内容，可以做一下测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body >
<div id="test" onclick="change();console.log('hello world');"></div>
</body>
<script>
    function change() {
        document.getElementById("test").style.background="pink";
    }
    console.log("1:"+document.getElementById("test").onclick)
    console.log("2:"+document.getElementById("test").getAttribute("onclick"))

</script>

</html>

打印结果：

可以看出，上面的onclick属性引号里的内容其实是在onclick函数里的。明白这一点，甚至可以在里面写其他js语句，如我上面写的打印hello world的语句。

你可能会怀疑，js中是否也是这样？我们也可以来做一下测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body >
<div id="test" ></div>
</body>
<script>
    function change() {
        document.getElementById("test").style.background="pink";
    }
    document.getElementById("test").onclick=change;
    console.log("1:"+document.getElementById("test").onclick)
    console.log("2:"+document.getElementById("test").getAttribute("onclick"))

</script>

</html>

打印结果：

可以看到，js和html中的不同。js中的事件就是函数，不存在包含关系了。它们俩引用的是同一个地方。

事件对象

先导知识：js函数内默认有个默认变量，保存你的入参，叫:arguments，它是一个数组。

event对象代表事件的状态，是js的一个系统内置对象。平时无法使用，当DOM元素发生按键、鼠标等等各种事件时，系统会自动根据DOM元素触发的事件生成一个event对象。这个event对象怎么传递呢？我看到的都说和浏览器的类型有关，在chrome浏览器中，event对象作为事件函数的第一个参数传入，默认名称为event；在ie中event作为window的属性，是一个全局变量。但是我测试了这两个浏览器，好像都一样，event对象既是全局变量又作为第一个参数被传入了。不知道我测试的是不是有问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body >
<div id="test" onclick="change();console.log('1:'+window.event);console.log('2:'+arguments[0])" ></div>
</body>
<script>
    var i
    function change() {
        console.log('3:'+window.event)
    }
    console.log(document.getElementById("test").onclick)


</script>

</html>

在chrome中运行（点击div）：

在IE中运行（点击div）：

可以看到两个浏览器的运行结果是一样的。

另外，你可以自定义第一个参数的名称，传的反正都是event对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 300px;
            width: 300px;
            background: blue;
        }
    </style>
</head>
<body >
<div id="test"  ></div>
</body>
<script>
    var i
    function change(e) {
        console.log('3:'+window.event)
        console.log('4:'+arguments[0])
        console.log('5:'+e)
    }
    document.getElementById("test").onclick=change;
    console.log(document.getElementById("test").onclick)
    
</script>

</html>

运行结果（点击方块）：

这样也能看出，在chrome浏览器中event对象既是window上定义的一个变量，也是onclick函数的第一个参数。

事件委托

把事件添加给父级元素，在父级元素的事件函数中利用event对象的target属性来获取触发事件的具体子元素，再对其进行操作。

示例：点击方块，变色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            height: 100px;
            width: 200px;
            background: white;
            border: 0;
            border-collapse: collapse;

        }
        td{
            border: 1px solid black;
        }
    </style>
</head>
<body >
<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>
</table>
</body>
<script>
    document.getElementsByTagName("table")[0].onclick=function (ev) {
        ev.target.style.background="green";
    }

</script>

</html>

运行效果：