JavaScript--事件基础属性及方法

事件讲解

内联模式 直接在标签内容以指定属性的方式 较少

<button onclick="alert('hello')">点击</button>

内联模式 直接在标签内容以指定属性的方式 常用1

<button onclick="handlerClick()">点击1</button>
<button>点击2</button>
<button>点击3</button>

代码：
function handlerClick() {
    console.log('hello');
}

onclick是事件  表示点击事件 执行的操作
function是处理的函数 表示我们要做的事情 脚本模式 （使用比较多 js和html分离 规范 常用2）
document.getElementsByTagName('button')[2].onclick = function() {
    	console.log('hello');
	}
	
触发事件的元素  document.getElementsByTagName('button')[2]
对应的事件 onclick
处理函数 function(){}
document.getElementsByTagName('button')[3].onclick = handlerClick //不需要加() 加括号会自动执行 常用3
触发事件的元素 document.getElementsByTagName('button')[3]
事件 onclick
处理函数 handlerClick
事件由三部分组成 触发事件的元素  对应的事件函数 事件的处理函数
事件函数的特点 全小写且以on开头 onclick on事件开头  click是事件名 点击

js事件是指我们使用鼠标或者键盘做了某些事件来触发对应的处理函数

事件由三部分组成 触发事件的元素 对应的事件函数 事件的处理函数

事件函数的特点 全小写且以on开头 onclick on事件开头 click是事件名 点击

事件分为三类：鼠标事件  键盘事件  html事件

鼠标事件：

鼠标事件  鼠标的一切 操作都是鼠标事件
点击 移动 滚轮

var box = document.getElementById('box')
//点击相关 点击 click 和双击 dblclick
box.onclick = function() {
console.log('点击了');
}
box.ondblclick = function() {
    console.log('双击');
}

//移动相关 事件名以mouse开头   鼠标按下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的区别是：

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

键盘事件：

键盘事件  一般操作时给整体加  

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

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

html事件

页面加载事件 默认触发的 执行一次

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

onsubimt事件 提交按钮触发的事件 一般触发的元素时表单form

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

失去焦点onblur    获取焦点onfocus （常用于input）

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

补充html方法

var text = document.getElementById('text')

重点 onchange 修改  当里面的值value发生变化以后 失去焦点的时候触发  加给表单元素

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

重点 onscroll 滚动栏滚动

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

半重点 onselect 选择 （一般用于复制粘贴 input textarea）

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

了解就行的

unload 卸载  页面被卸载的时候 组件被卸载

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

onreset 重置的时候 加给form

document.getElementsByTagName('form')[0].onreset = function() {
    console.log('重置');
}

event的相关属性

var div = document.getElementsByTagName('div')[0]

鼠标的事件源对象

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 
}

键盘的事件源对象

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
}

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

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