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 >,如果想让页面加载后执行多个脚本呢?办法是:

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/

时间: 2024-10-08 19:51:53

javascript学习笔记(四):事件处理函数和动态创建html标记。的相关文章

javascript学习笔记整理(函数)

javascript函数的声明和调用将完成某一特定功能的代码集合起来,可以重复使用的代码块. 一.函数的声明方式(创建) A.基本语法(function  关键字)function 函数名([参数1],[参数2]....){    函数体    [retrun]  //返回值} function a(){ alert(1) }; B.字面量定义的形式(匿名函数)var 变量=function ([参数1],[参数2]....){    函数体    [retrun]  //返回值} var a=

Javascript 学习 笔记四

1.children和childNodes(参考:JavaScript中Element与Node的区别,children与childNodes的区别 children和childNodes) Node(节点)是DOM层次结构中的任何类型的对象的通用名称,Node有很多类型,如元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有: 节点类型 NodeType 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 更多

前端乱煮之javascript学习笔记四

1 javascript number对象: javascript只有一种数字对象,那就是number.在javascript中,所有的数字都是64位,这一点不同于其他编程语言(类型语言),也就是说,javascript不是类型语言,不分整形.浮点型等等. 整数最多有十五位(不使用小数点或者指数计数法) 小数最多有十七位. 在javascript中,如果数字的第一个数是0,则会被理解为八进制:如果数字的第一个数字是0x,则会被理解为十六进制. 属性: MAX VALUE:最大值 MIN VALU

javascript学习笔记10(基于组合与动态原型创建对象)

基于组合与动态原型创建对象 方法一:在外部设置prototype <script type="text/javascript">/** * 为了解决原型所带来的问题,此处需要通过组合构造函数和原型来实现对象的创建 * 将属性在构造函数中定义,将方法在原型中定义 * 这种有效集合了两者的优点,是目前最为常用的一种方式 */    function Person(name,age,friends){        //属性在构造函数中定义        this.name =

javascript学习第四课函数

常用函数方式示例: 注意:虽然函数支持嵌套调用,但尽量少用好一些. 简单的效率测试方法: 函数的作用域示例,三种生成函数对比: 函数的形参与实参: 小结:

JavaScript学习笔记四:基本概念(2)

1.对非数值应用一元加/减操作符时,该操作符会像Number()转型函数一样对这个值进行转换.例:var s = +"01"  //值变成数值1. 2.ECMAScript中的所有数值都以IEEE-754 64位格式存储,但操作符并不直接操作64位值,因此整个过程就像只存在32位的整数一样. 3.对于有符号的整数,32位中的前31位用于表示整数的值,第32位为符号位:0表示正数,1表示负数.其中,正数以纯二进制格式存储,负数以二进制格式的补码存储. 4.按位非(~):本质是操作数的负值

JavaScript学习笔记——6.事件处理

1.事件源 任何元素都可以作为事件源 2.事件 鼠标类 click //单击 dbclick //双击 contextmenu //右击菜单 mouseover //移入 mouseout //移出 mousedown //按下 mouseup //弹起 mousemove //移动 selected //选择内容 键盘类 keypress //键盘事件(只能是数字\字母) keyup //弹起(所有键都支持) keydown //按下(所有键都支持) 表单类 focus //获取焦点 blur

javascript学习笔记(四)

首先,实现demo样式 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>记住密码提示框</title> <style> body,input,p{marginj:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{wid

JavaScript学习笔记【3】数组、函数、服务器端JavaScript概述

笔记来自<JavaScript权威指南(第六版)> 包含的内容: 数组 函数 服务器端JavaScript概述 数组 数组是动态的:根据需要它们会增长或缩减,并且在创建数组时无须声明一个固定的大小或在数组大小变化时无须重新分配空间. 数组可能是稀疏的:索引不一定要连续的,它们之间可以有空缺. 通常,数组的实现是经过优化的,用数字索引来访问数组元素一般来说比访问常规的对象属性要快很多. 数组继承自Array.prototype中的属性,它定义了一套丰富的数组操作方法. 如果省略数组直接量中的某个