js 事件

事件：一般用于浏览器与用户操作进行交互

js事件的三种模型：内联模型、脚本模型、DOM2模型

　　内联模型：事件处理函数是HTML标签的属性

脚本模型：事件处理函数谢谢脚本中从而达到层次分离的原则

document.onclick=function(){ //处理逻辑 }

DOM2模型：

一、如何获得事件函数

　　function testEvt(){
　　　　var len=arguments.length;//获得参数个数
　　　　//实际上我们并没有传参 len=1 是应为在事件处理函数中，浏览器会默认传递一个参数这个参数是事件对象(event)
　　　　var arg=arguments[0];//获得这个事件对象event
　　}

　　//获得事件对象的兼容写法（参数evt也可以写成event）
　　function getEvt(evt){
　　　　var e=evt || window.event;// window.event IE的规范
　　　　return e;
　　}

二、事件切换机制

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件切换机制demo</title>
    <style type="text/css">
        .red{
             100px;
            height: 100px;
            background: red;
        }
        .blue{
             100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var div=document.getElementById("div");
            div.onclick=onBlue;//1、把onBlue函数付给当前事件 this：是当前点击的对象
            /*
            div.onclick=function(){ //通过匿名函数执行的事件 this：是window
                alert(this);
            }
            */
        }
        function onRed(){
            this.className="red";
            this.onclick=onBlue;//3、把onBlue函数赋给当前事件
        }
        function onBlue(){
            this.className="blue";
            this.onclick=onRed;//2、把onRed函数赋给当前事件
        }
    </script>
</head>
<body>
    <div id="div" class="red">事件切换</div>
</body>
</html>

View Code