javascript中dom的基础概念

dom事件

术语

• 事件:发生一件事

• 事件类型：点击、鼠标按下、鼠标移入、鼠标移除、鼠标按下、鼠标抬起…

• 事件处理程序:一个函数,用于当某件事情发生时运行。

• 事件注册: 将一个事件处理程序，挂载到某个事件上.

事件流

事件流:当某个事情发生的时候，哪些元素会监听到该事件发生，这些元素发生该时间的顺序。

当一个元素发生了某个事件时,那该元素的所有祖先元素都发生了该事件

事件冒泡:先出发最里层的元素,然后再依次触发外层元素。(如同水面的波纹)

        // 当一个元素发生了某个事件时,那该元素的所有祖先元素都发生了该事件
        document.querySelector("button").onclick = function () {
            console.log("button");
        }
        document.querySelector("div").onclick = function () {
            console.log("div");
        }
        document.querySelector("body").onclick = function () {
            console.log("body");
        }
        document.querySelector("html").onclick = function () {
            console.log("html");
        }
        document.onclick =function (){
            console.log("doucument")
        }

点击后的效果

事件捕获:先触发外层元素,然后再依次触发里面的元素。

目前,标准规定，默认情况下事件是以冒泡的方式触发。

事件源、事件目标:事件目标阶段的元素