DOM

5.事件冒泡

如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应，见备注。

这是一段程序代码。

     <table onclick="alert('table onclick');">

        <tr onclick="alert('tr onclick');">

            <td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>

```
            <td>bbb</td>
```
```
        </tr>
```
```
    </table>
```

取消事件冒泡： window.event.cancelBubble = true;//IE下的写法。

<td onclick="alert('td onclick');window.event.cancelBubble = true;"><p onclick="alert('p onclick');">aaaa</p></td>

window.onload与body的onload
1.二者效果完全一样,都是在页面内容都加载完毕后才触发。
2.由于网页中没有window所以在body中写onload
3.建议使用window.onload//使用js脚本的方式高效
4.其实应该是document.onload，但是所有浏览器都实现到了window对象上。

6.事件中的this

事件中的this。除了可以使用event.srcElement在事件响应函数中，this表示发生事件的控件。只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用（这里的this表示window对象），如果要使用则要将this传递给函数或者使用event.srcElement。(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。

<body onclick=“//这个叫做事件调用函数，在这里写

this表示发生事件的控件。在这里调用另外一个函数F1,

则F1中不能使用this表示发生事件的控件”>

这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

```
    <title></title>
```
```
    <script type="text/javascript">
```
```
        function name1() {
```

            alert(event.srcElement.value);

```
        }
```
```
        function name2() {
```
```
            alert(this.value);
```
```
        }
```
```
    </script>
```
```
</head>
```
```
<body>
```

    <input type="button" value="btn1" onclick="alert(event.srcElement.value)" />

    <input type="button" value="btn2" onclick="alert(this.value)" />

```
    <br/>
```

    <input type="button" value="btn3" onclick="name1()" />

    <input type="button" value="btn4" onclick="name2()" />

```
</body>
```
```
</html>
```