再看《JavaScript高级程序设计》第13141720-25章

Posted 2020-07-02

第十三章 事件          

1、事件流：描述的是从页面中接收事件的顺序

1）事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

2）事件捕获：事件开始时由不太具体的节点接收，然后逐级向下传播到最具体的元素

3）DOM事件流：经历三个阶段——事件捕获阶段、处于目标阶段和事件冒泡阶段

2、事件处理程序：事件是用户或浏览器自身执行的某种动作，响应某个事件的函数就是事件处理程序

1）html事件处理程序；将事件处理程序设置为 null 就可以删除该事件处理程序。

2）DOM0级事件处理程序：为元素的事件处理程序属性设置一个函数；事件处理程序会在其所属元素的作用域内运行；将事件处理程序设置为 null 就可以删除该事件处理程序。

3）DOM2级事件处理程序：addEventListener()和removeEventListener()，都接收三个参数——要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值参数如果是true表示在捕获阶段调用事件处理程序，如果是false表示在冒泡阶段调用事件处理程序

4）IE事件处理程序（IE和Opera有效）：attachEvent()和detachEvent()，都接收两个参数——事件处理程序名称与事件处理程序函数；由于IE及更早的版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段；可以为一个元素添加多个事件处理程序，事件处理程序会在全局作用域中运行，因此this等于window

5）跨浏览器的事件处理程序：addHandler()用于使用DOM0级方法、DOM2级方法或IE方法来添加事件，removeHandler()用于默认使用DOM0级方法法来移除之前添加的事件，都接收三个参数——要操作的元素、事件名称和事件处理程序函数；为了保证处理事件的代码能在大多数浏览器下一致地运行，跨浏览器的事件处理程序只处理事件冒泡

3、事件对象：

1）DOM中的事件对象：

兼容DOM的浏览器会将一个event对象传入到事件处理程序中；

preventDefault()用于阻止特定事件的默认行为，前提是cancelable属性设置为true；stopPropagation()用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡；

currentTarget属性表明其事件处理程序当前正在处理事件的那个元素，始终等于this；target属性表明事件真正的目标；eventPhase属性表明事件当前正处于事件流的哪个阶段，值为1表明事件处于捕获阶段，值为2表明事件处于目标对象上，值为3表明事件处于冒泡阶段；

2）IE中的事件对象：

如果使用DOM0级方法添加事件处理程序时，可以通过window.event取得event对象；如果使用attachEvent()时，那么会有一个event对象作为参数被传入事件处理程序函数中；如果使用HTML特性添加事件处理程序时，可以通过一个event变量来访问event对象；srcElement属性表明事件真正的目标；returnValue属性用于阻止特定事件的默认行为，值为false表明阻止；cancelBubble属性用于立即停止事件在DOM层次中的传播，即取消进一步的事件冒泡，值为true表明停止；

3）跨浏览器的事件对象：getEvent()返回对event对象的引用；getTarget()返回事件的目标，通过检测event对象的target属性，如果存在则返回该属性的值，否则返回srcElement属性的值；preventDefault()用于取消事件的默认行为，如果不存在该方法，则设置returnValue的值为false；stopPropagation()用于阻止事件流，如果不存在该方法，则设置cancelBubble的值为true；

var EventUtil = {

getEvent: function(event){

        return event ? event : window.event;

    },

getTarget: function(event){

        return event.target || event.srcElement;

    },

preventDefault: function(event){

        if (event.preventDefault){

            event.preventDefault();

        } else {

            event.returnValue = false;

        }

    },

stopPropagation: function(event){

        if (event.stopPropagation){

            event.stopPropagation();

        } else {

            event.cancelBubble = true;

        }

    }

 

};

4、事件类型

1）UI事件：指的是那些不一定与用户操作有关的事件

DOMactive：表明元素已经被用户操作（通过鼠标或键盘）激活；

load：当页面完全加载在window上触发;

unload：当页面完全卸载在window上触发；

abort：当用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上触发；

error：当发生javascript错误时在window上触发；

select：当用户选择文本框（<input>或<texterea>）中的一或多个字符时触发；

resize：当窗口或框架大小变化时在window上触发；

scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发；

2）焦点事件：会在页面元素获得或失去焦点时触发

blur：在元素失去焦点时触发（通用）；

DOMFocusIn：在元素获得焦点时触发，冒泡（Opera支持）；

DOMFocusOut：在元素失去焦点时触发（Opera支持）；

focus：在元素获得焦点时触发（通用）；

