H5前端开发——事件处理-EW帮帮网

H5前端开发——事件处理

在H5前端开发中，事件处理是非常重要的一部分。通过事件处理，可以实现对用户操作的响应和交互。以下是几种常见的事件处理方式：

HTML事件处理：
- 在HTML标签上直接设定事件处理函数，如<button onclick="myFunction()">点击我</button>。
- 这种方式简单快捷，适用于简单的交互操作，但不推荐在大型项目中使用，因为它将HTML与JavaScript代码耦合在一起。
DOM元素属性添加事件处理：
- 使用JavaScript获取DOM元素的引用，并使用元素对象的属性（如element.onclick、element.onmouseover）设置事件处理函数。
- 这样可以将HTML与JavaScript代码分离开来，使代码更加清晰可维护。
addEventListener方法：
- 使用addEventListener方法来向DOM元素添加事件监听器，语法如下：
```
element.addEventListener(event, function, useCapture);
```
- event参数为要监听的事件类型，如click、mouseover等。
- function参数为事件触发时执行的函数。
- useCapture参数指定事件是在捕获阶段处理还是在冒泡阶段处理，默认为false，即在冒泡阶段处理。
- 通过addEventListener方法添加的事件处理函数可以添加多个，而不会覆盖之前的处理函数。
事件委托：
- 通过将事件处理程序添加到DOM树中的父元素上，利用事件冒泡原理来处理子元素的事件。
- 这种方式可以减少事件处理程序的数量，提高性能，尤其适用于需要对多个子元素进行相同操作的情况。
jQuery事件处理：
- 使用jQuery库简化事件处理。
- 通过on()方法来添加事件监听器，语法如下：
```
$(selector).on(event, function);
```
- 这样可以实现与addEventListener类似的效果，同时提供了更简洁易用的API。

以上是H5前端开发中常见的事件处理方式。根据具体的需求和项目要求选择合适的方式来处理事件，使网页交互更加友好和灵活。

我们来编写两个事件处理案列，体验一下事件处理。

1.实现改变下拉菜单内容时，相应元素随之变化。参考效果如下：
在这里插入图片描述
本文所需资源链接，需要的小伙伴可以自行下载：
链接：https://pan.baidu.com/s/1ieF1EBwQn1DxzKWaO-OO2g?pwd=1234
提取码：1234

完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>onchange应用-更改图片</title>
    <style>
        select {
            margin: 15px;
            width: 200px;
            height: 30px;       
        }
        body {
            background: url(images/1.jpg) no-repeat 20px 60px;
        }
    </style>
</head>
<body>
<select name="" id="sel" onchange="changeImg()">
    <option value="1">“祝融”探火</option>
    <option value="2">“羲和”逐日</option>
    <option value="3">“天和”遨游星辰</option>   
</select>
<script>
    function changeImg() {
        var select = document.getElementById("sel"); // 获取下拉菜单元素
        var value = select.value; // 获取选中的值
        var body = document.getElementsByTagName("body")[0]; // 获取body元素

        switch (value) { // 根据选中的值改变相应的图片
            case "1":
                body.style.backgroundImage = "url(images/1.jpg)";
                break;
            case "2":
                body.style.backgroundImage = "url(images/2.jpg)";
                break;
            case "3":
                body.style.backgroundImage = "url(images/3.jpg)";
                break;
        }
    }
</script>
</body>
</html>

代码详细解析：

当选择框的选项发生变化时，onchange事件将触发JavaScript函数changeImg()。以下是对代码的详细解析：

CSS部分：

select样式设置了下拉菜单的外观，包括边距、宽度和高度。
body样式设置了页面主体（body元素）的背景图像，初始为images/1.jpg（相对路径）。
HTML部分：

创建一个select元素作为下拉菜单，并给其设置一个唯一的id属性，以便能够在JavaScript中获取该元素的引用。
在select元素内创建了三个option元素，每个元素表示一个可选项，包含一个value属性和显示文本。这些值将用于在JavaScript中切换背景图片。
JavaScript部分：

changeImg()函数用于更改背景图片。
通过getElementById()方法获取id为sel的元素引用，并将其赋值给select变量。
通过select.value获取当前选中的值，并将其赋值给value变量。
通过getElementsByTagName()方法获取body元素的引用，并将其赋值给body变量。
使用switch语句根据选中的值切换背景图片：
如果值为1，则将body.style.backgroundImage设置为url(images/1.jpg)，即使用images/1.jpg作为背景图片。

如果值为2，则将body.style.backgroundImage设置为url(images/2.jpg)。
如果值为3，则将body.style.backgroundImage设置为url(images/3.jpg)。
这样，当选择框选项发生改变时，相应的背景图片将自动更新为对应的图片。
总体而言，这段代码通过JavaScript监听选择框的变化事件，并根据不同的选择值切换页面的背景图片。

2.当多行文本输入时，如果字符数没有超过限定值，则显示剩余字符数，否则限制输入
效果：
在这里插入图片描述

完整代码：

<html>

<head>
    <style>
        textarea {
            width: 500px;
            height: 300px;
            font-size: 16px;
            line-height: 2;
        }
    </style>

</head>

<body>
    <textarea></textarea>
    <div>文字最大长度: 200字符, 还剩: <span id="chLeft">200</span>字符</div>
    <script type="text/javascript">
        var txt = document.querySelector('textarea');
        txt.oninput = function () {
            var maxChars = 200;
            //如果字符数超过限定值，则截取字符串的前200个字符显示
            if (this.value.length > maxChars) {
                //substring() 方法从字符串中提取两个位置之间的字符，并返回子字符串。
                this.value = this.value.substring(0, maxChars);
            } else { //计算剩余字符并显示
                var curr = maxChars - this.value.length;                
                document.getElementById("chLeft").innerHTML = curr.toString();
            }
        }
    </script>
</body>

</html>

代码详细解析：
这段代码是用 HTML、CSS 和 JavaScript 实现一个文本框限制输入字符数的功能。以下是对代码的详细解析：

CSS部分：
textarea元素的样式设置了文本框的宽度、高度、字体大小和行高。

HTML部分：
创建一个textarea元素，作为用户输入文本的区域。
创建一个div元素，用于显示剩余字符数。
在div元素内部创建一个span元素，并给其设置一个唯一的id属性，以便能够在JavaScript中获取该元素的引用。
JavaScript部分：

document.querySelector(‘textarea’)通过查询选择器选择第一个textarea元素并将其赋值给txt变量。
在txt对象上设置oninput事件处理程序，当文本框的内容发生变化时将触发该事件。
定义maxChars变量用于指定允许输入的最大字符数为200个。
如果输入字符数超过200个，则使用substring()方法截取前200个字符，并将结果赋值回文本框，即只显示前200个字符。
否则，计算出剩余字符数，并将其显示在div元素内部的span元素中，即实时更新剩余字符数。

总的来说，这段代码实现了一个文本框限制输入字符数的功能，并且提供了一个实时的字符数统计功能。当用户输入文本时，如果超过允许的最大字符数，则自动截取前200个字符并将其更新到文本框中，同时显示出剩余的可输入字符数。

H5前端开发——事件处理