Javascript 基础教程之事件模型
内联模型
什么是内联模型:
这种模型是传统的最简单的一种处理时间的方法,事件处理函数是HTML的一个属性,用于处理指定的事件
内联在早期是使用比较多的,但是它和HTML 代码混合在一起,并没有与HTML 代码分离
如下代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> </head> <body> <input type="button" value="按钮" onclick="alert('lee')"> </body> </html>
以上代码就是最早期的内联模型 onclick 是一个点击事件
如果事件厘米的代码会很多,那么我们就要使用另外一种方式来写,代码如下:
<!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>
这样我们的函数体内就可以写很多的代码了
脚本模型
什么是脚本模型
在HTML 页面,我们不要看见写js代码,js 的代码,我们是放另外一个文件中的
下面来看一个实例
首先我们写一个html 的代码,代码如下:
<!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>
上述代码我们引入了一个js文件,demo.js , demo.js的代码如下:
window.onload = function(){ var sum = document.getElementsByTagName("input")[0]; sum.onclick= msg; } function msg(){ alert("php 中文网"); }