jacascript 事件流【分分快三计划】

作者:分分快三计划
var btn = document.getElementById("myBtn");
var handler = function() {
    alert(this.id);
};

btn.addEventListener("click", handler, false);
// 
btn.removeEventListener("click", handler, false);

DOM2级事件管理程序

  DOM2级事件管理程序定义了七个主意用于拍卖钦命和删除事件管理程序的操作:add伊芙ntListener(卡塔尔(قطر‎和 removeEventListener(卡塔尔(英语:State of Qatar)。IE8及以下浏览器不帮衬DOM2级事件管理程序。

  使用DOM2级事件管理程序的补益是可以增加多少个事件管理程序,并遵从他们增多的逐条触发;

        <div id="box" style="height:200px;width:200px;background-color:pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.addEventListener('click',function(){
                this.innerHTML  = '使用DOM2级事件处理程序的好处是可以添加多个事件处理程序<br/>';
            });
            oBox.addEventListener('click',function(){
                this.innerHTML  = '并按照他们添加的顺序触发,第三个参数默认为false,所以是事件冒泡的顺序';
            });
        </script>  

 

  全体DOM节点中都包括那七个方式,並且它们都接收3个参数:要管理的风浪名、作为事件管理程序的函数和三个布尔值。

  最后的布尔值参数假如是 true,表示在破获阶段调用事件管理程序;假若是 false,表示在冒泡阶段调用事件管理程序。若最后的布尔值不填写,则默感觉false。

        <div id="box" style="height:200px;width:200px;background-color:pink;">
            <div id="child" style="height: 100px;width: 100px;background-color: green;"></div>
        </div>
        <script>
            var oBox = document.getElementById('box');
            var oChild = document.getElementById('child');
            oBox.addEventListener('click',function(){
                console.log('事件捕获顺序 先oBox');
            },true);
            oChild.addEventListener('click',function(){
                console.log('事件捕获顺序 后oChild');
            },true);
        </script> 

  若最终的布尔值不填写,则和 false 效果同样。

        <script>
            var oBox = document.getElementById('box');
            var oChild = document.getElementById('child');
            oBox.addEventListener('click',function(){
                console.log('事件冒泡顺序 后oBox');
            });
            oChild.addEventListener('click',function(){
                console.log('事件冒泡顺序 先oChild');
            });
        </script>

 

  通过 add伊夫ntListener(卡塔尔国 增多的事件管理程序只好接纳removeEventListener(卡塔尔(قطر‎来移除,移除时传出的参数与增加管理程序时采纳的参数相符。addEventListener()增多的佚名函数将不可能移除;

        <div id="box" style="height:200px;width:200px;background-color:pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.addEventListener("click",function(){
                this.innerHTML  = 'removeEventListener()无法移除匿名函数';
            },false);
            oBox.removeEventListener('click',function(){
                this.innerHTML  = 'removeEventListener()无法移除匿名函数';
            },false);    
        </script>

 

JavaScript和HTML的互相是透过事件达成的。JavaScript接纳异步事件驱动编制程序模型,当文书档案、浏览器、成分或与之相关对象产生一定事情时,浏览器会生出事件。

       进而使得 事件流重要分为二种:事件冒泡和事件捕获。

IE事件处理程序

  IE完成了与DOM中好像的多个主意:attachEvent(卡塔尔国 和 detach伊芙nt(卡塔尔(قطر‎。那七个章程采用平等的五个参数:事件管理程序名称与事件管理程序函数。由于IE8及以下浏览器只扶助事件冒泡,所以通过 attachEvent(卡塔尔国 增加的事件管理程序都会被增添到事件冒泡阶段;

  attach伊夫nt(卡塔尔 方法的率先个参数是"onclick",而非DOM的 add伊芙ntListener(卡塔尔国方法中的"click";

  与此外八个事件管理程序区别,IE事件管理程序的 this 指向 window,而非被绑定事件的要素;

  使用 attachEvent()方法增加的事件管理程序的触发顺序是有分别的。IE9、10浏览器是按正序推行的,而IE8及以下浏览器则是按倒序实行的;

        <div id="box" style="height:30px;width:200px;background-color:pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.attachEvent('onclick',function(){
                this.innerHTML  = 'attachEvent()方法的第一个参数是"onclick"';

                //与其他三个事件处理程序不同,IE事件处理程序的this指向window,而非被绑定事件的元素
                console.log(this);//window
            })
        </script>

 

  使用 attachEvent(卡塔尔国 增添的风浪能够通过 detachEvent()来移除,条件是必得提供平等的参数。与DOM2级事件管理程序同样,那也意味着加上的无名氏函数将不可能被移除。不过,只要能够将对同生机勃勃函数的援用传给 detach伊夫nt(卡塔尔国,就足以移除相应的事件管理程序。

        <div id="box" style="height:30px;width:200px;background-color:pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.attachEvent("onclick",function(){
                box.innerHTML  = '与DOM2级事件处理程序一样,attachEvent添加的匿名函数将不能被移除';
            },false);
            oBox.detachEvent('onclick',function(){
                box.innerHTML  = '与DOM2级事件处理程序一样,attachEvent添加的匿名函数将不能被移除';
            },false);    
        </script>

 

attachEvent 与 addEventListener 的区别
  1. 参数个数不均等,这么些最直观,addEventListener 有多少个参数,attach伊芙nt 只有多个,attach伊夫nt 增多的事件管理程序只好发出在冒泡阶段,add伊芙ntListener 第四个参数能够决定加多的事件处理程序是在破获阶段也许冒泡阶段管理(大家平时为了浏览器包容性都安装为冒泡阶段)。
  2. 率先个参数意义不一致,add伊芙ntListener 第叁个参数是事件类型(举个例子click,load),而 attachEvent 第二个参数指明的是事件管理函数名称(onclick,onload)。
  3. 事件管理程序的效能域不相似,addEventListener 的效用域是因素自身,this 是指的触发成分,而 attachEvent 事件处理程序会在全局变量内运转,this 是 window。
  4. 为八个事件增加多少个事件管理程序时,实行顺序区别,addEventListener 增多会依照增添顺序实行,而 attach伊夫nt 加多七个事件管理程序时顺序无规律(加多的办法少的时候大概是按加多顺序的反顺序实践的,但是增加的多了就无规律了卡塔尔。
var btn = document.getElementById("myBtn");
btn.onclick = function() {
    alert("Clicked!");
};
btn.onclick = null; //删除事件处理程序

//HTML事件处理程序
<form method="post">
    <input type="text" name="username" value="">
    <input type="button" value="Username" onclick = "alert(username.value)">
</form>

HTML事件管理程序

  有些成分帮助的每一种事件,都能够选择三个与相应事件管理程序同名的 HTML 本性来钦命。这么些性情的值应该是力所能致试行的 javascript 代码;

  在事件管理程序函数内部,this值等于事件的目的元素;

  短处1:因为客商大概会有HTML成分少年老成出未来页面上时就接触相应的事件,但当下的事件管理程序有异常的大可能率尚不具备执行尺度,就能够报错;

  瑕疵2:顾客端编制程序的通用风格是涵养 HTML 内容和 javaScript 行为分开,所以理应制止使用 HTML 事件管理程序属性,因为这一个属性直接混合了 javascript 和 HTML,且不易扩大;

 

事件流

事件流描述的是从页面中吸取事件的各类,首要有两种模型:

  1. IE的事件冒泡:事件最初时由最切实的要素选用,然后逐级提升传播到较为不现实的因素。
  2. Netscape的事件捕获:不太现实的节点更早接受事件,而最现实的成分最终收到事件,和事件冒泡相反。
  3. DOM事件流:DOM2级事件规定事件流包涵四个阶段,事件捕获阶段,处于目的阶段,事件冒泡阶段,首头阵出的是事件捕获,为截取事件提供时机,然后是实际上目的接受事件,最终是冒泡阶段。

分分快三计划 1

 

事件流

  当浏览器发展到第四代时(IE4及Netscape4卡塔尔(英语:State of Qatar),浏览器开辟团队境遇了一个很有意思的难题:页面的哪后生可畏部分会具备某些特定的事件?想象画在一张纸上的风流罗曼蒂克组同心圆。假若把手指放在圆心上,那么手指指向的不是一个圆,而是纸上的具备圆。

  两家市肆的浏览器开辟协会在对待浏览器事件方面可能同样的。若是单击了有个别开关,他们都觉着单击事件不独有爆发在按键上,以致也单击了全体页面。

  但风趣的是,IE 和 Netscape 开荒公司依然建议了好多是一心相反的风浪流的概念。IE 的风浪流是事件冒泡流,而 Netscape 的平地风波流是事件捕获流。

  事件流又称为事件传播,描述的是从页面中收到事件的逐一。DOM2 级事件规定的事件流饱含四个级次:事件捕获阶段(capture phase卡塔尔(قطر‎、处于目的阶段(target phase卡塔尔国和事件冒泡阶段(bubbling phase卡塔尔(英语:State of Qatar)。

  首头阵出的是事件捕获,为缴获事件提供了空子。然后是实在的对象接纳到事件,最终二个品级是冒泡阶段,能够在这里个等第对事件做出响应。

  暗许是在冒泡阶段对事件做出响应。

 

IE 事件冒泡和 DOM2 事件传播机制
  • IE 事件冒泡:事件初叶时由最实际的要素接受,然后逐级升高传播到比较不现实的成分。
  • DOM2级事件规定事件流包蕴多个级次,事件捕获阶段,处于目的阶段,事件冒泡阶段,首首发出的是事件捕获,为截取事件提供机会,然后是实际上指标选拔事件,最终是冒泡阶段。

        移除事件监听函数的不二秘技如下:

事件实践种种

  如果还要现身 HTML 事件管理程序和 DOM0 级事件管理程序,DOM0 级会覆盖 HTML 事件管理程序;

  chrome/opera/safari等 webkit 内核的浏览器会根据事件管理程序出现的后生可畏一来排列,所以结果为:DOM2级 DOM0级

  firefox 浏览器和 IE 浏览器会将 DOM0 级事件优先调用,所以 firefox 和 IE11 浏览器结果为:DOM0级 DOM2级

  IE9、10浏览器结果为:DOM0级 DOM2级 IE

  IE8及以下浏览器结果为:DOM0级 IE

 

阻止事件冒泡和撤回暗许事件
  • DOM 中的事件目标:能够透过 stopPropagation(卡塔尔 方法阻碍事件冒泡;通过 preventDefault(卡塔尔(英语:State of Qatar) 方法撤废暗许事件。
  • IE中的事件指标:能够通过安装 cancelBubble 为 true 来阻拦事件冒泡;设置 returnValue 为 false 来撤废默许事件。

【注】版权归 Lucifer 全体,转发请联系小编。

        DOM2级事件规定的风云流包罗多个级次:事件捕获阶段、处于目的阶段、事件冒泡阶段。首头阵出的是事件捕获,为缴获事件提供了时机。然后是实际的目的选用到事件。最终三个阶段是冒泡阶段,能够在这里个阶段对事件做出响应。

事件捕获

  事件捕获的探究是 window 对象应该更早接纳到事件,而最具体的节点应该最终接收到事件。事件捕获的妄想在于在事变达到预订目的早前就擒获它;

  add伊夫ntListener(卡塔尔方法中的第多个参数是指在冒泡阶段大概捕获阶段处监护人件管理程序,设置为 true 时,即为捕获阶段,默许为 false 冒泡阶段;

分分快三计划 2

  • 事件是有些行为只怕触发,举例点击、鼠标移动。
  • 当顾客点击鼠标时。
  • 当网页已加载时。
  • 当图像已加载时。
  • 当鼠标移动到成分上时。
  • 当客户触发按钮时...

        在此种模型中,分为几个进程:事件捕获阶段、处于目的阶段7事件冒泡阶段;

仿照效法资料

  大神的上课更清楚,他的其他小说也很好,

DOM0 和 DOM2 事件
  • DOM0 重要透过 HTML 内联情势和 JavaScript 钦点事件处理程序达成事件监听。
  1. HTML 内联方式:成分帮衬的各种事件都得以运用三个应和事件管理程序同名的 HTML 属性钦定。那些天性的值应该是能够履行的 JavaScript 代码。
  2. JavaScript 钦定事件管理程序:通过 JavaScript 钦点事件管理程序就是把四个方法赋值给二个要素的事件管理程序属性。每一种成分都有友好的事件管理程序属性,那个属性名称平日为小写,如 onclick 等,将这个属性的值设置为三个函数,就足以钦点事件管理程序。
  • DOM2 则定义了八个形式用于拍卖钦定和删除事件管理程序的操作:
  1. addEventListener
  2. removeEventListener
  • 持有的DOM节点都带有那八个点子,並且它们都领受四个参数:
  1. 事件类型。
  2. 事件管理方法。
  3. 布尔参数,如若是 true 表示在抓获阶段调用事件管理程序,如若是 false,则是在事件冒泡阶段管理。

        这里必须要用函数表明式的款式作为事件管理程序,因为remove伊芙ntListener(卡塔尔国移除的时候必要传入的参数与丰硕应用程序时使用的参数相仿。而通过佚名函数加多的平地风波监听函数将不可能被移除。

 

var btn = document.getElementById("myBtn");
var handler = function() {
    alert(this.id);
};
btn.attachEvent("onclick", handler);//添加事件处理程序
btn.detachEvent("onclick", handler);//删除事件处理程序

DOM0级事件管理程序

  通过 javascript 指定事件管理程序的观念意识办法,就是将三个函数赋值给一个事件管理程序属性。这种为事件处理程序赋值的点子是在第四代Web浏览器中冒出的,何况至今截至还是为具有今世浏览器所援救。原因一是回顾,二是怀有跨浏览器的优势。

  各样成分都有友好的事件管理程序属性,那些属性日常全部大写,将这种个性的值设置为二个函数,就能够钦赐事件管理程序。

  以DOM0级情势丰盛的事件管理程序会在事变流的冒泡阶段被管理;

  能够通过将事件管理程序属性设置为 null 来删除事件管理程序;

  劣点:DOM0级事件管理程序的毛病是环绕着每个事件指标对于每个事件类型只可以增加一个事件处理程序。

        <div id="box" style="height:30px;width:200px;background-color:pink;"></div>
        <script>
            var oBox = document.getElementById('box');
            oBox.onclick = function(){
                this.innerHTML  = 'DOM0级事件处理程序';
            }
        </script> 

 

var btn = document.getElementById("myBtn");
btn.addEventListener("click", functioin() {
    alert(this.id);
}, false);
btn.addEventListener("click", function() {
    alert("Hello Kid");
}, false);

序言:那是笔者学习之后本身的精通与整合治理。若是有荒唐或然疑问的地点,请大家指正,我会持续更新!

        每一种元素(富含window和document)都有和睦的事件管理属性,那个属性日常一切大写,如onclick。将这种特性设置成函数就足以钦定事件管理程序:

事件冒泡

  IE 的风浪流叫做事件冒泡(event bubbling卡塔尔,即事件始于时由最切实的成分(文档中嵌套档期的顺序最深的十二分节点卡塔尔(قطر‎接纳,然后逐级向上传播到 window 对象;

  全体今世浏览器都扶植事件冒泡,但在切实落到实处在照旧有大器晚成部分数差距。IE9、Firefox、Chrome、Safari将事件向来冒泡到 window 对象;

 

  • type代表被触发的风浪类型
  • srcElement代表事件的对象
  • cancelBubble (Boolean)私下认可是false,将其设为true就足以裁撤事件冒泡
  • returnValue (Boolean卡塔尔国暗许是true,将其安装为false就足以收回事件的暗许行为
  • type代表被触发的平地风波类型
  • target表示事件的指标
  • currentTarget表示事件管理程序当前正值处监护人件的那多少个成分
  • cancelable (Boolean卡塔尔(قطر‎ 表明是不是能够撤销事件的默许行为
  • bubbles (Boolean)申明事件是不是冒泡
  • perventDefault(卡塔尔(英语:State of Qatar)废除事件的暗中同意行为。要是cancelable为true,则足以选择这几个方式
  • stopPropagation(卡塔尔国撤除事件的愈加捕获或冒泡。假若bubbles为true,则能够运用那么些主意。

IE中的事件目标

        那时候实行顺序是逐大器晚成实施:"myBtn"  "Hello kid"。IE中的话实践各类适逢其会相反。

        DOM0级事件模型是先前时代的平地风波模型,又称作原始事件模型,在该模型中,事件不会传来,即未有事件流的概念。事件绑定监听函数较为轻易,要选用Javascript钦定事件管理程序,首先必须获得一个要操作的指标的援用。

0. 事变与事件流

        有了上边包车型的士平地风波指标,就足以写出跨浏览器的平地风波指标封装成事件包裹了。

        IE中运用与DOM中就像的多少个主意:attach伊芙nt(卡塔尔(قطر‎和detach伊芙nt(卡塔尔。那五个章程选用平等的两个参数,事件管理程序名称和事件管理程序函数。由于IE8及更早的版本只补助事件冒泡,所以通过attach伊夫nt(卡塔尔(英语:State of Qatar)增多的事件管理程序都会被加多到冒泡阶段。如若使用attach伊芙nt(卡塔尔国为开关加多五个事件处理程序可用:

var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on"   type, handler);
        } else {
            element["on"   type] = handler;
        }
    },

    removeHandler: function(element, type, handler){
        if (element.removeEventListener){                 //DOM2
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){                  //IE
            element.detachEvent("on"   type, handler);
        } else {
            element["on"   type] = null;                  //DOM0
        }
    },

    getEvent: function(event){
        return event ? event : window.event;
    },

    getTarget: function(event){
        return event.target || event.srcElement;
    },

    preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

4. 风云目的

DOM中的事件指标

        IE的事件流叫做事件冒泡,即事件最早时由最具体的要素(文档中嵌套档次最深的百般节点)选取,然后逐级向上传播到较为不具体的节点(文书档案)。Netscape团队建议的另意气风发种事件流叫做事件捕获(event capturing卡塔尔(英语:State of Qatar),事件捕获的思虑是不太现实的节点应该更早接受到事件,而最实际的节点应该最后摄取到事件。捕获的筹划在于在事件达到预订指标前抓获它。

3. IE中的事件模型

        DOM2级定义了多个点子,用于拍卖内定和删除事件管理程序的操作,addEventListener(卡塔尔和removeEventListener(卡塔尔(قطر‎。全部DOM节点都满含那多个措施,并且有八个参数,要拍卖的风波名、作为事件管理程序的函数和一个布尔值。要在click事件增加事件管理程序,能够用:

 2. DOM2级事件模型

1. DOM0级事件模型   

        事件是浏览器与文书档案交互作用的瞬间,如点击开关、填写表格等操作,它是Javascript与HTML之间联系的桥梁。DOM是树状构造,借使还要给父节点都绑定事件时,当触发子节点的时候,那多个事件的发出顺序就牵涉到事件流的开始和结果,它描述的是页面选拔时间的依次。事件流描述的是从页面收取事件的次第,但正如有意思的是IE和Netscape开辟公司依然提议了繁多完全相反的概念。IE的风云流是事件冒泡流,而Netscape Communicator的风云流是事件捕获流。

  • 事件捕获阶段(capturing phase卡塔尔(قطر‎。事件从document一向向下传播到指标成分, 依次检查通过的节点是还是不是绑定了事件监听函数,假使有则实践。

  • 事件管理阶段(target phase卡塔尔。事件到达目的成分, 触发指标成分的监听函数。

  • 事件冒泡阶段(bubbling phase卡塔尔(قطر‎。事件从指标成分冒泡到document, 依次检查通过的节点是或不是绑定了平地风波监听函数,如果有则试行。

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 JavaScript web