《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用的事后再看