关于事件委托和时间冒泡（以及apply和call的事项）

Posted 2020-08-29 云遮夏靥

搜索事件委托和事件冒泡，网上一大堆乱七八糟的解释，当然意思都对，没毛病。

but，真的无聊。

事件冒泡：事件会从点击的元素开始依次向上流出，直到html，遇见事件监听则执行。

事件委托：原因——父元素下有若干不定子元素需要添加相同监听事件。处理方法——利用事件冒泡性质给父元素加监听事件，再用e.target获取被点击的子元素，即事件源。

 

然后说到事件委托就要谈到apply和call方法了。

apply方法，网上也有一大把解释，老样子，我还是喜欢简单点的。

1.所谓apply就是改变当前对象的this，从而达到类继承的效果。

2.js函数存在【定义时上下文】、【运行时上下文】和【上下文可以改变】的概念，所以产生了很多诡异的事情，以上即是其一。

3.上下文即this。

以下得自知乎大神回答，我理解后注于此，感谢。

首先，js中一切皆对象。而对象的方法千千万，如果一个对象存在另一个对象不存在的方法或者属性，就可以通过apply或者call方法继承过去。

例如，通过var nodes = document.getElementsByTagName方式获取到的nodes是类array的array，即类数组。我们就可以通过

Array.prototype.push.apply(nodes)这样的方式让nodes可以使用array的push方法。

apply和call的作用完全相同，只是接收参数不同：

apply（this， arg1，agr2……）;

call（this，[arg1,arg2……]）;

 

下面是一个例子：

function Man() {}
Man.prototype = {
    valet: false,
    wakeUp: function(event) {
        console.log(this.valet + "? Some breakfase, please.");
    }
};

//get "undefined? Some breakfast, please
var button = document.getElementById(‘morning‘);
button.addEventListener(
    "click",
    wooster.wakeUp,
    false
);

//使用apply来改变 wakeUp 的上下文环境，即 wakeUp 中的this
var button = document.getElementById(‘morning2‘);
button.addEventListener(
    "click",
    function() {
        Man.prototype.wakeUp.apply(wooster, arguments);
    },
    false
);

 其实.apply和.call不过是function的两个特殊的methods而已。作用是改变函数的执行环境——即上下文——即this，来看个直观点的例子。

function changeStyle(attr, value){
    this.style[attr] = value;
}
var box = document.getElementById(‘box‘);
window.changeStyle.call(box, "height", "200px");

我们在window下定义了个函数changeStyle，然后获取到box。box是个node，本身不存在changeStyle方法，我们通过.call来使用window下的changeStyle方法，完美解决。