什么是事件?

324 阅读2分钟

事件是文档和浏览器窗口中发生的特定的交互瞬间,事件就发生了。

一是直接在标签内直接添加执行语句,

二是定义执行函数。

addeventlistener 监听事件

事件类型分两种:事件捕获、事件冒泡。

事件捕获就是:网景公司提出的事件流叫事件捕获流,由外往内,从事件发生的顶点开始,逐级往下查找,一直到目标元素。

事件冒泡:IE提出的事件流叫做事件冒泡就是由内往外,从具体的目标节点元素触发,逐级向上传递,直到根节点。

什么是事件流?

事件流就是,页面接受事件的先后顺序就形成了事件流。

自定义事件

自定义事件,就是自己定义事件类型,自己定义事件处理函数。

事件委托 事件委托,又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托也就没法实现了

阻止事件冒泡

event.stopPropagation() .stop修饰符

addEventListener(‘click',函数名,true/false) 默认值为false(即 使用事件冒泡)true 事件捕获

好处:提高性能,减少了事件绑定,从而减少内存占用

应用场景 在vue中事件委托:

我们经常遇到vue中v-for一个列表,列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听,从性能方面来说是不太好的。那我们我们可以通过把每个item的click事件委托给父元素的形式来实现

封装事件绑定 我们在封装这个函数的时候可以用addEventListener(事件监听)来实现 ,封装的函数有三个参数,第一个是要绑定事件的元素,第二个是要绑定的事件类型,第三个是事件的执行函数。 调用这个函数 就可以实现给某个元素绑定一个事件了。