DOM 事件

onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。

<body onload="viewWillAppear()" onunload="viewWillDisAppear()">

<script>
    function viewWillAppear(){
        document.getElementById("h1").innerHTML = "页面加载完成"
    }
    function viewWillDisAppear(){

    }
</script>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

<p id="onmouseTest", onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移动上来</p>

//鼠标移动到画布上
function mOver(obj) {
    obj.innerHTML = "鼠标移动到画布上"
}
//鼠标离开画布
function mOut(obj) {
    obj.innerHTML = "鼠标离开画布"
}

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

<p id="onmouseTest2", onmousedown="onDown(this)" onmouseup="onUp(this)">不要点我</p>

//鼠标点击了画布
function onDown(obj){
    obj.innerHTML = "块松开我..."
}
//鼠标松开了画布
function onUp(obj){
    obj.innerHTML = "算你识相..."
}

onfocus和onfocusout

<input type="text" id="tF" onfocus="onFirsResponder(this)" onfocusout="onFirsResponderOut(this)"  onchange="inputTextChange()">

//获取焦点
function onFirsResponder(obj){
    obj.style.background = "yellow"
}
//离开焦点
function onFirsResponderOut(obj){
    obj.style.background = "red"
}

事件监听程序

addEventListener() 方法

<p id="onClickListener">点击我,会通知你该运动了</p>

//添加通知
document.getElementById("onClickListener").addEventListener("click",function (){
    document.getElementById("onClickListener").innerHTML = "赶紧滚出去运动"
});

如果通知需要传值：

/如果通知要传参
document.getElementById("onClickListener").addEventListener("click", function() {
    myFunction(6, 5);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("h1").innerHTML = result;
}

事件冒泡还是事件捕获？

这里特别重要

在 HTML Dom 中有两种事件传播的方法：冒泡和捕获

事件传播是一种定义当发生事件时元素次序的方法。假如 < div> 元素内有一个 < p>, 然后用户点击了这个 < p> 元素，应该首先处理哪个元素 ‘click’事件？冒泡：从内向外捕获：从外向内

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);

默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

示例

<style>
    #myDiv1, #myDiv2 {
        background-color: coral;
        padding: 50px;
    }

    #myP1, #myP2 {
        background-color: white;
        font-size: 20px;
        border: 1px solid;
        padding: 20px;
    }
</style>

<div id="myDiv1">
    <h2>Bubbling:</h2>
    <p id="myP1">myP1</p>
</div><br>

<div id="myDiv2">
    <h2>Capturing:</h2>
    <p id="myP2">myP2</p>
</div>

<script>
    document.getElementById("myP1").addEventListener("click", function() {
        alert("myP1");
    }, false);

    document.getElementById("myDiv1").addEventListener("click", function() {
        alert("myDiv1");
    }, false);

    document.getElementById("myP2").addEventListener("click", function() {
        alert("myP2");
    }, true);

    document.getElementById("myDiv2").addEventListener("click", function() {
        alert("myDiv2");
    }, true);
</script>

亲自试一试

表格中的数字规定了完全支持这些方法的首个浏览器版本。

方法	Chrome	IE	Firefox	Safari	Opera
addEventListener()	1.0	9.0	1.0	1.0	7.0
removeEventListener()	1.0	9.0	1.0	1.0	7.0

注释：IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不过，对于这些特殊的浏览器版本，您可以使用 attachEvent() 方法向元素添加事件处理程序，并由 detachEvent() 方法删除：

element.attachEvent(event, function);
element.detachEvent(event, function);

实例

跨浏览器解决方案：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 针对主流浏览器，除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 针对 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

JavaScript HTML DOM 事件&事件监听程序