2024-1-4事件

目录

事件

HTML4.0的特性之一是有能力使HTML事件触发浏览器中的动作，比如当用户点击某个HTML元素时启动一段JavaScript。

常见的事件

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
 
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
 
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
 
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。

事件的一些问题

有一些绑定方法在绑定的时候可能无法使用一些标签

这里提供一个例子

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var a1Ele=document.getElementById("a1")
        console.log(a1Ele)//输出这个节点内的数据
    </script>
</head>
<body>
<div id="a1">内容</div>


</body>
</html>

结果如图

理想情况下，它应该会返回数据。但是为什么会这样，具体原因是节点的创建在文档加载前面，导致文档在加载的时候节点已经创建好了。类似你的钱还没到位，空壳公司已经挂好名了。

对于这种情况有一个window.onload

window.onload

当我们给页面上的元素绑定事件的时候，必须等到文件加载完毕。因为我们无法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。

例子如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var a1Ele = document.getElementById("a1")
            console.log(a1Ele)//输出这个节点内的数据
        }//这里使用window.onload方法

    </script>
</head>
<body>
<div id="a1">内容</div>
</body>
</html>

例子结果如图

绑定事件

绑定事件可以理解为给某些标签添加一些功能

绑定事件方法一:

例子如下


<!--绑定事件方法一-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function foo(){
            alert("无内容")//这里将弹出框事件绑定给foo()
        }
    </script>

</head>
<body>
<div id="a1" onclick="foo()">绑定事件方法一</div>


</body>
</html>

在上述代码中我给你id为a1的标签绑定了一个弹窗事件，只要一点击该标签就会出现弹窗

效果如下

绑定事件方法二：

例子如下

<!--绑定事件方法二-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="a1">绑定事件方法二</div>
<script>
    //绑定事件方法2
    var a1Ele = document.getElementById("a1")
    a1Ele.onclick = function () {
        alert("呵呵呵");
    };
</script>

</body>
</html>

在上述代码中script必须要在绑定了事件的标签后面，不过可以使用window.onload

修改如下

<!--绑定事件方法二-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var a1Ele = document.getElementById("a1")
            a1Ele.onclick = function () {
                alert("呵呵呵");
            };
        }//这里使用window.onload进行嵌套
    </script>

</head>
<body>
<div id="a1">绑定事件方法二</div>


</body>
</html>

效果如图

绑定事件带参数的情况

绑定事件方法一带参数的例子

<!--绑定事件方法一-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function foo(_this){
            // window对象
            console.log(this)
            // 当前函数的调用者
            console.log(_this)
            alert("无内容")//这里将弹出框事件绑定给foo()
        }
    </script>

</head>
<body>
<div id="a1" onclick="foo(this)">绑定事件方法一</div>


</body>
</html>

这里面的this是实参，表示触发事件的当前元素(window对象)。

函数定义过程中的_this为形参(当前函数的调用者)。

结果如下

posted @ 2024-01-04 18:53  scxlzb  阅读(142)  评论(0)    收藏  举报