dom和事件机制 - HiMrLonely - 沸点 - 掘金

1年前

dom和事件机制
流程三步走
1.获取dom元素
获取标签:document.querySelector
2.给dom元素绑定事件
3.声明事件处理程序
事件流
事件冒泡:click 事件沿DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象。
阻止事件冒泡:直接使用event.stopPropagation()
事件捕获:意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件;(也就是:与事件冒泡相反)
事件流: 事件捕获--到达目标--事件冒泡
addEventlistener(),第三个参数,默认false,即事件冒泡; 若为true,则是事件捕获;
事件处理程序
DOM0事件处理程序
用onclick,不能追加执行,只有最后一个生效;
DOM2事件处理程序
用addEventlistener('click', fun, true);
可以追加执行事件,但是只有最后一个生效;
解绑时:removeEventListener('事件类型',具名函数事件处理程序);
事件对象
event 对象只在事件处理程序执行期间存在，一旦执行完毕，就会被销毁。
在react与js中, 处理事件时, 会用到事件对象
常用的事件对象
以下是事件对象的一些常用属性和方法：
type:
事件的类型，例如："click", "mousedown", "mouseup", "keydown", 等。

展开

青训营-快乐出发