JavaScript总结（三）

如何执行代码语句？

　　使用函数，函数是一组可以随时随地运行的语句，它们是JavaScript的核心。函数是由关键字function、函数名加一组参数以及置于括号中要执行的代码声明的。语法如下：

Function 函数名(参数1，参数2){
    语句;
    return 返回值; // 可有返回值，也可以没有返回值！
    // 没有返回值或者没有return语句，接收的值为undefined；
    // 不执行return语句后面的代码；
}

JavaScript和(X)HTML是如何进行交互的？

　　JavaScript与(X)HTML的交互是通过当用户或者浏览器操作网页时发生的事件来处理的。

✍ 事件冒泡：

　　➣ 什么是事件冒泡？

　　　　在一个对象上触发某类事件，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的祖先级对象传播，一层一层向上传播，直至它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

　　➣ 如果想阻止冒泡事件该怎么做？

　　　　事件对象提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。

　　　　jquery中对冒泡和默认行为的阻止方法同样也可以改写，改写后能够达到同样的效果

event.preventDefault();  改写为：  return false;
event.stopPropagation();  改写为：  return false;

（事件冒泡为默认，只是想阻止冒泡则需要执行命令行即可）

✍ 事件捕获：

　　事件捕获与冒泡正好相反，它的事件触发顺序是从最外层的对象(document对象)到最里层的对象。事件捕获也可以window级事件，但是需要开发者显式指定。(有人也将这个事件称为下降事件模型，因为它是从DOM层次的顶部下降到底部。)

✍ DOM事件流：

　　DOM同时支持事件捕获和时间冒泡，但是时间捕获先发生。两个事件流可以遍历DOM中的所有的对象，起点和结束为document对象（很多标准兼容的浏览器可以一直捕获/冒泡到window对象）。

✍ 事件句柄：

　　HTML4.0的新特性之一是有能力使HTML事件触发浏览器中的动作（action），比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表，这些属性可插入HTML标签来定义事件动作。JavaScript中有哪些具体的事件呢？具体如下表（摘自W3Cschool手册）：

属性	当以下情况发生时，出现此事件
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

✍ 事件处理程序/监听器：

　　事件是被用户或者浏览器执行的某种行为。这些事件被命名为click、load和mouseover等等。为响应一个事件，而被调用的函数称为事件处理程序（DOM中叫做事件监听器）。响应click事件的函数称为onclick事件处理程序。事件处理程序的指派方式有两种方式：

　　➣ 传统事件处理程序指派方法：

这种方法可以为一个事件指派一个事件处理程序，它被所有的现代浏览器所支持；

　　➣ 现代事件处理程序指派方法：

这种方法可以为一个事件指派多个事件处理程序，只被现代的浏览器支持，而且存在浏览器兼容问题；

✍ 传统事件处理程序指派方法：

　　传统的事件处理程序指派方法采用两种方式之一将事件处理指派给事件：在JavaScript中或者HTML中；

✍ 现代事件处理程序指派方法：

　　IE和DOM中提供了更高级的方法，可以为每个事件指派多个事件处理程序。

　　➣ IE浏览器：在IE中，每个元素和window对象有两个方法attachEvent()和detachEvent()。attachEvent()用于将一个事件处理程序绑定到一个事件，而 detachEvent()用于解除事件处理程序的绑定。这两个方法都有两个参数：要指派的事件处理的程序的名称、函数名称。

　　➣ DOM：DOM中使用addEventListener()和removeEventListener()方法完成事件处理程序指派和删除的任务。这两个方法有三个参数，分别是事件的名称、要指派的函数、是否处理程序要用在冒泡或捕获阶段（如果处理程序要用在捕获阶段，值为true；如果要用在冒泡阶段，值为false）。

　　➣ 兼容性问题：因为IE和DOM下对于现代事件处理程序指派的方式不同，为了保证我们编写的代码在IE和DOM浏览器系列下都能用，我们就要在操作时判断该浏览器是IE还是DOM，之后在执行对应的操作。例如：

if(document.addEventListener){
    //执行DOM的事件指派或删除
}else if(document.attachEvent){
    //执行IE的事件指派或删除
}

✍ 事件处理程序的返回值：

事件处理程序	返回false的效果
click	单选按钮/复选框按钮	取消设置
	sumbit按钮	表单提交被取消
	reset按钮	表单不被重置
	链接	不装载连接目标
