js的事件以及各种事件

事件的三要素

1. 事件源
2. 事件类型
3. 事件处理函数

DOM 0级事件绑定 事件源.on+事件类型=事件处理函数

DOM 2级事件绑定（事件监听）

事件源.addEventListener('事件类型'，事件处理函数，第三个参数)

相关事件

onload(刷新)、onscroll(滚动)

鼠标事件

click(单击)、dblclick(双击)、contextmenu(右键)、mousedown(鼠标按下)、mouseup(鼠标抬起)、mousemove(鼠标移动)

鼠标移入

mouseover、mouseenter

鼠标移出

mouseout、mouseleave ==特别注意：== mouseover和mouseout在鼠标移入元素和移入内部盒子时都会触发 mouseenter和mouseleave只在鼠标移入移出元素时触发；

键盘事件

keyup(键盘抬起)、keydown(键盘按下)、keypress(键盘按下抬起都触发) 特殊例子：

    var inp = document.querySelector('#inp')
            inp.onkeyup = function (e) {
                console.log(e)
                if (e.ctrlKey && e.key == 'a') {
                    console.log('此时按下了 ctrl健 和 a键')
                }
            }

==注意此时ctrlKey的k是大写==

表单事件

focus(获取焦点)、blur(失去焦点)、change(文本框内容改变)、input(文本框正在输入内容)

获取鼠标坐标

1. 获取相当于事件源的鼠标坐标点

console.log('相对于事件源 X 轴', e.offsetX)
console.log('相对于事件源 Y 轴', e.offsetY)

2. 获取相当于页面的坐标点

console.log('相对于页面的 X 轴', e.pageX)
console.log('相对于页面的 Y 轴', e.pageY)

3. 获取相当于浏览器窗口的坐标点

console.log('相对于浏览器窗口的 X 轴', e.clientX)
console.log('相对于浏览器窗口的 Y 轴', e.clientY)