js事件是指我们使用鼠标或键盘做了某些事件来触发对应的处理函数。所有的事件都是以on开头,分为三类:鼠标事件,键盘事件,HTML事件。由三部分组成:触发事件的元素,对应的事件,事件的处理函数。分为以下四种模式:
内联模式1
<button onclick="alert('hello')">点击</button>
内联模式2
<button onclick="自己定义的函数名( )">点击</button>
脚本模式1
doucument.getElementByTagName('button')[0].onclick=function(){
console.log('hello')
}
脚本模式2
function handlerClick(){
console.log('hello');
}
doucument.getElementByTagName('button')[0].onclick=handlerClick
鼠标事件:鼠标的一切操作都是鼠标事件,如点击,移动,滚轮。
1,点击相关:点击click和双击dblclick
var box = document.getElementById('box');
box.onclick = function(){
console.log('点击了');
}
box.ondblclick = function(){
console.log('双击');
}
2,移动相关:事件名以mouse开头,
box.onmousedown = function(){
console.log('鼠标按下了');
}
box.onmouseup = function(){
console.log('鼠标弹起了');
}
box.onmouseout = function(){
console.log('鼠标移出了');
}
box.onmouseover = function(){
console.log('鼠标移进了');
}
box.onmousemove = function(){
console.log('鼠标移动了');
}
box.onmouseleave = function(){
console.log('鼠标取消悬停了');
}
box.onmouseenter = function(){
console.log('鼠标悬停了');
}
键盘事件
一般操作是给整体加onkeydown键盘按下,onkeyup键盘弹起,onkeypress按下之后弹起之前。
window.onkeydown = function(){
console.log('键盘按下');
}
window.onkeyup= function(){
console.log('键盘弹起');
}
window.onkeypress = function(){
console.log('按下之后弹起之前');
}
html事件
页面加载事件,默认触发的,执行一次。
window.onload = function(){
console.log('页面加载了');
}
onsumit事件,提交按钮触发的事件,一般触发的元素是表单form
document.getElementById('form').onsubmit = function () {
console.log('提交了');
}
失去焦点onblur 获取焦点onfocus(常用于input)
document.getElementById('input').onblur = function(){
console.log('失去焦点');
}
document.getElementById('input').onfocus = function(){
console.log('获取焦点');
}
onchange 修改,当里面的值value发生变化以后失去焦点以后触发,加给表单元素
var text = document.getElementById('text')
text.onchange = function(){
console.log('修改事件');
}
onscroll 滚动栏滚动
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop
console.log(scroll);
}
onselect 选择 (一般用于复制粘贴 input text area)
var textarea = document.getElementById('textarea')
textarea.onselect = function(){
console.log('选择了');
}
unload卸载 页面被卸载的时候 组件被卸载
window.unload = function(){
console.log('页面卸载了');
}
reset重置的时候 加给form
ocument.getElementsByTagName('form')[0].onreset = function(){
console.log('重置');
}
事件源对象
function里面是可以使用arguments来获取参数数组的
document.getElementsByTagName('button')[0].onclick = function(){
//获取参数 发现对应的arguments里面只有一个参数 这个参数类型为 pointerEvent
//这个pointerEvent是什么? 坐标事件源
console.log(arguments);
console.log(arguments[0]); //获取的是一个pointerEvent 可以获取坐标 x: 34 y: 18 就是我们鼠标的坐标
//鼠标事件中
console.log(arguments[0].x); //x坐标
console.log(arguments[0].y); //y坐标
console.log(arguments[0].target); //获取触发的元素
console.log(arguments[0].type); //触发的事件
//加在键盘事件
console.log(arguments[0].altKey); //是否按了alt键 是返回true不是返回false
console.log(arguments[0].shiftKey); //是否按了shift键 是返回true不是返回false
console.log(arguments[0].ctrlKey); //是否按了ctrl键 是返回true不是返回false
//这个arguments[0]其实是拿到了我们对应的事件源对象
//但是像上面这样写太长了 所以我们有内置的事件源对象 window.event
// 鼠标按下的是那边的 0左 1滚轮 2右
console.log(arguments[0].button);
}
//KeyboardEvent的事件源对象 键盘事件源 他也是个event
window.onkeyup = function(e){ //e是形参 随便写 一般建议写e(规范)
// console.log(arguments[0]); e是不是就相当于arguments[0] //获取第一个参数
console.log(e);
console.log(window.event); //window.event的对象其实就是这个e
e = e || window.event //window.event写后面 拿到的就是事件源对象 常用写法
console.log(e.code); //获取你按下的键
console.log(e.key); //获取你按下键的值
console.log(e.keyCode); //获取按键的ascii吗
console.log(e.altKey); //是否按下的是alt键 不常用
console.log(e.shiftKey);
console.log(e.ctrlKey);
}
event的相关属性
鼠标的事件源对象
var div = document.getElementsByTagName('div')[0]
//鼠标的事件源对象
div.onmousedown = function(e){
e = e || window.event //e表示事件源对象
//鼠标点击的键 button 0表示左键 1表示滚轮 2表示右键
console.log(e.button);//1
console.log(e.target); //目标元素 显示是div 2
console.log(e.type); //事件类型 click 3
console.log(e.x); //获取鼠标的x坐标 基于可视区域 4
console.log(e.y); //获取鼠标的y坐标 基于可视区域 5
console.log(e.pageX); //获取鼠标的x坐标 基于页面的可视区域 6
console.log(e.pageY); //获取鼠标的y坐标 基于页面的可视区域 7
console.log(e.offsetX); //获取鼠标的x坐标 基于div偏移的x 离div这个盒子的左上角顶点(不会计算margin) 8
console.log(e.offsetY); //获取鼠标的y坐标 基于div偏移的y 离div这个盒子的左上角顶点 9
console.log(e.screenX); //screen获取屏幕信息 在屏幕上的x 10
console.log(e.screenY); //screen获取屏幕信息 在屏幕上的y 11
console.log(e.clientX) //获取鼠标的x坐标 基于当前可视区域的x 12
console.log(e.clientY) //获取鼠标的x坐标 基于当前可视区域的y 13
console.log(e.path) //元素路径
console.log(e.ctrlKey); //判断是否按着ctrl键 按着为true 没有为false 14
console.log(e.shiftKey); //判断是否按着shift键 15
console.log(e.altKey); //判断是否按着alt键 16
}
键盘的事件源对象
window.onkeydown = function(e){
e = e || windwo.event
console.log(e.key); //获取按键的值 17
console.log(e.code); //获取按键 18
console.log(e.keyCode); //获取按键的ascii码 不区分大小写(只返回大写)19
console.log(e.ctrlKey); //判断是否按着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码 区分大小写 20
}