JavaScript事件

事件举例

1.onmouseout和onmouseover

//鼠标经过“World”，鼠标移出“Hello”
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
    function onOver(ooj){
        ooj.innerHTML="Hello";
    }
    function onOut(ooj){
        ooj.innerHTML="World";
    }
</script>

2.文本框内容改变

<form>
    <input type="text" onchange="changeDemo(this)">
</form>
<script>
    function changeDemo(bg){
        alert("内容改变");
    }   
</script>

//或直接写
<form>
    <input type="text" onchange="alert('内容改变')">
</form>

3.文本框选中

<form>
    <input type="text" onselect="changeDemo(this)">
</form>
<script>
    function changeDemo(bg){
        bg.style.background="red";
    }   
</script>

事件流

1.事件流：描述页面接受事件的顺序
2.事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素（文档）
3.事件捕获：最不具体的结点先接收文件，而最具体的结点是最后接收事件

事件处理

1.HTML事件处理
缺点：修改繁琐

<div id="div">
    <button id="btn" onclick="demo()">按钮</button>
</div>
<script>
    function demo(){
        alert("hello world");
    }   
</script>

2.DOM0级事件处理
缺点：事件会被覆盖

<div id="div">
    <button id="btn" onclick="demo()">按钮</button>
</div>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(){alert("Hello world1")};//会被覆盖
    btn.onclick=function(){alert("Hello world2")};
    btn.onclick=null;//清除当前事件   
</script>

3.DOM2级事件处理
addEventListener(“事件名”、“事件处理函数”、“布尔值”)
true（事件捕获）
false（事件冒泡）
特点：不会被覆盖，处理方便，书写复杂

<div id="div">
    <button id="btn" onclick="demo()">按钮</button>
</div>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("click",demo);
    btn.addEventListener("click",bye);//不会覆盖，依次处理
    btn.removeEventListener("click",bye);//移除
    function demo(){
        alert("hello world");
    }
    function bye(){
        alert("good bye");
    }
</script>

4.IE事件处理（IE8及以下）
attachEvent
detachEvent
兼容IE8及以下浏览器

<div id="div">
    <button id="btn" onclick="demo()">按钮</button>
</div>
<script>
    var btn=document.getElementById("btn");
    if(btn.addEventListener){
        btn.addEventListener("click",demo);
    }else if(btn.attachEvent){
        btn.attachEvent("onclick",demo);
    }else{
        btn.onclick=demo();
    }

    function demo(){
        alert("hello");
    }
</script>

事件对象

事件对象event：
1.type：获取事件类型
2.target：获取事件目标
3.stopPropagation():阻止事件冒泡
4.preventDefault()：阻止事件默认行为

<div id="div">
    <button id="btn" onclick="demo()">按钮</button>
    <a href="http://www.baidu.com" id="aid">百度一下</a>
</div>
<script>
    document.getElementById("btn").addEventListener("click",showType);
    document.getElementById("div").addEventListener("click",showDiv);
    document.getElementById("aid").addEventListener("click",showA);

    function showType(event){
        alert(event.type);//"click"类型
        event.stopPropagation();//阻止div事件冒泡
    }

    function showDiv(){
        alert("div");
    }//会出现事件的冒泡

   function showA(event){
        event.stopPropagation();
        event.preventDefault();//阻止默认事件执行
    }
</script>