冒泡概念

捕获到最小节点后一层一层往上返回像是气泡从最底部往上冒一样由于水深不同压强不同同样多的气体越往上冒气泡越大就像在html里越往上走“辈分”越大一样所以比喻成冒泡

1.3

document.querySelector(.grandpa);

const

document.querySelector(.father);

const

document.querySelector(.son);grandpa.onclick

function()

{console.log(son);event.stopPropagation();

}如上代码,

调用event.stopPropagation();事件即可在当前位置阻止冒泡

只将冒泡传递到father,

即触发father但是不触发grandpa的onclick事件,

const

document.querySelector(.grandpa);

const

document.querySelector(.father);

const

document.querySelector(.son);grandpa.onclick

function()

{console.log(father);event.stopPropagation();

son.onclick

事件冒泡时会将当前节点作为event事件的一个属性target传入,

document.getElementById(son)传入了father的onclick事件中

2.1

document.querySelectorAll(.son);for(const

sons.length;

不妨试试对class为father的ul添加onclick事件,

输出event,

document.querySelector(.father);

father.onclick

document.querySelector(.father);

father.onclick

{console.log(event.target.innerText);//