dom事件与event对象总结

1 事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。
tips:js和xhtml的交互是通过当用户或浏览器操作网页时发生的事件来处理的。

1.1 事件流：即事件的顺序。
       事件冒泡：事件从事件发生的目标最内部开始触发，向上触发到最外部（document对象）。
       事件捕获：事件捕获正好与冒泡相反。它的事件触发顺序是从最外层的对象（document对象）到最里层的对象。
       DOM事件流：dom同时支持事件捕获和事件冒泡，但事件捕获先发生。
   1.2 事件处理程序/监听器
       定义：为响应一个事件而被调用的函数称为事件处理程序（DOM中叫事件监听器）。
       两种指派方式：1.传统事件处理程序指派方法。（DOM0）     2.现代事件处理程序指派方法。
       1.传统事件处理程序指派方法。（DOM0）：为一个事件指派一个事件处理程序。
           1）在js中指定事件处理程序。
       eg：
              var odiv = document.getElementById("div1");
              odiv.onclick = function(){
           alert("我被点击了")；           //事件处理程序的名称必须全部小写。
           }
            tips：1.事件处理程序的名称必须全部小写。
       2.在绑定事件处理程序到事件属性时，只能引用函数的名称，后面不能加括号。若加括号则表示立即执行函数。
       3.不管函数是如何定义的，必须确保在XHTML元素被添加到DOM之前。登记事件处理程序。即js写到后面，保证节点已经加载定义了。

2.现代事件处理程序指派方法。：为一个事件指派多个事件处理程序。   //有兼容性问题。
                1）IE浏览器
       attachEvent（）用于将一个事件处理程序绑定到一个事件。
       detachEvent（）用于解除事件处理程序的绑定。

[object].attachEvent（“事件处理程序的名称”，函数）
       [object].detachEvent（“事件处理程序的名称”，函数）
                2）DOM         //即是DOM2
       DOM中使用addEventListener()和removeEvenList() 方法完成事件处理程序指派和删除的任务。
           有三个参数   事件的名称，要指派的函数，是否处理程序要用在冒泡或捕获阶段。
       第三个参数为true，用在捕获阶段，是则false用在冒泡阶段。
       [object].addEventListener(“事件名称”，函数名，bCapture)
       [object].removeEvenList()(“事件名称”，函数名，bCapture)

       ****(重要)兼容性问题的解决：
       if（document.addEventListener）{           //DOM
           odiv.addEventListener("click",fnclick1,true);
           }
       else if（document.attachEvent）｛           //IE
           odiv.attachEvent（"onclick",fnclick1）
           ｝

2 Event对象
   tips：Event 对象代表事件的状态。
       比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
       事件通常与函数结合使用，函数不会在事件发生前被执行！
   2.1 定位：
       1.ie中：event对象是window对象的一个属性。
       必须如下执行：
               odiv.onclick = function()｛
           var oevent =window.event;
       ｝
       2.DOM中：event对象只能作为仅有的参数传给事件处理程序。
       必须如下执行：
             odiv.onclick = function (oEvent)｛｝；
   2.2 属性和方法
       1）ie中event属性和方法：
       2）dom中event属性和方法：

3 事件类型：
   1.鼠标事件：click    dbclick   mousedown   mouseout       mouseover   mouseup       mousemove
   2.键盘事件：keydown   keypress       keyup
   3.HTML事件：load    unload   change   scroll   focus   blur

巴特西

dom事件与event对象总结

最新文章

热门文章