JavaScript事件处理

表单事件

表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：

案例演示1：当文本框获取焦点，文本框背景为红色，当文本框失去焦点，文本框背景为黄色

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text">
</form><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 当文本框获取焦点，文本框背景为红色 */textInput.onfocus = function () {this.style.background = "red";};/* 当文本框失去焦点，文本框背景为绿色 */textInput.onblur = function () {this.style.background = "green";};
</script>
</body>
</html>

注意：这里为什么要用this，你不用this也可以，就直接textInput.style.background = "red";也不是不可以的，但是方法的调用规则就是谁调用this，this就指向谁，这样我们就可以简化代码了

案例演示2：当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text">
</form><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 当文本框内容改变时，鼠标离开文本框，自动将文本框的内容输出到控制台 */textInput.onchange = function () {console.log(this.value);};
</script>
</body>
</html>

案例演示3：当文本框内容改变时，立即将改变的内容输出到控制台

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text">
</form><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 当文本框内容改变时，立即将改变的内容输出到控制台 */textInput.oninput = function () {console.log(this.value);};
</script>
</body>
</html>

案例演示4：如果单击“submit”，则不填写文本字段，将发生警报消息

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form><input type="text" id="text" required><input type="submit" value="submit">
</form><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var textInput = document.getElementById("text");/* 如果单击“submit”，则不填写文本字段，将发生警报消息 */textInput.oninvalid = function () {console.log("请您完善表单内容！");};
</script>
</body>
</html>

案例演示6：当提交表单的时候，在控制台输出“表单提交”

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<form id="myform"><input type="submit" id="submit">
</form><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var myform = document.getElementById("myform");/* 当提交表单的时候，在控制台输出“表单提交” */myform.onsubmit = function () {console.log("表单提交");return false;/* 用来阻止表单提交的，你不写它会跳转请求 */};
</script>
</body>
</html>

setTimeout() 方法：延时器

第一个参数是要执行的函数。
第二个参数指示执行之前的毫秒数。

案例演示：单击按钮，等待 3 秒，然后控制台会输出 "Hello"

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<button id="btn">按钮</button><!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>var btn = document.getElementById("btn");btn.onclick = function () {// 创建延时器var timer = setTimeout(function () {console.log("Hello");}, 3000);// 清除延时器// clearTimeout(timer);        };
</script>
</body>
</html>

String对象

length属性演示：可以用来获取字符串的长度
```
var str = "Hello,World!";
console.log(str.length);
```
indexof()方法演示：该方法可以检索一个字符串中是否含有指定内容，如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1，可以指定一个第二个参数，指定开始查找的位置
```
var str = "Hello,World!";
console.log(str.indexOf("o"));
console.log(str.indexOf("o", 5));
```
lastIndexOf()方法演示：该方法的用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找，也可以指定开始查找的位置

var str = "Hello,World!";
console.log(str.lastIndexOf("o"));
console.log(str.lastIndexOf("o", 5));

substr()方法演示：该方法用来截取字符串

参数：
第一个参数：截取开始位置的索引

第二个参数：截取的长度

var str = "Hello,World!";
var result = str.substr(6, 6);
console.log(result);

substring()方法演示：可以用来截取一个字符串
第一个参数：开始截取位置的索引（包括开始位置）
第二个参数：结束位置的索引（不包括结束位置），如果省略第二个参数，则会截取到后边所有的

var str = "Hello,World!";
var result = str.substring(1, 4);
console.log(result);
result = str.substring(1);
console.log(result);
result = str.substring(1, -1);
console.log(result);

split()方法演示：该方法可以将一个字符串拆分为一个数组，需要一个字符串作为参数，将会根据该字符串去拆分数组

var str = "Hello,World!";
var result = str.split(",");
console.log(result);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/73284.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！