学习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) {//方法的第一个参数是event

        event.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){ } //函数的第一个形参

巴特西