《JavaScript高级语言设计》(第三版)学习笔记(7)

事件

事件流

描述从页面接受事件的顺序
IE事件流为事件冒泡，即事件开始是有具体的元素接受，然后逐级向上传播到叫我不具体的节点（window对象）

事件捕获，由不具体的节点接受事件，最后具体节点接受事件。在事件到达预定目标之前捕获

DOM2事件

事件捕获阶段，处于目标阶段，事件冒泡阶段
首先是事件捕获，为截获事件提供机会
然后实际目标接受事件最后冒泡阶段，对事件作出响应
捕获阶段不会涉及目标事件

事件处理程序

指定事件处理程序
首先会创建一个封装元素属性值的函数。这个函数有一个局部变量event(事件对象)通过event可以访问事件对象，this等价于事件目标元素
事件处理函数内部可以向访问局部变量一样访问document及该元素本身的成员

DOM0级事件处理程序

将元素的事件属性设置为一个函数，函数中的this为引用的当前元素

var input=document.getElementByTagName("div");input.onclick = function(){    alert(this.name);}input.onclick = null;//删除事件

DOM2级事件处理程序

用于处理指定和删除事件处理程序的操作
addEventListener()
removeEventLister()

var btn = document.getElementById("myBtn");btn.addEventListener("click",function(){//同一对象可以多次调用，按照添加顺序执行事件,IE9+},false);//第三个参数为true表示在捕获阶段处理程序，false表示在冒泡阶段处理程序btn removeEventListener("click",fun);//移除事件fun为函数引用

IE8

var btn = document.getElementById("myBtn");btn.attachEvent("onclick", function(){//程序的作用域在全局中运行，处理程序已添加顺序相反执行alert("Clicked");});btn.detachEvent("onclick", handler);

//跨浏览器var EventUtil = {    addHandler: function(element, type, handler){//为对象添加事件        if (element.addEventListener){            element.addEventListener(type, handler, false);        } else if (element.attachEvent){            element.attachEvent("on" + type, handler);        } else {            element["on" + type] = handler;        }    },    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;        }    },    removeHandler: function(element, type, handler){//移除事件        if (element.removeEventListener){            element.removeEventListener(type, handler, false);        } else if (element.detachEvent){            element.detachEvent("on" + type, handler);        } else {            element["on" + type] = null;        }    },    stopPropagation: function(event){//停止事件冒泡        if (event.stopPropagation){            event.stopPropagation();        } else {            event.cancelBubble = true;        }    }};

事件对象

在DOM上触发某个时间会产生一个事件对象，这个对象包含事件有关的信息


this对象等于currentTarget的值
阻止特定事件的默认行为
只有cabcelable为true时才可以
stopPropagation()立即停止时间在DOM层次中的传播

var link = document.getElementById("myLink");link.onclick = function(event){event.preventDefault();};

IE中的事件对象
event对象作为window对象的一个属性存在
通过window.event获取event对象

var link = document.getElementById("myLink");link.onclick = function(){//取消事件的默认事件window.event.returnValue = false;};

var btn = document.getElementById("myBtn");btn.onclick = function(){alert("Clicked");window.event.cancelBubble = true;//取消事件冒泡};document.body.onclick = function(){alert("Body clicked");};

事件类型

UI事件，焦点事件，鼠标事件，滚轮事件，文本事件，键盘事件，合成事件，变动事件，变动名称事件

UI事件

事件 含义 DOMActivate 表示元素已被用户操作，不建议使用 load 页面完全加载后在window上触发，图片加载完在img元素上触发，script加载完成后在元素上触发 unload 页面完全卸载后在window上触发，用户从一个页面切换到另一个页面 abort 用户停止下载过程时 error 发生js错误时在window上触发 select 用户选择文本框中的字符 resize 窗口大小发生改变 scroll 用户滚动带滚动条元素

var isSupportDOM2 = document.implementation.hasFeature("HTMLEvents","2.0");//是否支持DOM2事件var isSupportDOM3 = document.implementation.hasFeature("UIEvent","3.0");//是否支持DOM3

焦点事件

名称 含义 blur 元素失去焦点不会冒泡 DOMFocusIn 等价于focus DOMFocusIn 等价于blur focus 元素获得焦点不会冒泡 focusin 获得焦点会冒泡 focusout 失去焦点会冒泡

var isSuppordFocus = document.implementation.hasFeature("FocusEvent","3.0");

鼠标和滚轮事件

名称 含义 click 单击鼠标 dbclick 双击鼠标 mousedown 按下鼠标 mouseenter 鼠标从元素外部首次移到元素范围内 mouseLeav 鼠标首次移除元素外 mouseove 鼠标在元素内移动 mouseout 鼠标移入另一个元素 mouseover 鼠标移入元素，在边界触发 mouseup 释放鼠标

所有鼠标事件都会冒泡

var isSuppordMouseDOM2 = document.implementation.hasFeature("MouseEvents","2.0");var isSuppordMouseDOM3 = document.implementation.hasFeature("MouseEvents","3.0");

鼠标事件对象的clientX和clientY，表示事件发生时鼠标的位置
pageX和pageY事件在页面的什么位置发生的
screenX和screenY鼠标相对于屏幕位置
事件对象的shiftKey，ctrlKey，altKey，metaKey表示是否按下shift，ctrl，alt和window/cmd
relatedTarget属性，只有mouseover和mouseout事件，对象才有。保存相关元素Ie中toElement
button属性，mousedown和mouseup，0表示左键，1表示中间，2表示右键 IE8中完全不同
detail属性表示给定位置上发生多少次单击
用到时再看吧P376

键盘文本事件

名称 含义 keydown 用户按下键盘任意键时触发，按住重复触发 keypress 按下任意字符键触发，按住重复触发 keyup 释放键盘触发 textInput 当用户在可编辑区输入字符时触发

event.keyCode表示按下的键码

复合事件

…用到再说

表单对象

HTMLFormElement

属性或方法 含义 acceptCharset 服务器能够处理的字符集，等价于HTMl中的accept-charset action 接受请求的URL，等价于HTML中的action特性 elements 表单中所有的控件集合 enctype 请求编码类型，等价于enctype特性 length 表单中控件数量 method HTTP请求类型等价于HTML的method特性 reset() 表单域重置为默认值 submit() 提交表单 target 用于发送请求和接受请求的响应窗口，等价于target特性

表单组件属性

属性 含义 disabled 表示当前字段是否禁用 form 指向当前字段所属表单的指针 name 当前字段名称 readOnly 表示当前字段是否只读 tabIndex 表示当前字段的切换序号 type 类型 value 值

自动将焦点移到对应字段
change 失去焦点并且value值改变
textarea的size特性指定文本框显示字符数，maxlength指定文本框接受最大字符数，调用select()方法自动将焦点聚到textarea对象上，selectionStart和selectEnd属性表示文本的选择的index
操作剪切板P425
required表示必填
数字类型输入元素min，max，step属性
pattren对文本进行约束
novalidate属性表单不进行验证

富文本在线编辑HTML用的事后再看