简单事件

鼠标类事件

单击 双击

移入：mouseover mouseenter

移出：mouseout mouseleave

例题： 移入大盒子

var box = document.querySelector('.box')
var small = document.querySelector('.small')
box.onmouseenter = function() {
//     console.log('移入大盒子了');
// }

移出大盒子

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

移入小盒子

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

移出小盒子

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

移入大盒子

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

移出大盒子

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

移入小盒子

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

移出小盒子

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

mouseover和mouseout在触发子标签事件的时候，也会触发父标签事件

 鼠标按下：mousedown
// 鼠标弹起：mouseup
// box.onmousedown = function() {
//     console.log('按下了');
// }

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

// 鼠标移动：mousemove
// box.onmousemove = function() {
//     console.log('移动了');
// }

// 鼠标右击：contextmenu
// box.oncontextmenu = function() {
//     console.log('右击');
// }

// 鼠标滚轮滚动：mousewheel
box.onmousewheel = function() {
    console.log('滚动了');
}

键盘事件

keydown：键盘按下 - 按住不松开一直触发
// keyup：键盘弹起 - 弹起的一瞬间，触发一次 ************
// keypress：敲击键盘，其实就是keydown - 按住不松开就一直触发
// window.onkeypress = function() {
//     console.log(6666);
document.onkeydown = function(){
    console.log('龙哥好')
}

表单事件

获取焦点：focus

失去焦点：blur

表单提交：submit

改变：change

文本框内容变化：input

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

事件流 / 事件流：事件从开始触发 到 执行结束 中间经历的完整的过程 // 事件流有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(事件类型, 执行的函数, 布尔值)

事件解绑：将事件删除

为什么解绑？某些特殊情况下，不需要某个事件了。例如，我们按下鼠标拖拽div，当松开鼠标后，不需要拖拽了，就需要在松开鼠标的时候，将移动事件删掉

document.querySelector('button').onclick = function() {
//     // 将div的点击事件解绑
//     box.onclick = null
// }

如何解绑？

// 根据绑定方式不同，解绑的方式也不同

// 以前的绑定方式 - 标签.on类型 = 函数 在解绑的时候，需要给事件赋值null

// 使用事件侦听器绑定的 - 需要使用另外一个方法进行解绑

// 解绑的语法： 标签.removeEventListener(事件类型, 绑定的那个函数)

box.addEventListener('click', fn)
// function fn() {
//     console.log('盒子的点击事件');
// }

注意：解绑的事件类型一定要跟绑定的事件类型相同；解绑的函数一定要跟绑定的函数是同一个

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

box.addEventListener('click', function() {
//     console.log('盒子的点击事件');
// })

如果使用事件侦听器绑定事件，使用匿名函数的话，就无法解绑了
// document.querySelector('button').onclick = function() {
//     // 解绑div的点击事件
//     box.removeEventListener('click', function() {
//         console.log('盒子的点击事件');
//     })
// }

事件对象

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

// document.onclick = function() {
//     console.log('点击了文档');
// }

在事件中，每个事件都有一个属于自己的对象，用于记录这个事件的详细信息

获取事件对象

事件函数的参数1 - 就是事件对象 在事件函数中，通过 window.event获取

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

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

获取鼠标位置

var box = document.querySelector('.box')
box.onclick = function(e) {
    // console.log('盒子的点击事件');
    // 通过事件对象获取当前鼠标点击的位置
    console.log(e);
    // clientX clientY 是鼠标相对于当前浏览器可视窗口的坐标
    // offsetX offsetY 是鼠标相对于当前标签的坐标
    // pageX pageY 是鼠标相对于当前文档的坐标
}

拖拽 = 按下事件配合移动事件 var box = document.querySelector('.box') box.onmousedown = function(e) {

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

嵌套一个鼠标移动事件 document.onmousemove = function(e) { // 让div重新计算left和top

    // 移动过程中，需要获取鼠标在浏览器中坐标
    var x = e.clientX
    var y = e.clientY

    // div的left = 鼠标位置 - div宽度 / 2
    // var divLeft = x - box.offsetWidth / 2
    // var divTop = y - box.offsetHeight/ 2
    var divLeft = x - x1
    var divTop = y - y1

获取键盘按键码 document.onkeyup = function(e) { // console.log(e); // 获取按键码 - e.keyCode // console.log(e.keyCode); /* 规律： 字母的按键码 是 对应的大写字母的阿斯克码 数字的按键码 是 对应的数字的阿斯克码

回车键：13
空格：32
左上右下：37 38 39 40
*/
// 有些按键不是单独的使用的，是组合其他键一起使用的，例如：alt shift ctrl
// 事件对象中提供了几个属性：altKey  shiftKey  ctrlKey   他们的值是布尔值，表示是否按住了对应的键
// console.log(e.ctrlKey);

// 判断是否按住了ctrl+c
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('没有按住');
}

} 阻止默认行为

有些标签，不用给他绑定事件，默认就能有一定的行为，例如a标签

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

默认选中文字 阻止
// document.onselectstart = function(e) {
//     e.preventDefault()
// }

阻止右击事件
document.oncontextmenu = function(e) {
    // e.preventDefault()
    console.log('右击了文档');
    // 阻止默认行为，还可在事件函数的末尾 - return false
    // return false
}