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{

            width: 100px;

            height: 100px;

            background: red;

        }

        .blue{

            width: 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>

相关文章