详解js的事件处理函数和动态创建html标记方法
1HTML的事件属性
全局事件属性:HTML4增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动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 事件处理函数
文档的结构与文档的行为混杂在一起,例如:
<ahref="images/example.jpg"onclick="showPic(this);returnfalse;">
文档的结构与文档的行为分开,例如:
element.onclick=function(){showPic(whichpic);returnfalse;}
3共享onload事件
页面加载之后立即执行一段JavaScript:<elementonload="script">,如果想让页面加载后执行多个脚本呢?办法是:
window.onload=function(){ script1; script2; script3; ...... }
但是这个办法没有弹性,如果需要加载的脚本不断变化,那么代码也要跟着变化,更好的办法是:
functionaddLoadEvent(func)(){ varoldonload=window.onload; if(typeofwindow.onload!="function"){ window.onload=func; }else{ window.onload=function(){ oldonload(); func; } } }
4动态创建html标记
a.两个传统的方法
document.write方法和innerHTML属性,两者都不是标准化的DOM(W3C标准)所支持的方法和属性,它们都是html的专有属性。
document.write方法可以很方便的插入元素标签,尤其是字符串。但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则相背。
<!DOCTYPEhtml> <html> <head> <metachaset="utf-8"/> <title>document.write</title> <body> <script> <!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则--> document.write("<p>Thisisinsertedbydocument.write</p>"); </script> </body> </head> </html>
innerHTML适合将一大段HTML内容插入网页,如:
<divid="testdiv"> </div> window.onload=function(){ vartestdiv=document.getElementById("testdiv"); testdiv.innerHTML="<p>Thisisinsertedby<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(){ vartestdiv=document.getElementById("testdiv"); varpara=document.createElement("p"); testdiv.appendChild(para); varcontext1=doument.createTextNode("Thisisinsertedby"); para.appendChild(context1); varemphasis=document.createElement("em"); para.appendChild(emphasis); varcontext2=document.createTextNode("methodofdomcore"); emphasis.appendChild(context2); }
利用上面的dom方法写一个将一个节点插入到另一个节点之后的函数:
functioninsertAfter(newElement,targetElement){ varparent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement); }else{ targetElement.inserBefore(newElement,targetElement.nextSibling); } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!