正文

javascript学习笔记（四）：事件处理函数和动态创建html标记。

IP云
IP云V管理员/3 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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;

         }

     }

   }

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

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

     }

 }

参考：

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

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

相关阅读

目录[+]