欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解js的事件处理函数和动态创建html标记方法

程序员文章站 2022-04-10 18:40:50
1 html的事件属性 全局事件属性:html 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 javascript。   a. wind...

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);
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!