Events in js
What is an event?The event is the response of the computer input device interacting with the page. We call it events.
Event type
Mouse click : such as clicking button, selecting checkbox and radio, etc.; mouse entering, hovering or exiting a certain hot spot of the page: such as hovering the mouse over a picture or entering the range of the table;
keyboard keys : when pressing the button or releasing When a key is pressed;
HTML events : for example, when the page body is loaded; selecting an input box in the form or changing the content of the text in the input box: for example, selecting or modifying the content of the text box;
mutation events : mainly when the underlying elements of the document are changed Triggered events, such as DomSubtreeModified (DOM subtree modification).
Event handler
Commonly used events:
onload Loading complete event: After the page is loaded, it is often used to initialize the page js code
onclickClick event: Often used for button click response operations.
onblurLoss of focus event: Commonly used to verify whether the input content is legal after the input box loses focus.
onchangeContent change event: Commonly used to operate
onsubmit after the contents of drop-down lists and input boxes changeForm submission event: It is often used to verify whether all form items are legal before submitting the form.
Event registration is divided into static registration and dynamic registration:
What is event registration (binding)?
In fact, it tells the browser which operation codes to execute after the event response is called event registration or event binding.
Static event registration: The event response code is directly assigned to the event response code through the event attribute of the html tag . This method is called static registration.
Dynamic registration event:It means that the dom object of the label is first obtained through the js code, and then the dom object is obtained through the dom object. Event name = function(){} This form is assigned to the code after the event response, called dynamic registration。
Basic steps of dynamic registration:
1. Get the label object
2. The label object. Event name = fucntion(){}
onload loading complete event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert('静态注册onload 事件，所有代码');
}
// onload 事件动态注册。是固定写法
window.onload = function () {
alert("动态注册的onload 事件");
}
</script>
</head>
<!--静态注册onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
<body οnlοad="onloadFun();">
-->
<body>
</body>
</html>
onclick click event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick 事件");
}
// 动态注册onclick 事件
window.onload = function () {
// 1 获取标签对象
/*
* document 是JavaScript 语言提供的一个对象（文档）<br/>
* get 获取
* Element 元素（就是标签）
* By 通过。。由。。经。。。
* Id id 属性
*
* getElementById 通过id 属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通过标签对象.事件名= function(){}
btnObj.onclick = function () {
alert("动态注册的onclick 事件");
}
}
</script>
</head>
<body>
<!--静态注册onClick 事件-->
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
</html>
onblur lost focus event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册失去焦点事件
function onblurFun() {
// console 是控制台对象，是由JavaScript 语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册onblur 事件
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名= function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>
onchange content change event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名= function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
</head>
<body>
请选择你心中的女神：
<!--静态注册onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
请选择你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
</body>
</html>
onsubmit form submission event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
window.onload = function () {
//1 获取标签对象
var formObj = document.getElementById("form01");
//2 通过标签对象.事件名= function(){}
formObj.onsubmit = function () {
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("动态注册表单提交事件----发现不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>
</body>
</html>
to sum up
Static registration
<script type="text/javascript">
function 函数名(){
}
</script>
<标签 事件名=“ 函数名 ();”>
Dynamic registration:
<script type="text/javascript">
window.onload = function () {
//1 获取标签对象
var 标签对象= document.getElementById("id名称");
//2 通过标签对象.事件名= function(){}
标签对象.事件名= function(){
}
}
</script>