dragdrop	取消拖拽
keydown	在用户按住下键时，取消随后的keypress事件
keypress	取消keypress事件
mouseover	导致对window的status或defaultStatus属性的改变被浏览器忽略
mousedown	取消默认行为（拖的开始，现在的开始，接触连接）

✍ Event对象：

　　➣ 什么是Event对象？

　　　　Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

　　➣ 获取Event对象：

function(event){
    // 传入参数event对象；
    // 如果是IE浏览器是则获得window.evetn;
    // 如果是DOM浏览器是则获得传入的参数event对象；
    var e = window.event||event;
}

➣ 2 级 DOM 事件标准定义的属性：。

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作
currentTarget	返回其事件监听器触发该事件的元素
eventPhase	返回事件传播的当前阶段
target	返回触发此事件的元素（事件的目标节点）
timeStamp	返回事件生成的日期和时间
type	返回当前 Event 对象表示的事件的名称

➣ 不同点（详情请查看W3Cschool，版本不同兼容不同）：

不同点	IE	DOM
获取目标	.srcElement	.target
获取字符码	.keyCode	.charCode以及.keyCode
阻止事件的默认行为	.returnValue = false	.preventDefault()
中止事件传播(冒泡)	.cancelBubble = true	.stopPropagation()

✍ 事件类型：

根据触发事件的对象以及事件触发的行为，浏览器中发生的事件可以分组成几个特定的类型，DOM规范中定义了如下几个事件组：

➣ 鼠标事件——用户使用鼠标执行某个任务时触发鼠标事件。

➣ 键盘事件——用户使用键盘触发键盘事件。

➣ HTML事件——当浏览器窗口或特定的客户机服务器交互发生改变事触发HTML事件。

✍ 鼠标事件:

　　➣ 鼠标事件是web上最常用的事件组。它包括：

click	用户点击鼠标左键，以及当焦点在一个按钮上，用户按Enter键时，发生click事件
dblclick	当用户双击鼠标左键时，发生dblclick事件
mousedown	当用户按下任何鼠标按钮时，发生mousedown事件
mouseout	当光标在一个元素上，并且用户将其移除元素边界时，发生mouseout事件
mouseover	当光标在一个元素之外，并且用户将其移动到该元素上时，发生mouseover事件
mouseup	放用户释放任何鼠标按钮时，发生mouseup事件
mousemove	当光标在一个元素上移动时，重复发生mousemove事件

　　➣ 事件属性：

　　　　获取鼠标坐标：clientX和clientY；

　　　　type属性：获取鼠标事件；

　　　　button属性：获取鼠标按键；

✍ 键盘事件：

　　键盘事件在用户使用键盘时发生。它包括：

keydown	当用户在键盘上按下一个键时发生；按住不放则重复发生
keypress	当用户在键盘上按下一个字符键（不包括shift和alt键）时发生；按住不放则重复发生
keyup	当用户释放一个按下的键时发生

✍ HTML事件：

load	在窗口中，当页面被全部加载时，触发load事件
	在框架集中，当所有的框架被全部装载时，触发load事件；
	在img元素中，当图片被全部加载时，触发load事件
	在object元素中，当对象被全部加载时，触发load事件
unload	在窗口中，当页面被全部卸载时，触发unload事件
	在框架集中，当所有的框架被全部卸载时，触发unload事件
	在object元素中，当对象被全部卸载时，触发unload事件
abort	在object元素中，当用户中止装载进程之前，如果它还没有被完全加载，触发abort事件
error	在窗口中，当一个JavaScript错误发生时，触发error事件
	在img元素中，如果指定的图形不能被装载，触发error事件
	在object元素中，如果对象不能被装载，触发error事件
	在框架集中，如果一到多个框架不能被装载，触发error事件
select	在一个文本框（input和textarea元素）中，当用户选择一到多个字符时，触发select事件
change	在一个文本框（input和textarea元素）中，当它失去焦点，并且其值被改变，触发change事件
	在select元素中，当他它的值改变时，触发change事件
submit	当表单的提交按钮被点击时，触发submit事件
reset	当表单的重置按钮被点击时，触发reset事件
resize	当窗口或者框架尺寸被调整时，触发resize事件
scroll	当有用户滚动有滚动条的任何元素时，触发scroll事件
focus	当任何元素或者窗口获得焦点时，触发focus事件
blur	当任何元素或者窗口失去焦点时，触发blur事件