JavaScript的BOM编程，事件-第4章

今天药忘吃喽~ 2021-09-16 00:20 368阅读 0赞

![标题图][1240]

## 目标 ##

*  BOM编程
 *  window和document对象
 *  window对象的属性和方法
 *  document对象的属性和方法

## JavaScript中对象的分类 ##

1.  浏览器对象：window对象
2.  window对象，这个对象的属性和方法通常被统称为BOM（Browser Object Model，浏览器对象模型）

![window.png][]

*  常用的属性

status 浏览器状态栏中显示的临时消息 
    screen 屏幕和显示性能的信息
    history 访问过的 URL 的信息
    location 当前 URL 的信息
    document 浏览器窗口中的HTML文档

*  常用的方法

alert ("提示信息")
    confirm("提示信息“)
    close ( )
    setTimeout()

## document对象 ##

getElementsByTagName() getElementById() getElementsByName()

--------------------

## 事件 ##

#### 事件概念与分类 ####

事件是发生在页面上的动作。

*  事件分类  
    
    
    1.  页面事件
    2.  键盘事件
    3.  鼠标事件
    4.  表单事件

## 添加事件 ##

1.  静态绑定
2.  动态绑定

## 事件流 ##

事件流:：指事件冒泡的过程

## DOM实验 ##

原效果

![原效果][1240 1]

![插入效果][1240 2]

![image.png][]

![图片][1240 3]

![图片][1240 4]

![图片][1240 5]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    
    </head>
    <style type="text/css"> .title{ background: gray; text-align: center; } </style>
    
    <body>
        <table border="1" cellpadding="0" cellspacing="0" id="myTable">
            <tr>
                <td width="200px">书名</td>
                <td width="200px">价格</td>
            </tr>
            <tr>
                <td>看得见风景的房间</td>
                <td align="center">￥30.00</td>
            </tr>
            <tr>
                <td>60个瞬间</td>
                <td align="center">￥32.00</td>
            </tr><br>
        </table>
        <input type="button" value="增加一行" onclick="addRow()">
        <input type="button" value="删除第二行" onclick="delRow()">
        <input type="button" value="修改标题" onclick="updateRow()">
    
        <script type="text/javascript"> function addRow(){ var lengths = document.getElementById("myTable").rows.length; var index; if (lengths >= 2) { index = 2; }else{ index = 1; } var newRow = document.getElementById("myTable").insertRow(index); var coll = newRow.insertCell(0); coll.innerHTML = "幸福从天而降"; var col2 = newRow.insertCell(1); col2.innerHTML = "¥18.5"; col2.align = "center"; } function updateRow(){ var uRow = document.getElementById("myTable").rows[0]; uRow.className = "title"; } function delRow(){ document.getElementById("myTable").deleteRow(1); } </script>
    </body>
    </html>

![图片][1240 6]

![图片][1240 7]

## 结语 ##

![送❤][1240 8]

[1240]: /images/20210724/82e540405f41449aa90aa72523ab7bb3.png
[window.png]: /images/20210724/2273e8aaf26a48bdb774c734a548465a.png
[1240 1]: /images/20210724/45330a5dd56d42c2a9fcbaa675f6ab84.png
[1240 2]: /images/20210724/8b4ee84c9c254db881c4c28fb576ea14.png
[image.png]: /images/20210724/5b254a04498747218639df67f45ddb9c.png
[1240 3]: /images/20210724/83b97afb375b47549042033ab8404a52.png
[1240 4]: /images/20210724/868572ad6fe34d32a83ccfd087220e7e.png
[1240 5]: /images/20210724/c68bb2aa5c7b4391bb1b80bfb8713788.png
[1240 6]: /images/20210724/ab99d0e768744a268148c8d357d648d9.png
[1240 7]: /images/20210724/c562ceb0944f4237b913c7b46024a993.png
[1240 8]: /images/20210724/dfe541cef32243d89848df8ed72850b8.png