Javascript basic tutorial event model

Inline model

What is the inline model:

This model is the traditional and simplest A method of processing time. The event handling function is an attribute of HTML, used to handle specified events.

Inline was used more in the early days, but it was mixed with HTML code and did not work. Separate from HTML code

The following code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
</head>
<body>
	<input type="button" value="按钮" onclick="alert('lee')">
</body>
</html>

The above code is the earliest inline model onclick is a click event

If the event centimeter code will be a lot, then we We need to use another way to write it. The code is as follows:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
</head>
<body>
	<input type="button" value="按钮" onclick="msg()">

	<script type="text/javascript">
		function msg(){
			alert("欢迎来到php中文网学习");
		}
	</script>
</body>
</html>

In this way, we can write a lot of code in our function body

Script model

What is the script model

In the HTML page, we don’t want to see writing js code, js code , we put it in another file

Let’s look at an example

First we write an html code, the code is as follows:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
	<input type="button" value="按钮">
</body>
</html>

We introduced a js file, demo.js, in the above code. The code of demo.js is as follows:

window.onload = function(){
	var sum = document.getElementsByTagName("input")[0];
	sum.onclick= msg;
}

function msg(){
	alert("php 中文网");
}

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> </head> <body> <input type="button" value="按钮" onclick="alert('欢迎学习js事件')"> </body> </html>

submit Reset Code

Automatic operation

Javascript basic tutorial event model

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]