javascript 事件编程之事件（流，处理，对象，类型）

1. 事件处理

1.1. 绑定事件方式

1）行内绑定

语法： //最常用的使用方式

<元素事件=”事件处理程序”>

2）动态绑定

//结构+样式+行为分离的页面（html+css+js事件）

语法：

对象.事件=事件处理程序

行内绑定和动态绑定的重要区别：

以上程序是不可用的，点击div时，执行test函数，这时，test中的this表示window对象

因为：

我们定义test函数，实际上相应于在window对象下定义了test属性

test(); —> 相当于 window.test();

所以test函数在执行时，里面的this指向window

“谁”调用了函数，this指向“谁”



 <html>

    <head>

        <script>

            window.onload=function(){

                document.getElementById('btnok').onclick=function(){

                    alert('hello');

                };

                //2、动态绑定

                document.getElementById('div1').onclick=test;

            };

        </script>

    </head>

    <body>

            <input type='button' id='btnok' value='确定'>

            <script>

                function test(){

                    this.style.color='red';

                }

            </script>

            <div id='div1'>javascript</div>

    </body>

</html>

以上程序是可用的，对象.onclick 在执行test函数时，test函数指向div1元素

1.2 事件监听

我们能不能为一个dom对象的同一个事件指定多个事件处理程序？

例1：通过这题，我们发现，如果为一个对象的同一个事件指定多个事件处理程序，那么，后面指定的程序会覆盖前面的。

<body>

    <script>

        function fn1(){

            alert('first');

        }

        function fn2(){

            alert('second');

        }

        window.onload=function(){

            document.getElementById('div1').onclick=fn1;

            document.getElementById('div1').onclick=fn2;

        };

    </script>

    <div id='div1'>test</div>

 </body>

如果我们想为一个对象的某个事件指定多个事件处理，可以考虑使用事件监听。

事件监听语法：

IE：

    attachEvent(type,callback)

        type：事件名  如：onclick、onsubmit、onchange等

        callback：事件处理程序

基于W3C模型：

    addEventListener(type,callback,capture)

        Type：事件名 ，没有“on”前缀  如：click、submit、change

        Callback：事件处理程序

        Capture：事件模型 （可选参数）   （冒泡模型、捕捉模型） true：捕捉模型

                                                         false：冒泡模型 （默认值）

代码示例：

<body>

    <script>

        function fn1(){

            alert('first');

        }

        function fn2(){

            alert('second');

        }

        window.onload=function(){

            document.getElementById('div1').attachEvent('onclick',fn1);

            document.getElementById('div1').attachEvent('onclick',fn2);

        };

    </script>

    <div id='div1'>test</div>

 </body>

W3c：

<body>

    <script>

        function fn1(){

            alert('first');

        }

        function fn2(){

            alert('second');

        }

        window.onload=function(){

            document.getElementById('div1').addEventListener('click',fn1);

            document.getElementById('div1').addEventListener('click',fn2);

        };

    </script>

    <div id='div1'>test</div>

 </body>

总结：

IE和W3C事件监听的不同：

监听方法不同：IE attachEvent 、W3C addEventListener
监听参数不同：IE 没有模型参数、W3C有模型参数
触发顺序：IE 8及以下的浏览器触发时是先绑定、后触发 W3C浏览器是先绑定、先触发
事件名称不同：IE事件需要”on”前缀，W3C不需要’on’前缀

解决事件监听的兼容性问题：

2. 事件流

2.1 事件模型

事件模型（事件的触发顺序）分为两种：Body嵌套div1，div1嵌套div2，div2嵌套div3

1）冒泡模型

2）捕捉模型

目前，IE只支持冒泡模型

冒泡模型

事件冒泡是指事件响应时会上水冒一样上升至最顶级元素

<div>

    <div>

        <div>click</div>

    </div>

