前端常见的几个事件

最新推荐文章于 2024-05-08 20:41:00 发布

添砖Java的亮哥

最新推荐文章于 2024-05-08 20:41:00 发布

阅读量1.2k

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_51262858/article/details/126752412

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body οnlοad="fun10()">

<button οnclick="fun01()">按钮1-绑定普通函数</button>
<div style="width: 200px;height: 200px;border: 1px solid red" οnmοuseοver="fun02()" οnmοuseοut="fun03()">div</div>
<input type="text" οnkeydοwn="fun04()" οnkeyup="fun05()">
<form action="#" οnsubmit="fun09()">

username:<input type="text" name="username" id="username" οnfοcus="fun06()" οnblur="fun07(this)"><br>
address：<select name="address" id="" οnchange="fun08(this)">
<option value="sz">深圳</option>
<option value="dg">东莞</option>
<option value="hz">惠州</option>
</select><br>
<input type="submit">
<input type="reset">
</form>
<script>
//1.鼠标相关事件
//1.1：点击事件
function fun01() {
alert("我被点了...");
}
//1.2：鼠标移入事件
function fun02() {
console.log("鼠标移入..");
}
//1.3：鼠标移出事件
function fun03() {
console.log("鼠标移出..");
}

//2.键盘相关事件
//2.1：键盘键按下
function fun04() {
console.log("键按下");
}

//2.2：键盘键松开
function fun05() {
console.log("键松开");
}

//3.表单相关：
//3.1：onfocus：输入框获取焦点事件
function fun06() {
console.log("获取焦点");
}

//3.2：onblur：输入框失去焦点事件
function fun07(obj) {
//方式一：获取标签对应的元素对象通过value属性获取输入的值
//var username = document.getElementById("username").value;
//console.log("失去焦点:"+username);

//方式二：可以直接获取当前标签对象 obj=this=input标签元素对象
console.log("失去焦点:"+obj.value);

}

//3.3：onchange：下拉列表内容改变事件
function fun08(obj) {
console.log("内容改变："+obj.value);
}

//3.4：onsubmit：表单提交事件
function fun09() {
console.log("表单提交了"); //可以控制表单是否进行跳转
}

//4.其他事件：load加载事件
function fun10() {
alert("页面加载了...");
}