focusin：在元素获得焦点时触发，冒泡（IE5.5+、Safari5.5+、Opera11.5+和Chrome支持）；

focusout：在元素失去焦点时触发（IE5.5+、Safari5.5+、Opera11.5+和Chrome支持）；

3）鼠标和滚轮事件

click：在用户点击主鼠标按钮或者按下回车键时触发；

dblclick：在用户双击主鼠标按钮时触发；

mousedown：在用户按下了任意鼠标按钮时触发；

mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发；

mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发；

mousemove：当鼠标指针在元素内部移动时重复触发；

mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发；

mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发；

mouseup：在用户释放鼠标按钮时触发；

mousewheel：当用户通过鼠标滚轮在垂直方向上滚动页面时触发；当用户向前滚动页面时，wheelDelta是120的倍数；当用户向后滚动页面时，wheelDelta是-120的倍数

shiftKey、ctrlKey、altKey、metaKey：在用户按下Shift、Ctrl、Alt和Meta（在Windows键盘中是Windows键，在苹果机是Cmd键）时布尔值为true

设置bottom属性：

var EventUtil = {

getButton: function(event){

        if (document.implementation.hasFeature("MouseEvents", "2.0")){

            return event.button;

        } else {

            switch(event.button){

                case 0:

                case 1:

                case 3:

                case 5:

                case 7:

                    return 0;

                case 2:

                case 6:

                    return 2;

                case 4: return 1;

        }

    }

}

4）键盘与文本事件

keydown：当用户按下键盘上的任意键时触发，如果按住不放则会重复触发；

keypress：当用户按下键盘上的字符键时触发，如果按住不放则会重复触发；

keyup：当用户释放键盘的键时触发；

textInput：当用户将文本插入文本框之前触发；

5）复合事件

compositionstart：在IME（输入法编辑器）的文本复合系统打开时触发，包含正在编辑的文本；

compositionupdate：在想输入字段中插入新字符时触发，包含正插入的新字符；

compositionend：在IME的文本复合系统关闭时触发，包含此次输入会话中插入的所有字符；

6）变动事件

DOMSubtreeModified：在DOM结构中发生任何变化时触发；

DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发，在使用appendChild()、replaceChild()和insertBefore()时首先触发；

DOMNodeRemoved：在节点从其父节点中被移除时触发，在使用removeChild()和replaceChild()时首先触发；

DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发；

DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发；

DOMAttrModified：在特性被修改之后触发；

DOMCharacterDataModified：在文本节点的值发生变化时触发；

7）HTML5事件

contexmenu事件：用于表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单；

beforeunload事件：在浏览器卸载页面之前触发；

DOMContentLoaded：在形成完整的DOM树之后触发，不管当时图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕；

readystatechange事件：提供与文档或元素的加载状态有关的信息，值为uninitialized（未初始化）、loading（正在加载）、loaded（加载完毕）、interactive（交互）、complete（完成）；

pageshow事件：在页面显示时触发，而且是在load事件之后触发；pagehide事件：在浏览器卸载页面时触发，而且是在unload事件之前触发；

hashchange事件：在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员

8）设备事件

orientationchange事件：当用户将设备由横向查看模式切换为纵向查看模式时触发，window.orientationchange值为0（表示肖像模式）、90（表示向左旋转的横向模式）、-90（表示向右旋转的模式）；

MozOrientation事件：当设备的加速计检测到设备方向改变（移动）时触发，event.x、event.y、event.z的值介于1至-1之间，表示不同坐标轴上的方向；

deviceorientation事件：当设备的加速计检测到设备方向改变（朝向）时触发；

devicemotion事件：：当用户将设备移动时触发；

9）触摸与手势事件

touchstart事件：当手指触摸屏幕时触发；

touchmove：当手指在屏幕上滑动时连续触发；

touchend：当手指从屏幕上移开时触发；

touchcancel：当系统停止跟踪触摸时触发；

gesturestart：当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发；

gesturechange：当触摸屏幕的任何一个手指的位置发生变化时触发；

gestureend：当任何一个手指从屏幕上面移开时触发；

5、内存和性能

1）事件委托：利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

2）移除事件处理程序

6、模拟事件

1）模拟鼠标事件

var btn = document.getElementById("myBtn");

//创建事件对象

var event = document.createEvent("MouseEvents");

//初始化事件对象

event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0,null);

//触发事件

btn.dispatchEvent(event);

2）模拟键盘事件

3）模拟其他事件

4）自定义DOM事件

5）IE中的事件模拟

第十四章 表单脚本

1、表单的基础知识

