《征服AjaxWeb2.0开发技术详解》读书笔记2
- 对象的高级应用
获得浏览器的信息：
navigator对象
处理地址栏信息：
location对象
控制前进和后退：
history对象
文档操作：
document对象
- 使用with（）语句简化对象访问。这个虽然早早的就知道了，但是一直想不去来去用。
with(document){
write("1");
write("2");
write("3");
write("4");
}
- 使用对象的事件属性创建事件处理程序
object.onEventName=eventHandlr;
来个例子：
<script language="JavaScript" type="text/javascript">
<!--
function sayHello(){
alert("hello!");
}
document.onclick=sayHello;
//-->
</script>
注意：一个函数其实也是一个对象，所以document.onclick等于的是一个对象，所以syaHello后面没有括号。
- 使用attachEvent和addEventListener方法绑定事件处理程序
语法如下：
element.attachEvent(eventName,eventHandler,useCapture);
element.addEventListener(enentName,eventHandler,useCapture);
这两个方法在形式上是相同的，只是两者对事件名称参数eventName的形式有所不同。eventHandler是事件处理程序的入口，一般是一个函数名；useCapture表示事件处理模式是否使用捕获模式，即从外向内的模式。
来个例子：
function func(){
//dosomething.
}
if(element.addEventListener){
element.addEventListener("onclick",func,false);
}else{
element.attachEvent("click",func,false);
}
其实上面的代码就是给对象element加上单机事件。只是为了考虑到浏览器的兼容性，所以判断了一下。
- 使用event对象捕获事件信息。
先来段理论性强点的话。在事件发生时，会产生一个临时对象event，这个对象存储着事件行为的相关信息。如果没有此事件的处理函数，则event对象立即消失；否则在事件处理程序完成以后event对象才消失。产生event对象是一个线形的过程，即当连续或者同时有多个事件发生是，只会产生一个event对象，它和当前时间相关联，而不会对应多个事件产生多个event对象。因此event对象是一个全局的概念。
在Ie和Mozzilla浏览器中使用event对象是不同的，在此仅说明IE情况。
在IE浏览器中，event对象作为window对象的属性提供，引用方式如下：window.event。window部分可以省略，所以也可以直接使用“event”来饮用对象。在IE中event对象是一个全局的概念，可以在事件处理程序员的任何地方使用。来看个例子。
<script language="JavaScript" type="text/javascript">
<!--
function imgClick(){
alert(event.srcElement.src); //srcElement属性表示产生事件的元素。
}
//-->
</script>
<img src="1.jpg" onclick="imgClcik()"/>
- 使用event对象的属性
属性
描述
使用 event 对象获取高级流重定向器(ASX)文件中项目横幅的 Abstract 内容。
设置或获取 Alt 键的状态。
设置或获取左 Alt 键的状态。
使用 event 对象获取高级流重定向器(ASX)文件中项目的 Banner 内容。
设置或获取用户所按的鼠标按钮。
设置或获取当前事件是否要在事件句柄中向上冒泡。
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
获取表明文档处理当前 LayoutRect 对象后是否包含附加的内容。
设置或获取 Ctrl 键的状态。
设置或获取左 Ctrl 键的状态。
设置或获取 oncellchange 事件影响的数据列。
设置或获取事件发生时激活或鼠标将要离开的对象。
设置或获取与导致事件的按键关联的 Unicode 按键代码。
通过 event 对象获取高级流重定向器(ASX)文件中项目横幅的 MoreInfo 内容。
获取打印模板中下页的位置。
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
设置或获取对象上发生更改的属性名称。
设置或获取由数据源对象提供的数据成员的名称。
设置或获取数据源对象的数据传输结果。
从数据源对象设置或获取对默认数据集的引用。
获取 onkeydown 事件是否正在重复。
设置或获取事件的返回值。
当 oncontentsave 触发时获取剪贴板类型。
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
设置或获取 Shift 键的状态。
设置或获取左 Shift 键的状态。
设置或获取触发事件的对象。
设置或获取触发 onfilterchange 事件的滤镜对象。
获取触发事件的行为的统一资源名称(URN)。
设置或获取用户要将鼠标指针移动指向的对象的引用。
从 event 对象中获取事件名称。
设置或获取滚轮按钮滚动的距离和方向。
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
设置或获取鼠标指针位置相对于父文档的 y 像素坐标。
看一段很常用的代码，是一段按Ctrl+回车可以提交表单的例子。
<script language="JavaScript" type="text/javascript">
<!--
var txtContent=document.getElementById("txtContent");
txtContent.onkeydown=function(evt){
evt=evt?evt:window.event;
if(evt.ctrlKey && 13==evt.keyCode) this.form.submit();//通过form属性，获得元素所在表单
}
}
//-->
</script>
这个函数接受一个参数evt，在非Ie中的浏览器中，会自动将event对象作为参数传进来，而在iE中，event对象是一个全局的对象，在任何对方均可使用，并不会作为函数的参数，因此需要使用如下语句来实现浏览器的兼容性：
evt=evt?evt:window.event;
- 引用表单域
表单域是指用于接受用户输入或者操作的一些页面元素。在javascrit中引用一个表单元素，可以采用两种方法：
var element=theForm.elements[index]; //根据索引来取
var element=theForm.elements["elementName"];//根据name来取。
还有一个常用的，遍历表单中某种类型所有的表单域，对其进行统一处理。
for(var i=0;i<theForm.elements.length;i++){
if("checkbox"==theForm.elements[i].type){
//dosomething;
}
}
- 使用defaultValue获得HTML标记中的value值
文本与对象通常是在html标记中定义的，如果在标记中制定了value属性，则在脚本中可以使用defaultValue来获得这个值。在调用表单的reset方法时，实际上就是用这个值来重新填充文本域的。这个是直读属性，不能通过脚本来修改。
- 使用onselect事件处理用户的选中操作。
记得新浪还是哪个网站就是利用这个事件来防止用户拷贝的。一有选中就将剪贴板中的东西清空。不过据说IE7已经不允许js脚本操作本地剪贴板了。
- 使用列表框
列表框是项目中经常使用的，也是操作起来变化性比较多的。这里重点列出来几点。
- 使用selectedIndex属性获得当前选项的索引。
注意：selectedIndex只是一个只读属性，想要通过索引指定的下列列表框的项设置为选中状态，可以设置option对象的selected=true来实现。
- 使用options属性获得选项的集合。
options是数组的形式。通过遍历可以批处理所有的option对象。
- 为select对象添加一个选项。
思路如下：先创建一个option对象，并将其添加到下拉列表框的末尾。代码实现如下：
someSelect.options[slt.length]=new Option(value,text);
slt.length指定了新添加选项的为止。
- 从select对象中删除一个选项
someSelect.options[n]=null;
- 清空一个select对象。
方法一：
var length=someSelect.length;
for(var i=0;i<length;i++){
someSelect.options[0]=null;
}
方法二：
someSelect.length=0;
或者
someSelect.options.length=0;
- 替换一个选项
someSelect.options[1]=new Option("value","Text");
KeyWord：Ajax,征服Ajax,征服AjaxWeb2.0开发技术详解,Ajax教程,Ajax图书,Ajax学习,学习Ajax
前几天也一直在看，不是我的书（书非借不能读也？？？），所以看得不是特别仔细，明天别人要拿走，所以，记下一些比较生疏的名词，详细的资料自己去查、去看好了。
