事件

事件

事件是用户在网页中的行为

事件类型

鼠标事件

单击:click

双击:dblclick

移入:mouseover/mouseenter

box.onmouseover = function() {
    console.log('移入大盒子了');
}
small.onmouseenter = function() {
    console.log('移入小盒子了');
}

移出:mouseout/mouseleave

box.onmouseout = function() {
    console.log('移出大盒子了');
}
small.onmouseleave = function() {
    console.log('移出小盒子了');
}

移动:mousemove

small.onmouseover = function() {
    console.log('移入小盒子了');
}

按下:mousedown

box.onmousedown = function() {
    console.log('按下了');
}

弹起:mouseup

box.onmouseup = function() {
    console.log('弹起了');
}

滚轮:mousewheel

box.onmousewheel = function() {
    console.log('滚动了');
}

右击:contextmenu

box.oncontextmenu = function() {
    console.log('右击');
}

键盘类

键盘按住:keydown

window.onkeydown = function() {
    console.log(6666);
}

键盘按住: keypress

window.onkeypress = function() {
    console.log(6666);
}

键盘弹起:keyup

window.onkeyup = function() {
    console.log(6666);
}

表单类

获取焦点:focus

失去焦点：blur

改变:change

btns[1].onchange = function() {
    if (this.checked) {
        // 让一个复选框选中，就将他的checked赋值为true
        for (var a = 0; a < ipts.length; a++) {
            ipts[a].checked = false
        }
    }
}

表单提交:submit

文本框内容变化：input

document.querySelector('input').oninput = function() {
    document.querySelector('p').innerText = this.value
}

window

scroll

当浏览器卷去的距离发生了变化就会触发执行

window.onscroll = function() {
    console.log(666);
}

load

在网页加载完毕后立刻执行的操作

window.onload = function() {

}

resize

当浏览器窗口大小重新发生改变就会触发执行

window.onresize = function() {
    console.log(innerWidth, innerHeight);
}

事件流

事件从开始触发 到 执行结束 中间经历的完整的过程

3个阶段

捕获阶段

由外向内开始找目标元素的过程

目标阶段

找到了目标元素，去执行他的事件函数

冒泡阶段

从目标元素开始，由内向外离开目标元素过程。祖宗标签的同类型事件会在冒泡阶段执行

var small = document.querySelector('.small')
var middle = document.querySelector('.middle')
var big = document.querySelector('.big')
small.onclick = function() {
    console.log('小');
}
middle.onclick = function() {
    console.log('中');
}
big.onclick = function() {
    console.log('大');
}

事件侦听器

另外一种事件的绑定方式

语法：

标签.addEventListener(事件类型, 执行的函数)
可以有第三个参数 - 布尔值，自己的事件是否在后代标签的捕获阶段执行，默认false
标签.addEventListener(事件类型, 执行的函数, 布尔值)

var small = document.querySelector('.small')
var middle = document.querySelector('.middle')
var big = document.querySelector('.big')
small.addEventListener('click', function() {
    console.log('小');
}, false)
middle.addEventListener('click', function() {
    console.log('中');
}, true)
big.addEventListener('click', function() {
    console.log('大');
}, true)

事件解绑:

将事件删除

注意：

解绑的事件类型一定要跟绑定的事件类型相同；

解绑的函数一定要跟绑定的函数是同一个

如果使用事件侦听器绑定事件，使用匿名函数的话，就无法解绑了

语法：

标签.removeEventListener(事件类型, 绑定的那个函数)

document.querySelector('button').onclick = function() {
    // 解绑div的点击事件
    box.removeEventListener('click', fn)
}

事件对象

是一个记录了当前事件更加具体的所有信息的对象

获取事件对象

事件函数的参数1 - 就是事件对象

在事件函数中，通过 window.event获

document.onclick = function(e) {
    console.log(e);
}

document.onclick = function() {
    console.log(window.event);
}

获取鼠标位置

clientX 和 clientY

相对于当前浏览器可视窗口的坐标

var x = e.clientX
var y = e.clientY

offsetX 和 offsetY

是鼠标相对于当前标签的坐标

var x1 = e.offsetX
var y1 = e.offsetY

pageX 和 pageY

是鼠标相对于当前文档的坐标

获取键盘按钮码 e.keyCode

字母的按键码 是 对应的大写字母的阿斯克码

数字的按键码 是 对应的数字的阿斯克码

回车键：13

空格：32

左上右下：37 38 39 40

组合键

他们的值是布尔值，表示是否按住了对应的键

e.shiftKey

e.ctrlKey

e.altKey

document.onkeyup = function(e) {
   var code = e.keyCode // 大写的阿斯克码
    var word = String.fromCharCode(code)
    word = word.toLowerCase()
    console.log(word);
    console.log(e.ctrlKey);
    if (e.ctrlKey && word === 'c') {
        console.log('按住了ctrl+c');
    } else {
        console.log('没有按住');
    }
}

获取事件类型 e.type

document.ondblclick = function(e) {
    // 事件类型 - e.type
    console.log(e.type);
}

获取鼠标按键码 e.button

document.onmousedown = function(e) {
    // console.log('按住了鼠标');

    // 鼠标按键码
    console.log( e.button );
}

阻止事件冒泡

e.stopPropagation()

small.onclick = function(e) {
    // 阻止事件冒泡 - e.stopPropagation()
    e.stopPropagation()
    console.log('小');
}

阻止默认行为

e.preventDefault()

document.querySelector('a').onclick = function(e) {
    // 阻止默认行为 - e.preventDefault()
    e.preventDefault()
    console.log(111);
}

在事件函数末尾 return false

document.oncontextmenu = function(e) {
    // 阻止默认行为，还可在事件函数的末尾 - return false
    return false
}

获取精准的目标元素 e.target

big.onclick = function(e) {
    // 最精准的目标元素
    console.log(e.target);
    console.log('大');
}

实现事件委托

将子标签事件给父标签绑定，在事件函数中，通过判断精准的目标元素是否是子标签

var ul = document.querySelector('ul')
ul.onclick = function(e) {
    console.log(e.target.innerText);
}
// 事件委托可以让动态添加的子标签，也能有事件
document.querySelector('button').onclick = function() {
    var li = document.createElement('li')
    li.innerText = '44444444444'
    ul.appendChild(li)
}

原理：利用了事件冒泡

好处:提高绑定效率;动态添加的子标签也可以具备事件