js导入的三种基本方式

最新推荐文章于 2022-09-29 09:19:41 发布

LM_AC

最新推荐文章于 2022-09-29 09:19:41 发布

阅读量4.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Myair_AC/article/details/77725257

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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>

LM_AC

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js导入的三种基本方式

1 . 内联方式(内嵌方式) 需求:点击按钮弹窗提示 js内嵌方式 :把事件和事件动作都嵌入到html元素<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--点击按钮弹窗提示
复制链接

扫一扫