<div>

  <style>

    #div1{width:400px;height:400px;background:red}

    #div2{width:300px;height:300px;background:green}

    #div3{width:200px;height:200px;background:blue}

  </style>

 </head>

 <body>

    <script language='javascript' src='public.js'></script>

    <script>

        window.onload=function(){

            document.getElementById('div1').onclick=function(){

                alert('div1');

            };

            document.getElementById('div2').onclick=function(event){

                alert('div2');

                stopBubble(event);

            };

            document.getElementById('div3').onclick=function(){

                alert('div3');

            };

        };

    </script>

    <div id='div1'>

        <div id='div2'>

            <div id='div3'>

            </div>

        </div>

    </div>

 </body>

大多数情况下，程序需要对事件冒泡进行取消?

取消事件冒泡

IE：

window.event.cancelBubble=true;

W3C：

function(event){

    event.stopPropagation();

}

解决兼容性问题： public.js

3. 事件对象

1）什么是事件对象

事件对象就是事件发生时系统自动产生的对象，这个对象包含了这个事件发生时所有的信息

如：鼠标移动，那么，鼠标所在的横、纵坐标就保存到了这个事件对象中

2）如何获得事件对象

IE9及以上版本、W3C：

function(event){}

IE8及以下：

window.event

默认行为

有些html元素，有自己的行为，如，提交按钮、超链接

有些时候，我们需要对默认行为进行取消，如表单按钮点击时，用户资料添写不完整，我们这时需要将按钮的默认行为取消。

代码示例：

解决兼容性：

-4. 事件类型

Web 浏览器中可能发生的事件有很多类型，常用的事件流

onLoad ：页面加载完毕后一般用于body元素
onUnload ：页面关闭后一般用于body元素
onBlur ：失去焦点
onFocus ：获得焦点
onClick ：点击
onMouseOver ：当鼠标经过时
onMouseOut ：当鼠标离开时
onMouseDown ：当鼠标按下时
onMouseUp ：当鼠标抬起时
onMouseMove ：当鼠标移动时
onChange ：当内容改变时
onSelect ：当内容被选中时
onkeypress ：当键盘点击时
onkeydown ：当键盘按下时
onkeyup ：当键盘抬起时
- 触发顺序：onkeydown、onkeypress、onkeyup
- Onkeypress事件无法捕获功能键
onSubmit ：当表单提交时
onReset ：当表单重置时
1. 事件委托（事件代理）

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事

件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到document 层次。也就

是说，我们可以为整个页面指定一个onclick 事件处理程序，而不必给每个可单击的元素分别添加事

件处理程序。以下面的HTML 代码为例。

<ul id="myLinks">

<li id="goSomewhere">Go somewhere</li>

<li id="doSomething">Do something</li>

<li id="sayHi">Say hi</li>

</ul>

其中包含3 个被单击后会执行操作的列表项。按照传统的做法，需要像下面这样为它们添加3 个事

件处理程序。

var item1 = document.getElementById("goSomewhere");

var item2 = document.getElementById("doSomething");

var item3 = document.getElementById("sayHi");

EventUtil.addHandler(item1, "click", function(event){

    location.href = "http://www.wrox.com";

});

EventUtil.addHandler(item2, "click", function(event){

    document.title = "I changed the document's title";

});

EventUtil.addHandler(item3, "click", function(event){

    alert("hi");

});

如果在一个复杂的Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM 树中尽量最高的层次上添加一个事件处理程序，如下面的例子所示。

var list = document.getElementById("myLinks");

EventUtil.addHandler(list, "click", function(event){

    event = EventUtil.getEvent(event);

    var target = EventUtil.getTarget(event);

    switch(target.id){

        case "doSomething":

            document.title = "I changed the document's title";

            break;

        case "goSomewhere":

            location.href = "http://www.wrox.com";

            break;

        case "sayHi":

            alert("hi");

            break;

    }

});

如果可行的话，也可以考虑为document 对象添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。