学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象

1、常用的事件：

① onload：页面加载

② onblur：失去焦点 onfocus：获取焦点

③ onclick：点击

④ onmouseover：鼠标经过 onmouseout：鼠标离开

⑤ onchange：内容改变

⑥ onsubmit：表单提交

2、绑定事件方式：

（1）行内绑定：

<元素 事件="事件处理程序(函数)"><script>function 函数名(){console.log(this); //行内绑定的this是指向window}</script>

（2）动态绑定（用于结构+样式+行为分离的页面）：

前提是进行window.load的初始化，在初始化过程中将事件绑定到元素（标签）上

语法：对象.事件 = 事件处理程序

<button id="btn" >按钮</button>//js文件：通过window.onload 进行初始化，在初始化的过程中将事件动态绑定到元素上window.onload = function (){document.getElementById("btn").onclick = function (){console.log(this);}}

（3）事件监听（为一个对象绑定多个事件处理程序）

① ie： attachEvent(type, callback)type:事件名，例如 onclick、onsubmit、onchange等callback：事件处理程序(函数)② 基于w3c模式：attachEventListener(type, callback, [capture])type:事件名,(没有前缀on)例如 click、submit、change等callback：事件处理程序(函数)capture：可选，事件模型（为true是捕捉模式，false是冒泡模式）

//进行ie或w3c的判断function addEvent(obj, type, callback){if(window.attachEvent){obj.attachEvent(\'on\' + type, callback);}else {obj.addEventListener(type, callback);}}

3、取消事件冒泡：

① ie: window.event.cancelBubble = true;② w3c: function(event) {//方法的第一个参数是eventevent.stopPropagation();}//进行ie或w3c的判断function stopBubble(event){if(window.event){window.event.cancelBubble = true;}else{event.stopPropagation();}}

4、取消默认行为（例如：提交按钮、超链接）

有些情况需要取消掉默认行为，例如资料填写不完整，将提交按钮的提交行为进行取消

//方法一：return false取消<form method="get" action="#" onsubmit="return false"> //取消表单提交

//方法二：ie：window.event.returnValue = false;//       w3c： event.preventDefault();<form method="get" action="#" ><input type="text" name="name" id="name"/><input type="submit" value="提交" id="submit"/></form><script>window.onload = function (){document.getElementById(\'submit\').onclick = function (event) {if(document.getElementById(\'name\').value===\'\'){if(window.event){window.event.returnValue = false;   //ie}else{event.preventDefault();	       //w3c}}}}</script>

5、事件对象（事件发生时产生的对象，该对象包含了该事件的所有信息）

■ 获取事件对象:

① ie8 ：window.event

② ie9、w3c： function(event) //函数的第一个形参