JavaScript 中的 event

1.JavaScript中的event事件(鼠标事件，键盘事件，HTML事件)

(1). 鼠标事件

• 鼠标按下 onmousedown
• 鼠标弹起 onmouseup
• 鼠标移出 onmouseout
• 鼠标移进 onmouseover
• 鼠标移动 onmousemove
• 鼠标悬停 onmouseenter
• 鼠标取消悬停 onmouseleave

代码展示:

box.onmousedown = function() {
    console.log('鼠标按下了');
}
box.onmouseup = function() {
    console.log('鼠标弹起了');
}
box.onmouseout = function() {
    console.log('鼠标移出了');
}
box.onmouseover = function() {
    console.log('鼠标移进了');
}
box.onmouseenter = function() {
    console.log('鼠标悬停了');
}
box.onmouseleave = function() {
    console.log('鼠标取消悬停了');
}

mouseover 和 mouseenter的区别是：

• 1. mouseover：元素的子元素移入也会触发事件 （子元素会触发第二次）
• 2. mouseenter： 元素的子元素移入不会触发事件 （子元素不会触发)

(2). 键盘事件

• 键盘按下：onkeydown
• 键盘弹起： onkeyup
• 按下之后弹起之前：onkeypress

代码展示:

window.onkeydown = function() {
    console.log('键盘按下');
}
window.onkeyup = function() {
    console.log('键盘弹起');
}
window.onkeypress = function() {
    console.log('按下之后弹起之前');
}

(3). HTML事件

• 页面加载事件：onload 提交按钮触发事件，一般应用于元素表单form
• 失去焦点事件：onblur
• 获取焦点事件：onfocus（常用于input）

代码展示:

window.onload = function() {
console.log('页面加载了');
}

document.getElementById('form').onsubmit = function() {
    console.log('提交了');
}

document.getElementById('input').onfocus = function() {
    console.log('获取焦点');
}
document.getElementById('input').onblur = function() {
    console.log('失去焦点');
}

(4).补充html方法（重点）

• onchange 修改  当里面的值value发生变化以后 失去焦点的时候触发  加给表单元素
• onscroll 滚动栏滚动
• onselect 选择 (一般用于复制粘贴 input textarea)

代码展示:

text.onchange = function() {
    console.log('修改事件');
}

window.onscroll = function() {
    var scroll = document.documentElement.scrollTop || document.body.scrollTop
    console.log(srcoll);
}

var textarea = document.getElementById('textarea')
textarea.onselect = function() {
    console.log('选择了');
}

2.event的相关属性和方法：

• event对象是事件源触发事件后传递给事件处理程序的对象，位于事件处理函数参数的第一个位置，携带着很多有用的信息。

• 属性	描述
  type	返回事件类型的字符串
  target/srcElement(ie)	返回触发事件的dom元素
  currentTarget	返回绑定事件的dom元素，等同于this
  relatedTarget/fromElement(ie)	返回鼠标移入移出时临近绑定事件元素的那个dom元素
  data	传递给事件的额外数据。格式：数字，字符串，数组，obj
  pageX/pageY	相对于页面原点(document)的水平/垂直位置
  screenX/screenY	相对于显示器屏幕的水平/垂直位置
  clientX/clientY	相对于页面视口(可见窗口)的水平/垂直位置
  timeStamp	触发事件的时间戳
  button	左中右键(012)
  which	获取鼠标点击事件或键盘事件对应的左中右键(123)或键盘码
  keyCode	键盘事件的键盘码
  crtlKey/shiftKey/altKey	目标按钮

• 方法	描述
  stopPropagation()	阻止冒泡
  prevetDefault()	阻止网页默认行为：超链接调转、submit的提交，文本输入

1.鼠标的事件源对象

div.onmousedown = function(e) {
e = e || window.event //e表示事件源对象
    //鼠标点击的键 button 0表示左键  1表示滚轮  2表示右键
console.log(e.button); 
console.log(e.target); //目标元素 显示是div 
console.log(e.type); //事件类型 click 
console.log(e.x); //获取鼠标的x坐标 基于可视区域 
console.log(e.y); //获取鼠标的y坐标 基于可视区域 
console.log(e.pageX); //获取鼠标的x坐标 基于页面的可视区域 
console.log(e.pageY); //获取鼠标的y坐标 基于页面的可视区域 
console.log(e.offsetX); // 获取鼠标的x坐标 基于div偏移的x 离div这个盒子的左上角顶点 
console.log(e.offsetY); // 获取鼠标的y坐标 基于div偏移的y 离div这个盒子的左上角顶点 
console.log(e.screenX); //screen获取屏幕信息 在屏幕上的x 
console.log(e.screenY); //screen获取屏幕信息 在屏幕上的y 
console.log(e.clientX); //获取鼠标的x坐标 基于当前可视区域的x  
console.log(e.clientY); //获取鼠标的x坐标 基于当前可视区域的y  
console.log(e.path); //元素路径
console.log(e.ctrlKey); //判断是否按着ctrl键 按着为true 没有为false 
console.log(e.shiftKey); //判断是否按着shift键 按着为true 没有为false 
console.log(e.altKey); //判断是否按着alt键 按着为true 没有为false 
}

2.键盘的事件源对象

window.onkeydown = function(e) {
e = e || window.event
console.log(e.key); //获取按键的值 
console.log(e.code); //获取按键 
console.log(e.keyCode); //获取按键的ascii码 不区分大小写（只返回大写）
console.log(); //判断是否按着ctrl键 按着为true 没有为false
console.log(e.shiftKey); //判断是否按着shift键
console.log(e.altKey); //判断是否按着alt键
console.log(e.charCode); //字符编码 只有在按字符的时候才有 一般是加给keypress事件
console.log(e.target); //目标元素 显示是body
console.log(e.type); //事件类型 keyDown
}

3.在弹起之间按下之后 针对字符按键 charCode只在这里有效（其他按键不会执行）

window.onkeypress = function(e) {
    console.log('调用了');
    console.log(e.charCode); //他会返回对应的字符的编码 ascii码   区分大小写 
}

这篇博客引用了作者为”乐之者java“以及”快乐的小火猴“的文章
原文链接为:CSDN-乐之者java , CSDN-快乐的小火猴