JS事件基础和事件处理器学习笔记

最新推荐文章于 2023-06-27 22:58:55 发布

weixin_41387874

最新推荐文章于 2023-06-27 22:58:55 发布

阅读量158

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41387874/article/details/116133120

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

写在之前

什么是事件？
- 当我们点击<input>元素的按钮后，浏览器会进行各种操作，如：提交表单等。在这个例子里，我们点击就是一个事件。
一个事件应该被分为3部分：
- 事件主角，是按钮、div元素等，在上面例子中，按钮就是事件主角。
- 事件类型，是点击、移动、悬浮等，在上面例子中，事件类型是点击。
- 事件过程，在这个事件中都发生了什么，在上面例子中，提交表单就是事件过程。
事件处理器，如：onclick，不能为一个DOM对象创建多个相同事件，在需要给一个DOM对象创建多个相同事件时，只能使用事件监听器。
- 如：很多个window.onload，JavaScript只会处理最后一个window.onload，这时就需要使用事件监听器。
使事件处理器等于null可以解除事件处理器，如：DOMObject.onclick = null; 。

JavaScript中常见事件（按事件主角划分）

鼠标事件
键盘事件
表单事件
编辑事件
页面事件

调用事件的方法

在<script>元素中调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            window.onload = function()
            {
                var oInput2 = document.getElementsByClassName("class1")[0];
                oInput2.onclick = function()
                {
                    var oInput1 = document.getElementById("id_1");
                    alert(oInput1.value);
                }
            }
        </script>
    </head>
    <body>
        <input id="id_1" type="text"/>
        <input class="class1" type="button" value="按钮"/>
    </body>
</html>

DOMObject.onclick = function()
{
};

DOMObject是指一个DOM对象，也就是一个元素对象，可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获取。
获取元素节点
onclick是事件名，也可以使用其他事件名，如：onkeydown表示键盘按下事件。
最后加分号的原因是，这个本质上是赋值语句，JS每条语句结尾都需要加上";"，但不加也不会报错。

在元素中调用

使用元素的事件属性来调用事件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
             function event1()
             {
                 var oInput1 = document.getElementById("id_1");
                 alert(oInput1.value);
             }
        </script>
    </head>
    <body>
        <input id="id_1" type="text"/>
        <input class="class1" type="button" value="按钮" onclick="event1()"/>
    </body>
</html>

更倾向于使用在<script>元素中进行事件操作

鼠标事件

常见的鼠标事件有6种：

鼠标事件	作用
onclick	用于表示鼠标单击事件，鼠标点击并松开这一整个过程才算鼠标单击
onmouseover	用于表示鼠标移入事件，如鼠标移入div元素
onmouseout	用于表示鼠标移出事件
onmouseout	用于表示鼠标移出事件
onmousedown	用于表示鼠标按下事件
onmouseup	用于表示鼠标抬起事件
onmousemove	用于表示鼠标移动事件

鼠标单击事件

我们可以为任何元素添加鼠标单击事件。

鼠标移入、移出事件

onmouseover表示用户把鼠标移到某一个元素上。
onmouseout表示用户把鼠标移出某个元素。

下面的示例代码表示：

鼠标移入div元素，触发移入事件：把div元素的background-color变成蓝色。
鼠标移出div元素，触发移出事件：把div元素的background-color变成红色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            div{border:1px solid black;background-color:red;width:100px;height:100px;padding:20px;text-align:center;vertical-align:middle;}
        </style>
        <script>
            window.onload = function()
            {
                var oDiv = document.getElementById("div1");
                oDiv.onmouseover = function()
                {
                    oDiv.style.backgroundColor = "blue";
                };
                oDiv.onmouseout = function()
                {
                    oDiv.style.backgroundColor = "red";
                };
            };
        </script>
    </head>
    <body>
        <div id="div1">aaa</div>
    </body>
</html>

鼠标按下和鼠标松开事件

onmousedown表示用户按下鼠标。
onmouseup表示用户松开鼠标。
鼠标按下和鼠标松开事件常用于实现拖拽等效果。

下面代码示例表示：

鼠标在div元素上按下，触发鼠标按下事件：把div元素的颜色改成蓝色。
鼠标在div元素上松开，触发鼠标松开事件：把div元素的颜色改成红色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            div{border:1px solid black;background-color:red;width:100px;height:100px;padding:20px;text-align:center;vertical-align:middle;}
        </style>
        <script>
            window.onload = function()
            {
                var oDiv = document.getElementById("div1");
                oDiv.onmousedown = function()
                {
                    oDiv.style.backgroundColor = "blue";
                }
                oDiv.onmouseup = function()
                {
                    oDiv.style.backgroundColor = "red";
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">aaa</div>
    </body>
</html>

键盘事件

常见的键盘事件有2种：

j键盘事件	作用
onkeydown	用于表示键盘按下事件，表示键盘按下的瞬间就触发事件
onkeyup	用于表示键盘松开事件，表示键盘松开的瞬间就触发事件

键盘事件一般用于操作表单（如：统计输入字符个数）、操作动画（如：在游戏中控制游戏人物的行动）。

键盘按下事件

键盘任何一个键按下的瞬间会触发键盘按下事件。
因为是键盘按下的瞬间触发事件，所以用onkeydown事件来统计输入字符个数是会出错的，所以一般使用onkeyup来统计输入字符数量。

下面的示例程序表示：利用键盘按下事件统计输入字符数量。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
        </style>
        <script>
            window.onload = function()
            {
                var oText1 = document.getElementById("text1");
                var len = 0;
                oText1.onkeydown = function()
                {
                    len = oText1.value.length;
                    var oDiv = document.getElementsByClassName("class1")[0];
                    oDiv.innerHTML = len;
                }
            }
        </script>
    </head>
    <body>
        <input id="text1" type="text" />
        <div class="class1"></div>
    </body>
</html>

键盘松开事件

键盘任何一个键松开的瞬间会触发键盘松开事件。
键盘松开事件可以用来统计输入字符数量。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
        </style>
        <script>
            window.onload = function()
            {
                var oText1 = document.getElementById("text1");
                var len = 0;
                oText1.onkeydown = function()
                {
                    len = oText1.value.length;
                    var oDiv = document.getElementsByClassName("class1")[0];
                    oDiv.innerHTML = len;
                }
            }
        </script>
    </head>
    <body>
        <input id="text1" type="text" />
        <div class="class1"></div>
    </body>
</html>

weixin_41387874

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS事件基础和事件处理器学习笔记

写在之前什么是事件？当我们点击<input>元素的按钮后，浏览器会进行各种操作，如：提交表单等。在这个例子里，我们点击就是一个事件。一个事件应该被分为3部分：事件主角，是按钮、div元素等，在上面例子中，按钮就是事件主角。事件类型，是点击、移动、悬浮等，在上面例子中，事件类型是点击。事件过程，在这个事件中都发生了什么，在上面例子中，提交表单就是事件过程。JavaScript中常见事件（按事件主角划分）鼠标事件键盘事件表单事件编辑事件页面事件调用事件
复制链接

扫一扫