1 . 内联方式(内嵌方式)
需求:点击按钮弹窗提示
js内嵌方式 :把事件和事件动作都嵌入到html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--点击按钮弹窗提示
1.js内嵌方式 :把事件和事件动作都嵌入到html元素
-->
<input type="button" onclick="alert('点击了')" value="test"/><br>
</body>
</html>
2 . 第二种方式:内部方式,又分两种方式:
方式一: 事件内容和设置事件分离 ，设置事件还在html标签中，事件处理的内容位置随意放置，但是script标签必须放在html里.
body标签中,
<input type="button" onclick="test1()" value="再次测试"/>script标签中:
function test1(){
alert('哈哈');
}
方式二:首先明白,js的代码是从上往下执行.所以在head里面的script标签中的一些东西如果目前还没有定义的话,程序就会阻塞后续资源的载入以及整个页面的生成.所以,有很多网站把javascript放在网页的最后面了,另外一种方式就是动用了window.onload或是docmuemt ready之类的事件。
现在来解释一下window.onload是什么意思,他的意思是body执行完事之后才会被执行这里面的代码.看代码:
在head标签里面的script里面(这里需要id进行关联)::
/*window.onload表示的意思是body中的内容全部加载结束才加载其中函数的内容*/
window.onload = function (){
/* 先查找指定元素
var只负责在内存中开辟一个空间，什么类型都可以放进去
*/
var input1 = document.getElementById("ins");
alert("======"+input1);
/*使用对象调用事件*/
input1.onclick=function test2(){
alert('5465756867867');
}
}在body里面:
<input type="button" value="再次测试1111" id="ins"/><br>另外,如果input标签和script的标签都放在body里面的话,script标签应该放在input后面.(原因就是上面加粗的部分)
对内部方式的第二种方式的总结:
input type=”button” value=”再次测试1111” id=”ins”/
把html元素和设置事件以及事件的具体内容进行了彻底分离
处理事件： 事件一般都放在元素加载之后在执行。
(必须是元素已经加载了，才能进行后续的元素查找和设置事件)
/*先查找指定元素
var只负责在内存中开辟一个空间，什么类型都可以放进去
* */
var input1 = document.getElementById(“ins”);
alert(“======”+input1);
/使用对象调用事件/
input1.οnclick=function test2(){
alert(‘5465756867867’);
}
–>
3 .方式三:外部方式:
外部的文件代码:
alert('我来了'); /*相当于全局的，一进入页面就加载了*/
function test3(){
alert('tttttttttttttt');
}
html标签的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入外部的js文件 type是引入的类型-->
<script src="js/myjs.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="外部导入方式测试" id="id1" onclick="test3()"/><br>
</body>
</html>