1）HTMLFormElement类型的属性和方法

acceptCharset：服务器能够处理的字符集

action：接收请求的URL，等价于HTML中的action特性；

elements：表单中所有控件的集合；

encype：请求的编码类型，等价于HTML中的enctype特性；

length：表单中控件的数量；

method：要发送的HTTP请求类型，通常是“get”或“post”，等价于HTML中的method特性；

name：表单的名称，等价于HTML中的name特性；

reset()：将所有表单域重置为默认值；

submit()：提交表单；

target：用于发送请求接收响应的窗口名称，等价于HTML中的target特性；

2）提交表单

 <!-- 通用提交按钮 -->

<input type=”submit” value=”Submit Form”>

 <!-- 自定义提交按钮 -->

<bottom type=”submit” >Submit Form</bottom>

 <!-- 图像按钮 -->

<input type=”submit” src=”submit-form.gif”>

3）重置表单

 <!-- 通用重置按钮 -->

<input type=”reset” value=”Reset Form”>

 <!-- 自定义重置按钮 -->

<bottom type=”reset” >Reset Form</bottom>

4）表单字段

取得表单字段

var form=document.getElementById(“form1”);

//取得表单中的第一个字段

var field1=form.elements[0];

//取得名为“textbox1”的字段

var field2=form.elements[“textbox1”];

//取得表单中包含的字段的数量

var fieldCount=form.elements.length;

 

共有的表单字段属性（<fieldset>除外）

disable：布尔值，表示当前字段是否被禁用；

form：表示当前字段所属表单的指针，只读；

name：当前字段的名称；

readOnly：布尔值，表示当前字段是否只读；

tabIndex：表示当前字段的切换（tab）序号；

type：当前字段的类型；

value：当前字段将被提交给服务器的值；

 

共有的表单字段方法（<fieldset>除外）

focus()：用于将浏览器的焦点设置到表单字段，使其可以响应键盘事件；

blur()：用于从元素中移走焦点；

 

共有的表单字段事件

blur事件：当前字段失去焦点时触发；

change事件：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发，对于<select>元素，在其选项改变时触发；

focus事件：当前字段获得焦点时触发；

2、文本框脚本

1）<input>元素的单行文本框：<input type=”text” size=”25” maxlength=”50” value=”initial value”>

2）<inputarea>元素的多行文本框：<textarea rows=”25” cols=”5”>initial value</textarea>

3）选择文本：

select()方法：选择文本框中的所有文本

select事件

取得选择的文本：属性selectionStart和selectionEnd，值为基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）

Function getSelectedText(textbox){

return textbox.value.subString(textbox.selectionStart,textbox.selectionEnd);

}

选择部分文本：setSelectionRange()方法，接收两个参数——要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引

4）过滤输入

屏蔽字符

EventUtil.addHandler(textbox, "keypress", function(event){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

var charCode = EventUtil.getCharCode(event);

if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){

EventUtil.preventDefault(event);

}

});

 

操作剪切板

beforecopy事件：在发生复制操作前触发；

copy事件：在发生复制操作时触发；

beforecut事件：在发生剪切操作前触发；

cut事件：在发生剪切操作时触发；

beforepaste事件：在发生粘贴操作前触发；

paste事件：在发生粘贴操作时触发；

clipboardData对象：用于访问剪切板的数据，getData()、setData()和clearData()方法<TextboxClipboardExample01.htm>

var EventUtil = {

   getClipboardText: function(event){

        var clipboardData =  (event.clipboardData || window.clipboardData);

        return clipboardData.getData("text");

    },

setClipboardText: function(event, value){

        if (event.clipboardData){

            event.clipboardData.setData("text/plain", value);

        } else if (window.clipboardData){

            window.clipboardData.setData("text", value);

        }

    }

};

5）自动切换焦点：<TextboxTabForwardExample01.htm>

