JavaScript起步（二十-DOM事件二）| 一起学系列

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

• 事件委托

  • 利用事件冒泡，将子级的事件委托给父级加载

  • 同时，需要利用事件函数的一个e参数，内部存储的是事件对象。只要触发事件，函数内部都可以得到一个事件对象，对象中存储了关于事件的一系列数据。e.target属性，记录的是真正触发事件的事件源

  • 使表格的点击内容高亮案例：

• 事件对象：e

  • 只要触发事件，就会有一个对象，内部存储了与事件相关的数据

  • e在低版本浏览器有兼容问题，低版本浏览器中使用的是window.event（e = e || window.event;）

  • 事件对象常用的属性

    • e.eventPhase  查看事件触发时所处的阶段（捕获阶段：输出1；目标阶段：输出2；冒泡阶段：输出3）

    • e.target      用于获取触发事件的元素，低版本浏览器不能使用

    • e.srcElement  用于获取触发事件的元素，低版本浏览器使用

    • 兼容写法：var target = e.target || e.SrcElement

    • e.currentTarget   用于获取绑定事件的事件源元素（即设置的点击事件的元素或称事件委托源）

    • e.type        获取事件类型（比如设置的onclick，输出的就是click）

    • e.clientX/e.clientY（X正方向向右，Y正方向向下） 鼠标距离浏览器窗口左上角的距离（会随着鼠标滚轮变化），所有浏览器都支持

    • e.pageX/e.pageY   鼠标距离整个HTML页面左上顶点的距离，IE8以下不支持

• e.type的应用

  • 更多时候可能给同一个元素对象添加不同的事件类型，对应执行的事件函数内部的代码不同。我们可以将所有给一个元素绑定的事件函数写在一个函数内，通过函数内部的e.type判断不同的分支

• 鼠标移动事件：onmousemove

  • 通过事件对象e来获取鼠标的XY的距离