DOM - 5.事件冒泡 + 6.事件中的this

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>
```

.src_container{background-color:#e7e5dc; width:99%; overflow:hidden; margin:12px 0 12px 0 !important; padding:0px 3px 3px 0px}
.src_container .titlebar{ background-color:#d4dfff; border:1px solid #4f81bd; border-bottom:0; padding:3px 24px; margin:0; width:auto; line-height:120%; overflow:hidden; text-align:left; font-size:12px}
.src_container .toolbar{ display:inline; font-weight:normal; font-size:100%; float:right; cursor:hand; color:#00f; text-align:left; overflow:hidden}
.toolbar span.button{ display:inline; font-weight:normal; font-size:100%; cursor:hand; color:#00f; text-align:left; overflow:hidden; cursor:pointer;}
.src_container div.clientarea{ background-color:white; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; height:auto; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys",courier,monospace,serif}
.src_container ol.mainarea{ padding:0 0 0 52px; margin:0; background-color:#f7f7ff !important}
.number_show{ padding-left:52px !important; list-style:decimal outside !important}
.number_show li{ list-style:decimal outside !important; border-left:1px dotted #4f81bd}
.number_hide{ padding-left:0px !important; list-style-type:none !important}
.number_hide li{ list-style-type:none !important; border-left:0px}
ol.mainarea li{ display:list-item !important; font-size:12px !important; margin:0 !important; line-height:18px !important; padding:0 0 0 0px !important; background-color:#f7f7ff !important; color:#4f81bd}
ol.mainarea li pre{color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap ol.mainarea li pre{white-space:pre-wrap; white-space:-moz-pre-wrapwhite-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word}
ol.mainarea li pre.alt{ background-color:#f7f7ff !important}

DOM - 5.事件冒泡 + 6.事件中的this

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

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

DOM - 5.事件冒泡 + 6.事件中的this

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=“//这个叫做事件调用函数，在这里写 DOM - 5.事件冒泡 + 6.事件中的this

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>
```

秒客网

DOM - 5.事件冒泡 + 6.事件中的this

5.事件冒泡

6.事件中的this

相关文章