JS基础之事件（自用）

1、鼠标在元素中移动时触发的事件：document.onmousemove

window.onload = function() {
   // 获取当前的鼠标的位置
    document.onmousemove = function(event) {
        // 解决兼容问题：
        event = event || window.event
        console.log('鼠标距离页面左边的位置：', event.clientX)
    }
}

2、当鼠标事件发生时，获取鼠标相对于可见窗口的水平坐标：clientX

3、当鼠标事件发生时，获取鼠标于可见窗口的垂直坐标：clientY

4、当鼠标事件发生时，获取鼠标相对于页面的水平坐标：pageX

5、当鼠标事件发生时，获取鼠标相对于页面的垂直坐标：pageY

6、获取滚动条滚动的距离：

• chrome认为浏览器的滚动条是body的，可以通过document.body.scrollTop来获取

• fireFox\IE认为浏览器的滚动条是html的，可以通过document.documentElement.scrollTop来获取

7、事件冒泡（bubble）：

• 定义：事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发。

• 阻止事件冒泡：event.cancelBubble = true

8、事件委派：

• 定义：将事件统一绑定到共同的父元素上，当后代元素的事件被触发时，会一直冒泡到祖先元素，从而通过祖先元素的相应函数来处理事件。

• 说明：利用了事件冒泡的原理，减少事件的绑定次数，提高程序的性能

• 细节处理：如果只需要对当前的文字进行事件的触发，而不是整个块的事件触发，那么需要使用event.target对当前点击的对象进行判断。

9、事件绑定：

• 使用 对象.事件名称 = 函数 的 形式来绑定响应函数，它只能同时为一个元素的一个事件绑定一个函数。如果绑定了多个函数，后面的函数会覆盖掉前面的函数。

• 使用 addEventListener() 可以为一个元素同时绑定多个响应函数，执行顺序：先绑定先执行。

  • 参数：

    • 【事件的名称，不加on，类型是字符串】

    • 【回调函数，事件触发的时候被调用】

    • 【是否在捕获阶段触发，类型是布尔值，一般传false】

  • IE8及以下不支持

  • 函数中的this指向当前调用的对象

  ---

• 使用 attachEvent() 可以为一个元素同时绑定多个响应函数，执行顺序：先绑定后执行。

  • 参数：

    • 【事件的名称，加on，类型是字符串】

    • 【回调函数，事件触发的时候被调用】

  • IE8及以下支持

  • 函数中的this指向window

10、事件的传播：

• 关于事件的传播，网景公司和微软公司有不同的观点。

  • 微软公司：事件应该是由内向外传播。当事件触发的时候，应该先触发当前元素的事件，然后再向当前元素的祖先元素上传播，即事件应该在捕冒泡阶段执行。

  • 网景公司：事件应该是由外向内传播。当事件触发的时候，应该先触发当前元素的最外层的祖先元素事件，然后向内传播给后代元素。

• W3C结合了两个公司的方案，将事件传播分为了三个阶段：

  • 捕获阶段：从最外层的祖先元素向 目标元素进行事件的捕获，但是默认此时不会触发事件。

  • 目标阶段：事件捕获到目标元素，开始在目标元素上触发事件。

  • 冒泡阶段：事件从目标元素向其祖先元素进行传递，依次触发祖先元素上的事件。

• 如果希望在捕获阶段就触发事件，则需要将addEventListener()的第三个参数设置为true

• IE8及以下浏览器没有捕获阶段。

    
    
    
    


    按钮点击进行时间绑定的检测
    

11、事件的拖拽：

    
    
    
    
    


    
这是一段文字
    

    

    

12、滚轮滚动事件：

13、键盘事件：

键盘事件一般绑定给 可以获取焦点的对象或者document。