JS基础第三章（事件、正则表达式）

事件

JavaScript事件是在网页上发生的动作，可以被浏览器检测到。这些事件可以由用户或浏览器本身触发

鼠标事件：

click：当鼠标被单击时触发。
mouseover：当鼠标移动到元素上时触发。
mouseout：当鼠标移出元素时触发。
mousemove：当鼠标指针移动到元素上时触发。

键盘事件：

keydown：当按键按下时触发。
keyup：当按键释放时触发。
keypress：按键被按下时触发。

表单事件：

submit：当表单提交时触发。
change：当元素的值更改时触发。
input：当输入元素的值更改时触发。

窗口事件：

load：当页面加载完成时触发。
resize：当浏览器窗口大小调整时触发。
scroll：当文档被滚动时触发。

焦点事件：

focus：当元素获得焦点时触发。
blur：当元素失去焦点时触发。

媒体事件：

play：当媒体播放开始时触发。
pause：当媒体播放暂停时触发。

拖拽事件：

dragstart：当拖动操作开始时触发。
dragend：当拖动操作结束时触发。

绑定事件

要在JavaScript中处理事件，可以使用事件监听器。以下是一个示例，向按钮元素添加点击事件监听器：

//此种方法通过DOM方式来绑定事件

window.onload = function(){
// 获取按钮元素
const button = document.getElementById('myButton');

// 添加点击事件监听器
button.addEventListener('click', function() {
    alert('按钮被点击了！');
});
}

表单事件

onchange 事件

当表单元素的值改变时触发。

示例：

<input type="text" id="myInput" onchange="handleChange()">

<script>
function handleChange() {
    alert("Input value has changed!");
}
</script>

onsubmit 事件

当表单提交时触发。

示例：

<form onsubmit="return validateForm()">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
    // Perform form validation
    return true; // Return false to prevent form submission
}
</script>

onfocus 和 onblur 事件

onfocus 当表单元素获得焦点时触发，onblur 当表单元素失去焦点时触发。

示例：

<input type="text" id="myInput" onfocus="handleFocus()" onblur="handleBlur()">

<script>
function handleFocus() {
    console.log("Input is focused");
}

function handleBlur() {
    console.log("Input lost focus");
}
</script>

onkeydown、onkeyup 和 onkeypress 事件

onkeydown 当按下键盘按键时触发，onkeyup 当释放键盘按键时触发，onkeypress 当按下并释放键盘按键时触发。

示例：

<input type="text" id="myInput" onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)" onkeypress="handleKeyPress(event)">

<script>
function handleKeyDown(event) {
    console.log("Key down: " + event.key);
}

function handleKeyUp(event) {
    console.log("Key up: " + event.key);
}

function handleKeyPress(event) {
    console.log("Key pressed: " + event.key);
}
</script>

oninput 事件

当表单元素的值发生改变并且失去焦点时触发。

示例：

<input type="text" id="myInput" oninput="handleInput()">

<script>
function handleInput() {
    console.log("Input value changed: " + document.getElementById("myInput").value);
}
</script>

正则表达式

正则表达式语法

普通字符：

字母和数字：表示它们自身，例如 a、1。
特殊字符：有些字符具有特殊含义，如 .、*、+，如果想匹配它们本身，需要使用转义字符 \，例如 \. 匹配句号。

字符类：

[ ]：用来匹配方括号内的任意一个字符，例如 [aeiou] 匹配任何一个元音字母。
[^ ]：匹配不在方括号内的任意字符，例如 [^0-9] 匹配任何非数字字符。

特殊字符：

.：匹配除换行符之外的任意字符。
^：匹配字符串的开头。
$：匹配字符串的结尾。

重复：

*：匹配前面的元素零次或多次。
+：匹配前面的元素一次或多次。
?：匹配前面的元素零次或一次。
{n}：匹配前面的元素恰好 n 次。
{n,}：匹配前面的元素至少 n 次。
{n,m}：匹配前面的元素至少 n 次，但不超过 m 次。

分组：

( )：用来分组表达式，可以在后面使用 | 运算符表示或的关系。

转义字符：

\：用来转义特殊字符，使其失去特殊含义。

元字符：

\d：匹配任意数字字符。
\D：匹配任意非数字字符。
\w：匹配任意字母、数字或下划线字符。
\W：匹配任意非字母、数字或下划线字符。
\s：匹配任意空白字符。
\S：匹配任意非空白字符。

创建正则表达式：

// 使用字面量创建正则表达式
var regex = /pattern/;

// 使用RegExp构造函数创建正则表达式
var regex = new RegExp('pattern');

基本匹配：

var str = "Hello, World!";
var regex = /Hello/;
console.log(regex.test(str)); // 输出 true

修饰符：

在正则表达式中，修饰符可以用来执行不区分大小写匹配、全局匹配等操作。

var str = "Hello, World!";
var regex = /hello/i; // 不区分大小写
console.log(regex.test(str)); // 输出 true

元字符：

正则表达式中的元字符用于匹配特定类型的字符，例如\d用于匹配数字字符。

var str = "12345";
var regex = /\d+/; // 匹配一个或多个数字
console.log(regex.test(str)); // 输出 true

替换：

正则表达式还可以用来替换字符串中的内容。

var str = "Hello, World!";
var regex = /World/;
var newStr = str.replace(regex, "JavaScript");
console.log(newStr); // 输出 "Hello, JavaScript!"