事件
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!"