9 HTML DOM事件监听&版本兼容&元素（节点）增删改查

事件监听：

语法：element.addEventListener(event, function, useCapture);

• event：事件的类型，触发什么事件，注意不需要on作为前缀，比如click
• function：事件触发后调用的函数
• useCapture：描述事件是冒泡还是捕获，该参数可选的

当用户点击按钮时触发监听事件：

• document.getElementById("myBtn").addEventListener("click",displayDate);
• addEventListener可以向同个元素添加多个事件，且不会覆盖已存在的事件

向Window对象添加事件句柄：

当用户重置窗口大小时添加时间监听：

window.addEventListner("resize",function(){

document.getElementById("demo").innerHTML = sometext;

});

向同一个元素添加多个事件句柄：

• element.addEventListener("click",myFunction)
• element.addEventListener("mousedown",muSecondFunction);

RemoveEventListener()方法

RemoveEventListener()方法移除由addEventListener()方法添加的事件句柄

element.removeEventListener("mousemove",myFunction);

版本兼容：

IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

• element.attachEvent(event, function);
• element.detachEvent(event, function);

元素（节点）增删改查：

• nodeName:节点名称
• nodeValue:节点的值
• nodeType : 节点的类型

创建HTML元素：document.createElement("p");Element.appendChild(node);

首先创建该元素，然后向一个已经存在的元素追加该元素

<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var text = document.createTextNode("这是一个新的段落");
var node = document.createElement("p");
node.appendChild(text);
var div = document.getElementById("div1");
div.appendChild(node);
</script>
</body>

删除已有的HTML元素：

1. 首先拿到要删除的节点元素及其父亲结点
2. 然后通过parent.removeChild(child)删除

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>