事件是文档和浏览器窗口中发生的特定的交互瞬间,事件就发生了。
一是直接在标签内直接添加执行语句,
二是定义执行函数。
addeventlistener 监听事件
事件类型分两种:事件捕获、事件冒泡。
事件捕获就是:网景公司提出的事件流叫事件捕获流,由外往内,从事件发生的顶点开始,逐级往下查找,一直到目标元素。
事件冒泡:IE提出的事件流叫做事件冒泡就是由内往外,从具体的目标节点元素触发,逐级向上传递,直到根节点。
什么是事件流?
事件流就是,页面接受事件的先后顺序就形成了事件流。
自定义事件
自定义事件,就是自己定义事件类型,自己定义事件处理函数。
事件委托 事件委托,又名事件代理。事件委托就是利用事件冒泡,就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡,那么委托也就没法实现了
阻止事件冒泡
event.stopPropagation() .stop修饰符
addEventListener(‘click',函数名,true/false) 默认值为false(即 使用事件冒泡)true 事件捕获
好处:提高性能,减少了事件绑定,从而减少内存占用
应用场景 在vue中事件委托:
我们经常遇到vue中v-for一个列表,列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听,从性能方面来说是不太好的。那我们我们可以通过把每个item的click事件委托给父元素的形式来实现
封装事件绑定 我们在封装这个函数的时候可以用addEventListener(事件监听)来实现 ,封装的函数有三个参数,第一个是要绑定事件的元素,第二个是要绑定的事件类型,第三个是事件的执行函数。 调用这个函数 就可以实现给某个元素绑定一个事件了。