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元素:
- 首先拿到要删除的节点元素及其父亲结点
- 然后通过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>