Js学习之路四 --- 提取事件、匿名函数、数组

最新推荐文章于 2023-10-16 16:27:51 发布

不如喫茶去

最新推荐文章于 2023-10-16 16:27:51 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

分类专栏： Js学习之路文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_32737755/article/details/77947271

Js学习之路专栏收录该内容

14 篇文章

订阅专栏

前面我一直将onclick(可以看做一个属性) 放到input 或者 button标签中，一不美观，二不漂亮（废话）… 总之不高大上。

因此将其提取出来很有必要— 提取事件：

<input value="点我" type="button" id="btn">

<script type="text/javascript"> 
     window.onload=function(){   //页面加载完再执行
      var Btn = document.getElementById('btn');
      Btn.onclick = function(){  //匿名函数
      alert(1);
      }
      //下面也是一种提取事件的方式
      //var Btn = document.getElementById('btn');
      //function tanTan(){ 
      //alert(1);
      //}
      //Btn.onclick = tanTan;
     }
</script>

window.onload 此函数保证页面加载完毕再去执行js，以免出现错误！比较常用！！！

数组：

个人助记理解：
获取数组--- document.getElementsByTagName()
                   获取  元素们 通过 标签名

<style type="text/css">
           div {
            width: 200px;
            height: 100px;
            border:1px solid #999;
            display: block;
            float: left;
            margin: 10px;
           }
</style>
<body>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
 </body>
 <script type="text/javascript">
 window.onload=function(){ 
 var aDiv = document.getElementsByTagName(div);
 //aDiv是一个数组
 alert(aDiv.length);
 //弹出 4 
 }
 </script>

给这个数组里每个div加样式：例子

 var aDiv = document.getElementsByTagName('div');
      var i = 0;
      while(i<aDiv.length){
        aDiv[i].style.background = 'red';
        i = i+1;    //或：i++
      }

      // for (var i = 0; i < aDiv.length; i++) {
      //   aDiv[i].style.background = 'red';
      // }