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中文網(wǎng)學(xué)習(xí)");
}
</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 中文網(wǎng)");
}
