js事件模型

一、事件流：

        事件流意味着页面上不止一个元素可响应相同的事件。

        如：当我们点击页面上的按钮时，实际上我们是点击了按钮，以及按钮的容器——整个页面。

        不同的浏览器有不同实现事件流的方法。

               1， 事件冒泡 (IE) 。

               2， 事件捕获 (NetsCape) 。

               3， DOM 事件流 (FireFox) 。事件处理

二、事件处理程序：

   1、传统事件处理程序指派方法：

         一、取得id = div1的元素节点。

                var div1 = document.getElementById("div1");

                //设置元素节点的onclick属性

                div1.onclick =function(){alert("div1 被点了");}

                或

                function divClick(){alert(‘点中’);}

                div1.οnclick=divClick;

                注意：

                        1、绑定事件处理程序时，后面不能加括号

                        2.必须确保在元素之后设置事件处理程序。

                        3.可在window.onload中指定处理程序。

         二、在事件属性中指定

                <div id="div1" onclick="alert("div1 被点了.");" ></div>

   2、现代事件处理程序指派方法：

        一、IE浏览器

                var div1 = document.getElementById("div1");

                //添加事件处理程序

                div1.attachEvent("onclick",click1);

                //删除事件处理程序

                div1.detachEvent("onclick",click1);

                function click1(){

                  alert("div1is click...");

                }

                提示：可以在一个事件上添加多个事件处理函数。

        二、DOM

                var div1 = document.getElementById("div1");

                //添加事件处理程序,true:捕获阶段; false:冒泡阶段

                div1.addEventListener("click",click1,false);

                //删除事件处理程序

                div1.removeEventListener("click",click1,false);

                function click1(){

                  alert("div1is click...");

                }

                提示：删除事件处理程序时，阶段要相同。

                传统事件处理程序是在冒泡阶段添加的。

三、事件类型：

        一、鼠标事件

                1， 常见事件

                        – click

                        – dbclick

                        – mousedown

                        – mouseout

                        – mouseover

                        – mouseup

                        – mousemove
                2， 页面上所有元素均支持鼠标事件。

                3，事件发生顺序

                        – 单击： mousedown,mouseup,click

                        – 双击： mousedown,mouseup,click,mousedown,mouseup,click,doubleclick

        二、 键盘事件：

                1， 常见事件

                        – keydown

                        – keypress

                        – keyup
                2， 通常在输入框上实现键盘事件。

                3， 返回 false 表示不响应该事件
                4， 事件发生顺序

                        – 字符键： keydown,keypress,keyup

                        – 非字符键： keydown,keyup
        三、HTML事件：

                1， 常见事件

                        – load,unload

                        – abort,error

                        – select

                        – change

                        – submit

                        – reset

                        – resize

                        – scroll

                        – focus

                        – blur