function(){

function tabForward(event){            

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

if (target.value.length == target.maxLength){

var form = target.form;

for (var i=0, len=form.elements.length; i < len; i++) {

if (form.elements[i] == target) {

if (form.elements[i+1]){

form.elements[i+1].focus();

}

return;

}

}

}

}

6）HTML5约束验证API

必填字段：required属性

其他输入类型：type=”email”、type=”url”

数值范围：可以指定min属性（最小的可能值）、max属性（最大的可能性）和step属性（从min到max的两个刻度间的差值）

输入模式：pattern属性，值为正则表达式，用于匹配文本框中的值

检测有效性：checkValidity()方法可以检测表单中的某个字段是否有效

禁用验证：novalidate属性

3、选择框脚本

1）HTMLSelectElement类型的属性和方法

add(newOption,relOption)：向控件中插入新<option>元素，其位置在相关项relOption之前；

multiple：布尔值，表示是否允许多项选择，等价于HTML中的multiple特性；

options：控件中所有<option>元素的HTMLCollection；

remove(index)：移除给定位置的选项；

selectedIndex：基于0的选中项的索引，如果没有选中项，则为-1；

size：选择框中可见的行数，等价于HTML中的size特性；

2）HTMLOptionElement对象的属性

index：当前选项在options集合中的索引；

label：当前选项的标签，等价于HTML中的label特性；

selected：布尔值，表示当前选项是否被选中；

text：选项的文本；

value：选项的值，等价于HTML中的value特性；

3）选择选项：第一种方法使用选择框的selectedIndex属性，不过只允许选择一项；第二种方法是将要取得的那一项的selected属性设置为true，而且允许动态选择任意多项；

4）添加选项：

第一种方法是使用DOM方法<SelectboxExample04.htm>

var newOption = document.createElement("option");

newOption.appendChild(document.createTextNode(textTextbox.value));

newOption.setAttribute("value", valueTextbox.value);                 selectbox.appendChild(newOption);

第二种方法是使用Option构造函数来创建新选项，接收两个参数——文本和值（可选）

var newOption = new Option(“Option text”,”Option value”);

selectbox.appendChild(newOption);

第三种方法是使用选择框的add()方法,接收两个参数——要添加的新选项和将位于新选项之后的选项（可选）

var newOption = new Option(“Option text”,”Option value”);

selectbox.add(newOption,undefined);

5）移除选项

第一种方法是使用DOM方法：selectbox.removeChild(selectbox.options[0]);

第二种方法是使用remove()方法，接收一个参数——要移除选项的索引：selectbox.remove(0);

第三种方法是将相应选项设置为null：selectbox.option[0]=null;

6）移动和重排选项

将第一个选择框中的第一个选项移动到第二个选择框中

var selectbox1 = document.getElementById("selLocations1");

var selectbox2 = document.getElementById("selLocations2");

selectbox2.appendChild(selectbox1.options[0]);

在选择框中向前移动一个选项的位置

var optionToMove = selectbox.options[1];

selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);

4、表单序列化<FormSerializationExample01.htm>

function serialize(form){        

var parts = [],

field = null,

i,

        en,

        j,

        optLen,

        option,

        optValue;  

        for (i=0, len=form.elements.length; i < len; i++){

         field = form.elements[i];

                switch(field.type){

                 case "select-one":

                    case "select-multiple":

                    

if (field.name.length){

                 for (j=0, optLen = field.options.length; j < optLen; j++){

                     option = field.options[j];

                        if (option.selected){

                         optValue = "";

                            if (option.hasAttribute){

                             optValue = (option.hasAttribute("value") ? option.value : option.text);

                             } else {

optValue = (option.attributes["value"].specified ? option.value : option.text);

                              }

                              parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));

}

}

}

                break;      

case undefined:     //fieldset

            case "file":        //file input

            case "submit":      //submit button

            case "reset":       //reset button

            case "button":      //custom button

             break;     

            case "radio":       //radio button

case "checkbox":    //checkbox

             if (!field.checked){

                 break;

                 }

                 /* falls through */                

default:

             //don‘t include form fields without names

                if (field.name.length){

                 parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));

                }

}

}        

return parts.join("&");

}

5、富文本编辑

1）使用designMode属性：首先在页面中嵌入一个包含空HTML页面的iframe，其次设置designMode属性（默认值为off）为on时，整个文档就会变得可以编辑；

2）使用contenteditable属性：通过将contenteditable属性应用给页面中的任何元素，该元素就可以立即被编辑；通过设置contenteditate属性打开或关闭编辑模式，值为true（打开）、false（关闭）和inherit（从父元素那里继承）

3）操作富文本：document.execCommand()用于对文档执行预定义的命令，接收三个参数——要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值（始终为false）和执行命令必须一个值（如果不需要值，则传递null）

4）富文本选区：使用iframe的getSelection()方法，返回一个表示当前选择文本的Selection对象

5）表单与富文本<RichTextEditingExample01.htm>

EventUtil.addHandler(form, "submit", function(){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);                 target.elements["comments"].value = frames["richedit"].document.body.innerHTML;

});

第十七章 错误处理与检测

1、浏览器报告的错误

