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>