JavaScript事件

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

onclick 是事件 表示点击事件 执行的操作
​
function是处理的函数 表示我们要做的事情

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

<button οnclick='alert('hello')'>点击</button>    
​
​
<button οnclick='handlerClick'>点击1</button> 
function handlerClick(){
    console.log('hello')
}(常用1)
​
<button >点击2</button>   
<button >点击3</button>   

脚本模式(使用比较多 js和html分离 规范)

document.getElementsByTagName('button')[2].onclick = function(){
    console.log('hello')
}
​
​
document.getElementsByTagName('button')[3].onclick = handlerClick //不需要加() 加括号会自动执行 

事件组成

1.触发事件的元素

2.对应的事件函数 事件函数的特点全小写并以on开头 ex:onclick on事件的开头 click是事件名 点击

3.执行函数(处理函数)

事件的分类

鼠标事件 鼠标的一切操作都是鼠标事件(点击 双击 移动 滚轮)滚轮用的不多

点击相关 点击和双击(onclick和ondblclick)

box.onclick = function(){
​
  console.log('点击了')
​
}
​
box.ondblclick = function(){
    console.log('双击了')
}

移动相关 事件名以mouse开头

onmousedown 鼠标按下 onmouseup 鼠标弹起

onmouseout 鼠标移出 onmouseover 鼠标移进

onmousemove 鼠标移动

onmouseleave 鼠标取消悬停了 onmouseenter 鼠标悬停了

onmouseover 和 onmouseenter 的区别

onmouseover:元素的子元素移入也会触发事件(子元素会触发第二次)
onmouseenter :元素的子元素移入不会触发事件(子元素不会触发)(用的多)

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里面动
​
box.onmouseleave = function(){
    console.log('鼠标取消悬停了')
}
​
box.onmouseenter = function(){
    console.log('鼠标悬停了')
} //悬停和取消悬停和移进移出差不多
//区别在于悬停 层级
​
​

键盘事件 一般操作是给整体加(window)

onkeydown 键盘按下 onkeyup 键盘弹起

onkeypress 按下之后弹起之前

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

窗口最大最小window

html事件(html元素自带的事件)

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

onload 加载

onsubmit 提交 注意是from里面提交(input和button)

失去焦点 inblur 获取焦点 onfocus

​
window.onload = function(){
    console.log('页面加载了')
}
​
​
<form action='#' id='form'>
    <input type='submit'>
    <button type='submit'>提交        </button>
</form>
window.onsubmit = function(){
    console.log('提交了')
    //提交按钮触发的事件 input 是用from提交 不是input
}
document.getElementById('form').onsubmit = function(){
    console.log('提交了')
}
//失去焦点 inblur 获取焦点 onfocus (常用于input) 点击input获取 点外面失去
document.getElementById('input').onfocus = function(){
    console.log('获取焦点')
}
document.getElementById('input').onblur = function(){
    console.log('失去焦点')
}
​

html事件的补充

<input type="text" id="text">
<textarea name="" id="textarea" cols="30" rows="10">
        水水大大大苏打大
</textarea>
<form action="">
   <input type="reset">
</form>
    <div style="height:3000px"></div>
​
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(scroll);
}
​
//onselect 选择 (一般用于复制粘贴 input textarea) 半重点
var textarea = document.getElementById('textarea')
textarea.onselect = function(){
    console.log('选择了')
}
​
 //unload 卸载 页面被卸载的时候 组件被卸载
        window.unload = function(){
            console.log('页面卸载了');
        }
        //reset 重置的时候 加给form
        document.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);
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的相关属性

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: green;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
    <div></div>
<body>
<!-- event的相关属性 -->
<script>
//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(盒子左上为(0,0)点)
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
        }
    </script>