JavaScript DOM 高级程序设计读书笔记二
响应用户操作和事件
事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序)。
事件的类型
事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于document对象),表单事件,自定义事件。
控制事件流和注册事件侦听器
事件流描述的是从页面中接收事件的顺序;事件侦听器,就是一个常规的JavaScript函数。
三个阶段和三个模型
事件冒泡:指的是目标元素的事件方法优先并且会被首先执行,然后,事件会向外传播到每个祖先元素,直至document对象。由Microsoft IE提出的冒泡型事件流;
事件捕获:把优先权赋予最外层的祖先元素,事件相应地被由外向内传播,直至抵达目标元素。由Netscape提出的捕获型事件流;
在W3C DOM2 事件模型中,当目标元素被单击时,首先是经过事件捕获阶段,接着是处于目标阶段,最后是事件冒泡阶段;
阻止冒泡
可以在事件对象上调用stopPropagation()方法,对于IE, 需要将事件的cancelBubble属性设置为true。
取消默认动作
与事件流有关的最后一个问题就是默认动作。DOM2 事件规范中提供了使用事件的preventDefault()方法取消默认动作的方式。
注册事件的四种事件模型
1. 嵌入式注册模型
例如:
<a href="http://www.google.com" onclick = "alert('11'); return false;">ie</a>
缺点:使标记混乱不堪
2. 传统的事件模型
例如:
window.onload = function(){}
传统的方法从属于浏览器默认的事件流,没有办法指定是在捕获阶段还是在冒泡阶段调用事件。
3. IE事件模型
例如:
window.attachEvent('onload', function(){});
缺点:只对IE有效,对其他浏览器毫无用处;其次,this 引用的是原始JavaScript函数,而不是附加事件侦听器的那个对象。
4. W3C DOM2 事件模型
DOM2事件规范中包含addEventListener()和removeEventListener()方法,这两个方法接受3个参数(事件,事件侦听器,事件阶段),第三个参数是true表示事件侦听器在捕获阶段内执行,否则,如果为false,则会在冒泡阶段发生(默认是false)。此外,W3C 采取了去掉on前缀的方案,因此所有事件都必须使用事件名称而非传统的方法名称来标识。例如:
window.addEventListener('load', function(e){}, false);
//在W3C的模型中,事件侦听器会取得一个表示事件自身的参数。但在IE中,事件对象被保存在window.event中。
DOM2 事件规范中的Event对象属性和方法
- type: 是一个包含事件名称的字符串值;
- target: 是DOM文档中最早调用事件序列的目标对象,IE浏览器提供的是srcElement属性;
- currentTarget: 是当前正在处理的事件侦听器所在的事件流中的DOM元素;
- preventDefault(): 取消对象的默认动作,比如:浏览器重定向到一个锚元素的href属性的动作;
- stopPropagation(): 用于停止事件流的进一步执行,包括捕获阶段,目标对象和冒泡阶段;
DOM2 事件规范中的MouseEvent对象属性
处理鼠标相对于文档原点的位置的兼容性处理:
function getPointerPositionInDocument(event) {
let e = event || window.event;
let x = e.pageX || (e.clientX +
document.documentElement.scrollLeft || document.body.scrollLeft);
let y = e.pageY || (e.clientY +
document.documentElement.scrollTop || document.body.scrollTop);
return { 'x': x, 'y': y };
}
处理文档/页面水平/垂直方向滚动的像素值:
/*pageXOffset, pageYOffset 属性是 scrollX, scrollY 属性的别名。window.pageXOffset == window.scrollX; // 总是 true
为了跨浏览器兼容性,请使用 window.pageXOffset 代替 window.scrollX。另外,旧版本的 IE(<9)两个属性都不支持,必须通过其他的非标准属性来解决此问题。
完整的兼容性代码如下:
*/
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
//代码来自MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY
动态修改样式和层叠样式表
CSSStyleDeclaration对象
这个对象用于表示一个元素的style属性。
- cssText: 包含以字符串形式表示的全部规则;
- parentRule: 将引用CSSStyleRule对象;
- getPropertyValue(propertyName): 返回一个字符串形式的CSS样式属性值;
- removeProperty(propertyName): 从声明中移除特定的属性;
- setProperty(propertyName, value, priority): 用于设置特定CSS属性的值;
将样式置于DOM脚本之外
1. style 属性
当在小范围内修改表现时,你可能会经常使用 HTMLElement 元素的 style 属性来修改其表现。但修改style属性存在如下两个主要问题:
- 使用 style 属性将设计样式嵌入到行为层的DOM脚本中,并不比在语义标记中使用 style 属性更好。
- 通过 style 属性只能访问到在元素的style属性中以嵌入方式声明的CSS属性。换句话说,通过style属性无法访问由多重样式层叠表而来或者从父元素继承的任何css属性。
2. setProperty(propertyName, value, priority)
除了可以使用style属性直接设置css属性(例如:element.style.color = 'red';
)外,DOM2样式规范为CSSStyleDeclaration对象定义了相应的方法,比如setProperty()就使用固有的带连字符的CSS属性名称和值:例如:element.style.setProperty('background-color', 'red');
。但非标准的浏览器(例如IE)不支持这种方法。
3. 基于className切换样式
使用方法:element.className = 'newClassName';
,此方法的优点是在所有浏览器中都有效。
访问计算样式
DOM2 样式规范在document.defaultView中包含了一个名叫getComputedStyle()的方法,恰好是为这个目的而设计的。该方法返回一个只读的CSSStyleDeclaration对象,其中包含特定元素的所有计算样式,而不仅仅是以嵌入方式定义的样式。