4

一.基本概念:事件流是什么?有哪些事件流?

事件流描述页面接收事件的顺序

具体的有 事件冒泡 事件捕获 DOM事件流

事件冒泡又叫IE的事件流,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。

事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。

DOM2级事件流规定的事件流包括三个阶段事件捕获阶段处于目标阶段冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应。以简单的HTML页面为例,单击

<

div>元素会按照下图顺序触发事件

二.浏览器支持的情况

IE8及更早的版本不支持DOM事件流

三.事件和事件处理程序的区别?

事件是用户或浏览器执行的动作,如 click
事件处理程序是响应某个事件的函数:如 onclick();也称为事件侦听器

四.事件处理程序分为哪几类?

1.html事件处理程序
2.DOM0级事件处理程序
3.DOM2级事件处理程序
4.IE事件处理程序
5.跨浏览器事件处理程序

html事件处理程序优点:简单,方便 缺点:javascript和html紧密耦合,不方便维护和修改
DOM0级事件处理程序:函数式编程,支持IE8以下
DOM2级事件处理程序:用addEventListener() 可以添加多个事件处理函数,即多个hander()

        <body>
        <button onclick="html_event();">html event处理程序</button>
        <button id="btn_dom0">DOM0 events</button>
        <button id="btn_dom2">DOM2 events</button>
        <script type="text/javascript">

//html event处理程序
        function html_event(){
            alert("this a html event处理程序");
        }
            function g(id){
            return  document.getElementById(id);
            }

    //DOM0 events处理程序
            var btn_dom0=g("btn_dom0");
            btn_dom0.onclick= function(){
                alert("DOM0 events处理程序!");
            }

    //this is a DOM2 event!
            var btn_dom2=g("btn_dom2");
            function hander(){
                alert("this is a DOM2 event!");
            }
            btn_dom2.addEventListener("click",hander,false);
            //三个参数分别是,
            //事件:click,
            //处理函数hander(),
            //false表示在事件冒泡中调用处理hander()函数,ture表示在事件捕获阶段调用
            </script>

pomelo
773 声望25 粉丝

一只程序猿的自我修养