一、 事件冒泡
（一） window.event.cancelBubble 取消事件冒泡
<table onclick="alert('table onclick');">
<tr onclick="alert('tr onclick');">
<td onclick="alert('td onclick');">
<p onclick="alert('p onclick');window.event.cancelBubble=true">aaaa</p>
</td>
<td>
bbb
</td>
</tr>
</table>
（二） onmourseover向内冒泡，onmourseenter不会向内冒泡
<head>
<title></title>
<style type="text/css">
#d1
{
width:200px; /* 200px不加"" */
height:200px;
background-color:Red;
}
#d11
{
width:100px;
height:100px;
background-color:Yellow;
}
#d2
{
width:200px;
height:200px;
background-color:Red;
}
#d22
{
width:100px;
height:100px;
background-color:Yellow;
}
</style>
<script type="text/javascript">
var count1 = 0;
function f1() {
count1++;
var div11 = document.getElementById("d11");
div11.innerHTML = count1;
}
var count2 = 0;
function f2() {
count2++;
var div22 = document.getElementById("d22");
div22.innerHTML = count2;
}
</script>
</head>
<body>
<!--onmouseover事件在两块div间移动也会被触发-->
<div id="d1" onmouseover="f1();">
<div id="d11"></div>
</div>
<br />
<!--onmouseenter事件在进入大div时才被触发-->
<div id="d2" onmouseenter="f2();">
<div id="d22"></div>
</div>
</body>
二、事件中的this
（一）在事件调用函数中，this代表window对象；
在事件响应函数中，this代表当前触发事件的对象。
<head>
<title></title>
<script type="text/javascript">
function f4() {
//事件调用函数中的this代表window对象
alert(this.location.href);
alert(this.value);
}
</script>
</head>
<body>
<!--事件响应函数中的this代表当前触发事件的对象，在这里就是button-->
<input type="button" value="btn2" onclick="alert(this.value)" /><br/>
<input type="button" value="btn4" onclick="f4()"/>
<!--如果这样写this就表示触发事件的对象-->
<!--<input type="button" value="btn4" onclick="f4(this)" />-->
</body>
（二）this与srcElement在事件冒泡中的区别：
srcElement是触发事件的对象，alert的值全是aaaa
<table onclick="alert(event.srcElement.innerHTML);">
<tr onclick="alert(event.srcElement.innerHTML);">
<td onclick="alert(event.srcElement.innerHTML);">
<p onclick="alert(event.srcElement.innerHTML);">aaaa</p>
</td>
<td>bbb</td>
</tr>
</table>
this是监听事件的对象，alert的值是当前监听对象内的值，每次不一样
<table onclick="alert(this.innerHTML);">
<tr onclick="alert(this.innerHTML);">
<td onclick="alert(this.innerHTML);">
<p onclick="alert(this.innerHTML);">aaaa</p>
</td>
<td>bbb</td>
</tr>
</table>
三、动态创建DOM
document.write只能在页面加载过程中才能动态创建。
（一）可以调用document的createElement方法来创建具有指定标签的DOM对象。
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var div = document.getElementById("d1");
//返回dom对象，在内存中创建
var btn = document.createElement("input");
btn.type = "button";
btn.value = "我是动态创建的";
btn.onclick = function () {
//动态添加删除对象的onclick事件
var txt = document.getElementById("t");
div.removeChild(txt);
}
//最后不要忘了把内存中的btn加到页面中
div.appendChild(btn);
}
</script>
</head>
<body>
<div id="d1">
<input type="text" id="t"/>
</div>
</body>
（二）动态创建的元素，在没有加载前，不能用get…ById获取
四、innerText、innerHTML、value
（一）value 获取或设置表单元素的值。
（二）几乎所有DOM元素都有innerText和innerHTML属性。所有浏览器都支持innerHTML。
innerText和innerHTML的区别：
1、innerText中的内容原样输入，会对html的特殊符号转义；输出时获取纯文本。
<head>
<title></title>
<script type="text/javascript">
function f1() {
var div = document.getElementById("d1");
//innerText会将div中原有的内容覆盖掉
div.innerText = "<font color='red'>都说</font><b>传智播客</b>好";
}
</script>
</head>
<body>
<div id="d1">123123<input type="text" /></div>
<input type="button" onclick="f1()" value="click" />
</body>
2、 innerHTML 输入时带效果，输出时原样输出
五、案例：动态创建表格
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var json = [
{ "name": "bokeyuan", "site": "http://www.cnblogs.com" },
{ "name": "cnbeta", "site": "http://www.cnbeta.com" },
{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }
];
var div = document.getElementById("d1");
//创建表
var table = document.createElement("table");
div.appendChild(table);
for (var i = 0; i < json.length; i++) {
var site = json[i];
//创建行
var row = document.createElement("tr");
table.appendChild(row);
//创建单元格
var td = document.createElement("td");
var link = document.createElement("<a href='" + site.site + "'></a>");
//<a href=""></a>中间的值不能直接用字符串拼接，要用innerHTML
link.innerHTML = site.name;
td.appendChild(link);
row.appendChild(td);
td = document.createElement("td");
td.innerText = site.site;
row.appendChild(td);
}
}
</script>
</head>
<body>
<div id="d1"></div>
</body>
六、浏览器兼容性问题
在Chrome浏览器中不支持appendChild，动态创建表格用insertRow、inertCell。
在insertRow(-1)和insertCell(-1)中如果不加”-1”,也会出现下图所示的兼容性问题。
<script type="text/javascript">
window.onload = function () {
var json = [{ "name": "cnblogs", "site": "http://www.cnblogs.com" },
{ "name": "cnbeta", "site": "http://www.cnbeta.com" },
{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }
];
var tb = document.createElement("table");
document.getElementById("d1").appendChild(tb);
tb.border = 1;
for (var i = 0; i < json.length; i++) {
var site = json[i];
//如果不写"-1"会出现
var row = tb.insertRow(-1);
var td = row.insertCell(-1);
td.innerHTML = site.name;
td = row.insertCell(-1);
td.innerHTML = site.site;
}
}
</script>
七、动态增删节点用哪种方式？
操作页面元素时，用innerHTML方式还是createElement()、appendChild()与removeChild()的方式操作Dom节点。
1、 对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的DOM操作。
先将页面的HTML代码写好，然后调用一次innerHTML，而不要反复调用innerHTML。
2、对于使用innerHTML的方式来删除节点，在某些情况下会存在内存问题，比如：div下面有很多其他元素，每个元素都绑定有事件处理程序。此时，innerHTML只是把当前元素从节点上移除了，但那些事件处理程序依然占用内存。
八、动态设置样式
可以动态设置类样式和行内样式
<style type="text/css">
.cls
{
width:200px;
height:200px;
background-color:Red;
/*这两个属性都是设置透明度的*/
filter:alpha(opacity=50);
opacity:0.5;
}
</style>
<script type="text/javascript">
window.onload = function () {
//设置类样式
//document.getElementById("d1").className="cls";
//设置行内样式
document.getElementById("d1").style.width = "200px";
document.getElementById("d1").style.height = "200px";
document.getElementById("d1").style.backgroundColor = "blue";
}
</script>