事件三要素

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

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

鼠标事件

1.事件源

2.事件类型

3.事件处理

<button>点击</button>//要用它进行点击，他就是事件源

 <script> 
    var button = document.getElementsByTagName("button")//获取事件源
   
    button.onclick =function(){
       console.log('hello');
}


</script>

onclick 事件类型


function(){}   事件处理，通过一个函数赋值的方式完成

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

单 点击 onclick

双击 ondblclick

移动相关 事件名以mouse开头

鼠标按下 onmousedown

鼠标弹起 onmouseup 鼠标移出 onmouseout

鼠标移进 onmouseover

鼠标移动 onmousemove

鼠标悬停 onmouseenter

鼠标取消悬停 onmouseleave

失去焦点 onblur

获取焦点 onfocus （常用于input）

mouseover和 mouseenter的区别是: mouseover: 元素的子元素移入也会触发事件 (子元素会触发第二次)

mouseenter : 元素的子元素移入不会触发事件 (子元素不会触发)

键盘事件

一般操作是给整体加

window.onkeydown键盘按下

window.onkeyup键盘弹起

window.onkeypress按下之后弹起之前

HTML的事件

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

键盘的事件源对象

 window.onkeydown = function(e){
     e = e || windwo.event
     console.log(e.key); //获取按键的值 17
     console.log(e.code); //获取按键 18
     console.log(e.keyCode); //获取按键的ascii码 不区分大小写（只返回大
     console.log(e.ctrlKey); //判断是否按着ctrl键 按着为true 没有为fals
     console.log(e.shiftKey); //判断是否按着shift键
     console.log(e.altKey); //判断是否按着alt键
     console.log(e.charCode); //字符编码 只有在按字符的时候才有 一般是
     console.log(e.target); //目标元素 显示是body
     console.log(e.type); //事件类型 keyDown
 }
 //在弹起之前按下之后 针对字符按键  charCode只在这里有效（其他按键不会
 window.onkeypress = function(e){
     console.log('调用了');
     console.log(e.charCode); //他会返回对应的字符的编码 ascii码   区分
 }

鼠标的事件源对象

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这个
     console.log(e.offsetY); //获取鼠标的y坐标  基于div偏移的y  离div这
     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 没有为fals
     console.log(e.shiftKey); //判断是否按着shift键 15
     console.log(e.altKey); //判断是否按着alt键 16
 }