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/

javascript学习笔记（四）：事件处理函数和动态创建html标记。的更多相关文章

  1. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  2. JavaScript:学习笔记(5)——箭头函数=>以及实践

    JavaScript:学习笔记(5)——箭头函数=>以及实践 ES6标准新增了一种新的函数:Arrow Function(箭头函数).本文参考的链接如下: MDN箭头函数:https://dev ...

  3. Javascript学习笔记四——操作表单

    Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...

  4. javascript学习第四课函数

    函数也是一种数据类型:function类型 所以函数也可当作一个数据作参数传递 三种函数的声明示例: 一般来讲,声明方式一和声明方式二比较常用,方式三比较少. 常用函数方式示例: 注意:虽然函数支持嵌 ...

  5. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  6. Python学习笔记(四)Python函数的参数

    Python的函数除了正常使用的必选参数外,还可以使用默认参数.可变参数和关键字参数. 默认参数 基本使用 默认参数就是可以给特定的参数设置一个默认值,调用函数时,有默认值得参数可以不进行赋值,如: ...

  7. JavaScript学习笔记(四十四) 装饰器

    装饰器模式(Decorator) 在装饰器模式中,可以在运行时给一个对象动态的添加额外的功能.当和静态类打交道的时候(static classes),这可能是一个挑战.但在JavaScript中,对象 ...

  8. scala 学习笔记四 匿名函数

    1.介绍 Scala 中定义匿名函数的语法很简单,箭头左边是参数列表,右边是函数体. 使用匿名函数后,我们的代码变得更简洁了. 下面的表达式就定义了一个接受一个Int类型输入参数的匿名函数: var ...

  9. Javascript学习笔记-基本概念-函数

    ECMAScript 中的函数使用function 关键字来声明,后跟一组参数以及函数体.函数的基本语法如下所示: function functionName(arg0, arg1,...,argN) ...

随机推荐

  1. 【OC简介-类和对象】

    OC与C语言相比,体现的是一种面向对象的思想.OC完全兼容C语言 OC中大多数类前面都有前缀NS,来源于乔布斯NextStep团队,被苹果收购后保留了所有基本语法,合并到Foundation中 OC语 ...

  2. EF6(CodeFirst)+MySql开发脱坑指南

    废话 话说当年,在一个春光明媚的晌午,邂逅了迷人的丁香姑娘,从此拜倒在了她的石榴裙下,至今不能自拔,这位丁香姑娘就是ORM思想. 所谓ORM思想,我的理解就是根据一定的规则,把程序中的对象和数据库中的 ...

  3. 实战-Fluxion与wifi热点伪造、钓鱼、中间人攻击、wifi破解

    原作者:PG     整理:玄魂工作室-荣杰 目录: 0x00-Fluxion是什么 0x01-Fluxion工作原理 0x02-Kali上安装fluxion 0x03-Fluxion工具使用说明+实 ...

  4. 《CLR.via.C#第三版》第二部分第4，5章节读书笔记(二)

    这两章全是理论性的东西,我觉得不必过于钻牛角尖.理论这东西,只有在长期的实践中去慢慢领悟才会深刻.下面我只写些我认为重要的关键知识. (一)类型转换 知识点:向基类型的转换被认为是一种安全的隐式转换: ...

  5. Visual Studio 2012 Visual C++ 入门

    改进的C++11标准的支持 标准模板库 为STL添加了新的库文件:<atomic>.<chrono>.<condition_variable>.<filesy ...

  6. java POI实现向Excel中插入图片

          做Web开发免不了要与Excel打交道.今天老大给我一个任务-导出Excel.开始想的还是蛮简单的,无非就是查找,构建Excel,response下载即可.但是有一点不同,就是要加入图片, ...

  7. [ACM_模拟] POJ1068 Parencodings （两种括号编码转化 规律 模拟）

    Description Let S = s1 s2...s2n be a well-formed string of parentheses. S can be encoded in two diff ...

  8. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  9. Linux gcc的安装

    说明:我是在虚拟机里学习的Linux,很多问题也是和虚拟机有关的.今天就遇到了虚拟机安装gcc是一个问题. 首先查看gcc是否安装: 然后安装gcc.(我的错误就出现在这里.) 我用的虚拟机,练习平时 ...

  10. 知方可补不足~sqlserver中触发器的使用

    回到目录 触发器在过去的10年中,即存储过程和ado.net称霸江湖期间是那么的重要,而现在,trigger显得不是那么必要的,我们很少将复杂的业务写在SQL里,当然也会没有机会写到trigger里了 ...