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

目录

1、常用的事件：

2、绑定事件方式：

3、取消事件冒泡：

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

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

---

1、常用的事件：

① onload：页面加载

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

③ onclick：点击

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

⑤ onchange：内容改变

⑥ onsubmit：表单提交

2、绑定事件方式：

（1）行内绑定：

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

（2）动态绑定（用于结构+样式+行为分离的页面）：【特点：程序中的this指向的是当前的对象】

前提是进行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){ } //函数的第一个形参