1）IE：IE 是唯一一个在浏览器的界面窗体（chrome）中显示 JavaScript 错误信息的浏览器。在发生 JavaScript错误时，浏览器左下角会出现一个黄色的图标，图标旁边则显示着 "Error on page" （页面中有错误）。打开“Tools”（工具）菜单中的“Internet Options”（Internet 选项）对话框，切换到“Advanced”（高级）选项卡，选中“Display a notification about every script error”（显示每个脚本错误的通知）复选框。单击“OK”（确定）按钮保存设置。

2）Firefox：默认情况下，Firefox 在 JavaScript 发生错误时不会通过浏览器界面给出提示。但它会在后台将错误记录到错误控制台中。单击“Tools”（工具）菜单中的“Error Console”（错误控制台）可以显示错误控制台。

3）Safari：Windows 和 Mac OS 平台的 Safari 在默认情况下都会隐藏全部 JavaScript 错误。为了访问到这些信息，必须启用“Develop”（开发）菜单。为此，需要单击“Edit”（编辑）菜单中的“Preferences”（偏好设置），然后在“Advanced”（高级）选项卡中，选中“Show develop menu in menubar”（在菜单栏中显示“开发”菜单）。启用此项设置之后，就会在 Safari 的菜单栏中看到一个“Develop”菜单。

4）Opera：Opera 在默认情况下也会隐藏 JavaScript 错误，所有错误都会被记录到错误控制台中。要打开错误控制台，需要单击“Tools”（工具）菜单，在“Advanced”（高级）子菜单项下面再单击“Error Console”（错误控制台）。

5）Chrome：与 Safari 和 Opera 一样，Chrome 在默认情况下也会隐藏 JavaScript 错误。所有错误都将被记录到Web Inspector 控制台中。要查看错误消息，必须打开 Web Inspector。为此，要单击位于地址栏右侧的“Control this page”（控制当前页）按钮，选择“Developer”（开发人员）、“JavaScript console”（JavaScript控制台）。

2、错误处理

1）try-catch语句

try{

// 可能会导致错误的代码

} catch(error){

// 在错误发生时怎么处理

}

finally语句：虽然在 try-catch 语句中是可选的，但是finally 子句一经使用，其代码无论如何都会执行。只要代码中包含 finally 子句，则无论 try 或 catch 语句块中包含什么代码——甚至 return 语句，都不会阻止 finally 子句的执行。

function testFinally(){

try {

return 2;

} catch (error){

return 1;

} finally {

return 0;

}

}

2）抛出错误：throw操作符，用于随时抛出自定义操作符。抛出错误时，必须要给 throw 操作符指定一个值。

3）error（错误）事件：在任何 Web 浏览器中， onerror 事件处理程序都不会创建 event 对象，但它可以接收三个参数：错误消息、错误所在的 URL 和行号。

4）常见的错误类型

类型转化错误：类型转换错误发生在使用某个操作符，或者使用其他可能会自动转换值的数据类型的语言结构时，在使用相等（==）和不相等（!=）操作符，或者在 if 、 for 及 while 等流控制语句中使用非布尔值时。

数据类型错误：在将预料之外的值传递给函数的情况下，最容易发生数据类型错误。

通信错误：第一种通信错误与格式不正确的 URL 或发送的数据有关。最常见的问题是在将数据发送给服务器之前，没有使用 encodeURIComponent() 对数据进行编码；另外，在服务器响应的数据不正确时，也会发生通信错误。

5）区分致命错误和非致命错误：对于非致命错误，可以根据下列一或多个条件来确定：不影响用户的主要任务；只影响页面的一部分；可以恢复；重复相同操作可以消除错误。对于致命错误，可以根据下列一或多个条件来确定：应用程序根本无法继续运行；错误明显影响到了用户的主要操作；会导致其他连带错误。

6）把错误记录到服务器：要建立这样一种 JavaScript 错误记录系统，首先需要在服务器上创建一个页面（或者一个服务器入口点），用于处理错误数据。这个页面的作用无非就是从查询字符串中取得数据，然后再将数据写入错误日志中。

3、调试技术

1）将消息记录到控制台

2）将消息记录到当前页面

3）抛出错误

4、常见的IE错误

1）操作中止：在修改尚未加载完成的页面时，就会发生操作终止错误。发生错误时，会出现一个模态对话框，告诉你“操作终止。”单击确定（OK）按钮，则卸载整个页面，继而显示一张空白屏幕。要避免这个问题，可以等到目标元素加载完毕后再对它进行操作，或者使用其他操作方法。

2）无效字符