TOP

10-关于DOM的事件操作(二)

2019-09-06 00:28:34 【大中小】浏览:88次

15 function fn() { 16 //3.书写事件驱动程序 17 alert('我是弹出的内容'); 18 } 19 </script> 20 21 </body> 22 </html>

3.事件驱动程序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>流浪者</title>
 6     <style>
 7         #box{
 8             width: 100px;
 9             height: 100px;
10             background-color: green;
11             cursor: pointer;
12         }
13     </style>
14 </head>
15 <body>
16 
17 <div id="box"></div>
18 
19 <script>
20     var oDiv = document.getElementById('box');
21     oDiv.onclick = function () {
22         oDiv.style.width = '200px';
23         oDiv.style.height = '2oopx';
24         oDiv.style.backgroundColor = 'red';
25     }
26 </script>
27     
28 </body>
29 </html>

JS中的属性值要加引号；

JS中的属性名要使用驼峰体；

4.onload事件

网页文档加载完毕，触发onload事件。

<script type="text/java script">
    window.onload = function () {
        console.log("小马哥");  //等页面加载完毕时，打印字符串
    }
</script>

有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

事件案例

1.京东顶部广告栏关闭

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         *{
 8             padding: 0;
 9             margin: 0;
10         }
11         .top-banner{
12             /*position: relative;*/
13             background-color: rgb(230, 15, 82);
14         }
15         .top-banner .w{
16             width: 1190px;
17             position: relative;
18             margin: 0 auto;
19         }
20         .top-banner .banner{
21             display: block;
22             width: 100%;
23             height: 80px;
24             background: url('./close.jpg') no-repeat center 0;
25         }
26         .top-banner .close{
27             position: absolute;
28             right: 0;
29             top:0;
30             text-decoration: none;
31             color: white;    
32             width: 20px;
33             height: 20px;
34             line-height: 20px;
35             text-align: center;    
36         }
37         .hide{
38             display: none;
39         }
40 
41     </style>
42 </head>
43 <body>
44     <div class="top-banner" id="topBanner">
45         <div class="w">
46             <a href="#" class="banner"></a>
47             <a href="#" class="close" id="closeBanner">x</a>
48         </div>
49     </div>
50     <script type="text/java script">
51         // /需求：点击案例，隐藏盒子。
52             //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
53 
54         window.onload  = function(){
55             // /1.获取事件源和相关元素
56             var closeBanner = document.getElementById('closeBanner'

首页上一页 1 2 3 下一页尾页 2/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：python学习-62 类属性的增删该 ..	下一篇：08-函数