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

Posted 云遮夏靥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于事件委托和时间冒泡(以及apply和call的事项)相关的知识,希望对你有一定的参考价值。

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

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方法,完美解决。

以上是关于关于事件委托和时间冒泡(以及apply和call的事项)的主要内容,如果未能解决你的问题,请参考以下文章

关于事件捕获和事件委托

十道必须要理解的javascript面试题

事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

JS事件冒泡机制以及委托方法,以及vue中的stop

JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

js 原生事件委托