详解js的事件处理函数和动态创建html标记方法
1 html的事件属性
全局事件属性:html 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 javascript。
a. window 事件属性，针对 window 对象触发的事件（应用到 <body> 标签），常用的为onload。
b. form事件，由 html 表单内的动作触发的事件（应用到几乎所有 html 元素，但最常用在 form 元素中）：常用的为onblur、onfocus、onselect、onsubmit。
c. keybord事件
d.mouse事件，由鼠标或类似用户动作触发的事件：常用的为onclick、onmouseover、onmouseout。
e. media事件，由媒介（比如视频、图像和音频）触发的事件（适用于所有 html 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）。
2 事件处理函数
文档的结构与文档的行为混杂在一起，例如：
<a href="images/example.jpg" onclick="showpic(this);return false;">
文档的结构与文档的行为分开，例如：
element.onclick = function() { showpic(whichpic); return false; }
3 共享onload事件
页面加载之后立即执行一段 javascript：<element onload="script">，如果想让页面加载后执行多个脚本呢？办法是:
window.onload = function() {
script1;
script2;
script3;
......
}
但是这个办法没有弹性，如果需要加载的脚本不断变化,那么代码也要跟着变化，更好的办法是:
function addloadevent(func)() {
var oldonload = window.onload;
if (typeof window.onload !="function") {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func;
}
}
}
4 动态创建html标记
a. 两个传统的方法
document.write方法和innerhtml属性，两者都不是标准化的dom(w3c标准)所支持的方法和属性，它们都是html的专有属性。
document.write方法可以很方便的插入元素标签，尤其是字符串。但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则相背。
<!doctype html>
<html>
<head>
<meta chaset="utf-8" />
<title>document.write</title>
<body>
<script>
<!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则-->
document.write("<p>this is inserted by document.write</p>");
</script>
</body>
</head>
</html>
innerhtml适合将一大段html内容插入网页,如:
<div id="testdiv">
</div>
window.onload = function() {
var testdiv = document.getelementbyid("testdiv");
testdiv.innerhtml = "<p>this is inserted by <em>innerhtml</em></p><en>";
}
b. 更加精细化的dom方法-获取dom节点树和改变dom节点树
检索节点（元素）:document.getelementbyid和element.getelementsbytagname
创建节点（元素）:document.createelement,document.createtextnode
追加节点（元素）:element.appendchild
插入(将一个节点插入到另一个节点之前):parenteelement.insertbefore(newelement, targetelement)
很有用的属性：element.parentnode（获取父节点）、element.nextsibling（获取兄弟节点）
上面用innerhtml属性插入html的效果用dom方法照样可以实现:
window.onload = function() {
var testdiv = document.getelementbyid("testdiv");
var para = document.createelement("p");
testdiv.appendchild(para);
var context1 = doument.createtextnode("this is inserted by ");
para.appendchild(context1);
var emphasis = document.createelement("em");
para.appendchild(emphasis);
var context2 = document.createtextnode("method of domcore");
emphasis.appendchild(context2);
}
利用上面的dom方法写一个将一个节点插入到另一个节点之后的函数：
function insertafter(newelement, targetelement) {
var parent = targetelement.parentnode;
if (parent.lastchild == targetelement) {
parent.appendchild(newelement);
} else {
targetelement.inserbefore(newelement, targetelement.nextsibling);
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！