js中的事宜流和事宜处置惩罚顺序

2019年8月24日 174次阅读 来源: 温茶儿
  • HTML和js之间的交互是经由过程事宜完成的。
  • 事宜流形貌的是从页面中接收事宜的递次。

事宜流

  • IE中的事宜流是事宜冒泡流。递次是从里向外 eg：div-body-html-Document
  • Netscape Communicator的事宜流是事宜捕捉流。递次是从外向里 eg：Document-html-body-div
  • DOM2级事宜划定的事宜流包含三个阶段：事宜捕捉阶段、处于目的阶段和事宜冒泡阶段，个中3到4是处于目的阶段，如图1所示。

《js中的事宜流和事宜处置惩罚顺序》

事宜处置惩罚顺序

  • 1.HTML事宜处置惩罚顺序

经由过程html特征来指定处置惩罚事宜

<input type="button" value="Click" onclick="show()" />

function show(){
  alert("hello world")
}

事宜处置惩罚顺序中的代码在实行时，有权接见全局作用域中的任何代码
为何会如许呢？？？
经由过程html特征体式格局指定的事宜处置惩罚顺序会建立一个封装这元素属性值的函数，这个函数内部能够像接见局部变量一样接见document及钙元素自身的成员，神不奇异？这个函数运用with扩大本身的作用域：

function(){
    with(document){
      with(this){
        //元素属性值
    }
  }
}
  • 2.DOM0级事宜处置惩罚顺序

经由过程javaScript指定事宜处置惩罚顺序的传统体式格局，将一个函数赋值给一个事宜处置惩罚顺序属性

var btn=document.getElementById("myBtn")
btn.onclick=function(){
  alert(this.id)
}

删除:

btn.onclick=null;
  • 3.DOM2级事宜处置惩罚顺序

两个要领，一个处置惩罚指定事宜一个删除，addEventListener()和removeEventListener()。这两个要领离别接收三个参数：
（要处置惩罚的事宜名、作为事宜处置惩罚顺序的函数、一个布尔值）true示意在捕捉阶段挪用函数，false示意在冒泡阶段挪用,平常运用false，如许能够最大限制地兼容种种浏览器
经由过程addEventListener()增加的函数只能经由过程addEventListener()移除，所以，匿名函数没法移除

var btn=document.getElementById("myBtn")
btn.addEventListener('click',function(){
    alert(this.id)
},false)
btn.removeEventListener('click',function(){            //没有用
    alert(this.id)
},false)

挪用removeEventListener时与传入addEventListener时的函数差别

var btn=document.getElementById("myBtn")
var handler(){
    alert(this.id)
}
btn.addEventListener('click',handler,false)
btn.removeEventListener('click',handler,false)
  • 4.IE事宜处置惩罚顺序

与DOM中相似,两个要领：attachEvent()和detachEvent()，接收两个参数，同时因为IE8及更早版本只支撑事宜冒泡，所以经由过程这两个要领增加的事宜处置惩罚顺序都会被增加到冒泡阶段：
(事宜处置惩罚顺序称号、事宜处置惩罚顺序函数)

var btn=document.getElementById("myBtn")
btn.attachEvent('onclick',function(){
    alert(this===window)    //true
})

此处是onclick而不是click，与DOM要领差别的是这里的事宜处置惩罚顺序会在全局作用域中运转，this即是window。增加的事宜会被逆序实行。

  • 5.跨浏览器的事宜处置惩罚顺序

运用EventUtil对象，封装以下：

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

运用以下：

var btn=document.getElementById("myBtn")
var handler=function(){
    alert(clicked)
}
EventUtil.addHandler(btn,'click',handler)
EventUtil.removeHandler(btn,'click',handler)

注：本篇文章内容来自红皮书

    原文作者：温茶儿
    原文地址: https://segmentfault.com/a/1190000014154641
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