你的位置:首页 > Java教程

[Java教程]javascript学习笔记(四):事件处理函数和动态创建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">,如果想让页面加载后执行多个脚本呢?办法是:

1  window.onload = function() {2   script1;3   script2;4   script3;5   ......6  }

但是这个办法没有弹性,如果需要加载的脚本不断变化,那么代码也要跟着变化,更好的办法是:

 1  function addLoadEvent(func)() { 2   var oldonload = window.onload; 3   if (typeof window.onload !="function") { 4     window.onload =  func; 5   } else { 6     window.onload = function() { 7       oldonload(); 8       func; 9     }10   }11  }

  共享onload还有别的解决方法吗?可参考这篇博文《js 添加事件 attachEvent 和 addEventListener 的用法》

4 动态创建html标记

  a. 两个传统的方法

    document.write方法和innerHTML属性,两者都不是标准化的DOM(W3C标准)所支持的方法和属性,它们都是html的专有属性。

    a 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方法照样可以实现:

 1 window.onload = function() { 2     var testdiv = document.getElementById("testdiv"); 3    var para = document.createElement("p"); 4    testdiv.appendChild(para); 5    var context1 = doument.createTextNode("This is inserted by "); 6    para.appendChild(context1); 7    var emphasis = document.createElement("em"); 8    para.appendChild(emphasis); 9    var context2 = document.createTextNode("method of domcore");10    emphasis.appendChild(context2);11   }

    利用上面的dom方法写一个将一个节点插入到另一个节点之后的函数:

1 function insertAfter(newElement, targetElement) {2   var parent = targetElement.parentNode;3   if (parent.lastChild == targetElement) {4     parent.appendChild(newElement);5   } else {6     targetElement.inserBefore(newElement, targetElement.nextSibling);7   }8 }

  参考:

  JavaScripts DOM编程艺术 By Jerry Keith & Jeffery Sambells

  W3CSchool :http://www.w3school.com.cn/