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>