JavaScript事件简介
什么叫事件
当点击一个按钮的时候，会弹出一个对话框。在JavaScript中，
“点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事。
事件三要素
事件源 -触发事件的元素 ->如 按钮
事件类型 -事件如何触发:点击、双击、移动等等 ->如 click点击事件
事件处理函数 -事件可以做什么
<button>按钮</button> //事件源var btn = document.querySelector('button')
btn.onclick = function(){ //onclick事件类型
lert('弹出内容') //function() 事件函数
}事件对象event
什么是事件对象
处理事件与事件相关的
如何创建
由系统创建，当触发事件时，自动生成一个事件对象 duix
获取事件对象
在事件处理函数中获取名为event的事件对象
更改事件对象名
事件处理函数定义一个形参用来接受事件对象
事件对象兼容性
IE浏览器：e = e || window.event
<button>按钮</button>var btn = document.querySelector('button')
btn.onclick = function (e) { // e=event e是形参 可以写成任何名字
e = e || window.event // 兼容ie写法 e = e相当于给event重命名
console.log(e)
}事件对象位置属性
相对元素自身坐标（点击的元素）offsetX,offsetY
相对于浏览器窗口(clientX,clientY) //就是点击位置距离浏览器窗口的位置
相对于页面(pageX,pageY) //滑动的位置也算在其中
<div></div>var divEle = document.querySelector('div')
/*
绑定点击事件
1.事件源 div元素
2.事件类型 事件类型名click
3.事件处理函数
事件对象 event
*/
divEle.onclick = function(e){
e = e || window.event // 获取事件对象
console.log('offsetX :',e.offsetX, ' offsetY :',e.offsetY) // 相对自身坐标
console.log('clientX :',e.clientX, ' clientY :',e.clientY) // 相对浏览器窗口
console.log('pageX :',e.pageX, ' pageY :',e.pageY) // 相对页面窗口
}*{padding: 0;margin: 0;}
div{
width: 200px;
height: 1200px;
background-color: skyblue;
margin: 100px;
}常见的事件
鼠标事件**
mouseover 鼠标移入
mouseout 鼠标移出
mousemove 鼠标移动
.onmouseover/.onmouseout/ .onmousemove = function(){}
<div>前端编程</div>/*
鼠标移入div区块，字体颜色变为红色
复杂问题简化
分解：
1. 鼠标移入div区块
div.onmouseover = function(){
改变字体颜色
}
2. 字体颜色变为红色
div.style.color = 'red'
*/
var divEle = document.querySelector('div')
// 鼠标移入
divEle.onmouseover = function(){
divEle.style.color = 'red'
}
// 鼠标移出
divEle.onmouseout = function(){
divEle.style.color = 'blue'
}
// 鼠标移动
divEle.onmousemove = function(e){
// 事件对象
e = e || window.event
//打印鼠标(光标)位置
console.log(e.offsetX, e.offsetY)
} *{padding: 0;margin: 0;}
div{
width: 200px;
height: 40px;
background-color: skyblue;
text-align: center;
line-height: 40px;
color: blue;
}*{padding: 0;margin: 0;}
div{
width: 500px;
height: 500px;
background-color: skyblue;
margin: 100px;
position: relative;
}
p{
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
text-align: center;
line-height: 100px;
display: none; /*隐藏 */
/*鼠标移入元素 事件不起作用 解决闪动问题*/
pointer-events: none;
}<div>
<p>提示信息</p>
</div>小块随鼠标移动案例
/*
鼠标移入div显示p区域
*/
var divEle = document.querySelector('div')
var pEle = document.querySelector('p')
divEle.onmouseover = function(){
pEle.style.display = 'block'
}
/*
移出隐藏
*/
divEle.onmouseout = function(){
pEle.style.display = 'none'
}
/*
p小区块随光标在大区块div中移动
获取光标位置坐标赋值给小区块
1. 获取光标位置
当光标在大区块移动时，获取坐标
2. 如何让元素到指定位置
父 相对定位
子 绝对定位
新需求
1.鼠标在保持小区域中间
2. 小区块不能移出大区块
*/
divEle.onmousemove = function(e){
e = e || window.event //事件对象
var x = e.offsetX - pEle.clientWidth/2 // 相对自身位置
var y = e.offsetY - pEle.clientHeight/2 //减去小盒子自身高的一半 得到光标在小盒子正中
//边界检查
if(x<0){
x = 0
}
if(x > (divElem.clientWidth - pEle.clientWidth) ){
x =( divElem.clientWidth - pEle.clientWidth )
}
if(y<0){
y = 0
}
if(y > (divElem.clientHeight - pEle.clientHeight) ){
y =( divElem.clientHeight - pEle.clientHeight )
}
pEle.style.top = y + 'px'
pEle.style.left = x + 'px'
}鼠标点击案例
// 左键按下
document.onmousedown = function () {
console.log('mousedown')
// 鼠标移动事件
document.onmousemove = function (e) {
e = e || window.event
console.log('x : ', e.clientX, ' y :', e.clientY)
}
}
// 左键抬起
document.onmouseup = function () {
console.log('mouseup')
document.onmousemove = null
}鼠标点击拖动小块案例
<div></div> *{padding: 0;margin: 0;}
div{
position: relative;
width: 100px;
height: 100px;
background-color: skyblue;
}/*按在div上，div区块随光标一起移动，抬起div区块停止移动*/
var divEle = document.querySelector('div')
// 左键按下
divEle.onmousedown = function () {
console.log('mousedown')
// 鼠标移动事件
document.onmousemove = function (e) {
e = e || window.event
var x = e.clientX
var y = e.clientY
console.log('x : ', e.clientX, ' y :', e.clientY)
divEle.style.left = x + 'px'
divEle.style.top = y + 'px'
}
}
// 左键抬起
document.onmouseup = function () {
console.log('mouseup')
document.onmousemove = null
}form表单事件**
表单提交事件
- 表单提交事件-默认行为
1. 触发表单提交事件
- submit 是表单form元素 input等等只是表单项
- .onsunbmit = function(){}
作用:
- 表单验证
- - 非空验证：表单输入框内容不能为空
2. 默认行为
执行action属性指定的url地址跳转，同时获取表单输入框内容以名称值对形式做为参数传递
- https://www.xxx.com/?username=admin&password=123
阻止表单默认行为
- e.preventDefault() 阻止自动跳转页面等等
<form action="">
<input type="text" placeholder="请输入用户名" name="username" /><br />
<input type="password" placeholder="请输入密码" name="password" /><br />
<input type="submit" value="确定" id="login" />
</form>//表单form提交事件
formEle.onsubmit = function (e) {
e = e || window.event // 事件对象
e.preventDefault() // 阻止表单form默认行为
//表单非空验证
var username = usernameInput.value
var password = passwordInput.value
if (username === '') {
alert('用户名不能为空!')
return //为空不执行默认行为
} else if (password === '') {
alert('密码不能为空!')
return //为空不执行默认行为
}
// 用户名密码验证
if(username == 'admin' && password == '123'){
location.href = './index.html' // 表单验证通过 才能跳转到主界面
}else{
alert('用户名或密码出错!')
}
}input事件
.oninput = function(){ } 获取input输入框内容
* {
padding: 0;
margin: 0;
}
form {
width: 500px;
background-color: skyblue;
margin: 100px auto;
padding: 50px;
}
form input {
width: 100%;
line-height: 40px;
margin-top: 20px;
}
#login {
height: 40px;
}<form action="">
<input type="text" placeholder="请输入用户名" name="username" /><br />
<input type="password" placeholder="请输入密码" name="password" /><br />
<input type="file" name="headerimg">
<input type="submit" value="确定" id="login" />
</form>var usernameInput = document.querySelector('input[name="username"]')
usernameInput.oninput = function(){
console.log(usernameInput.value) //打印input框里输入的值，按一个打一个
}内容转变事件
.onchange = function(){}
var headerInput = document.querySelector('input[name="headerimg"]')
headerInput.onchange = function(){
alert('change')
}焦点事件
focus 获取焦点事件
blur 失去焦点事件 [可用于表单验证，用户名密码为空时提醒]
- .onfocus / .οnblur= function(){}
<form action=""> <input type="text" placeholder="请输入用户名" name="username" /><br /> <input type="password" placeholder="请输入密码" name="password" /><br /> <input type="file" name="headerimg"> <input type="submit" value="确定" id="login" /> </form>var usernameInput = document.querySelector('input[name="username"]') usernameInput.onfocus = function(){ console.log('获取焦点') } usernameInput.onblur = function(){ console.log('失去焦点') var username = usernameInput.value if(username === ''){ alert('用户名不能为空!') } }
键盘事件
只给能在页面上选中的元素（表单元素） 和 document 来绑定键盘事件
注:不能给页面上一个 div 元素，设置键盘事件的
keyup 抬起
keydown 按下
keypress 按住
- .onkeyup / .onkeydown / .onkeypress = function(){}
keycode 键码
- 兼容性写法 which e.keycode || e.which
<h2>键盘事件</h2>document.onkeyup = function(e){ e = e || window.event // 兼容ie var keyCode = e.keyCode || e.which // 兼容FireFox2.0 if(e.ctrlKey && keyCode === 32){ alert('登录成功') //如果键盘按的enter则显示登陆成功 } }
组合按键
- altKey +
- shiftKey +
- ctrlKey +
浏览器相关事件 [window对象]
load 文档加载完成事件
- window.onload = function(){} html文档加载完成后执行
<div>元素一</div>div{ height: 1200px; }window.onload = function () { // 这里面的代码，是html文档加载完成之后执行 var divEle = document.querySelector('div') console.log(divEle) divEle.innerHTML = '新内容' }
scroll 滚动事件
- window.onscroll = function(){}
// 浏览器窗口滚动事件 window.onscroll = function(){ console.log(document.documentElement.scrollTop) }
resize 窗口尺寸改变事件
- window.onsresize = function(){}
window.onresize = function(){ // 显示窗口尺寸 console.log('w ',window.innerWidth, ' h ',window.innerHeight) }
触摸事件[移动端]
document事件源
touchstart 触摸开始事件 (事件项)
touchend 触摸结束事件
touchmove 触摸移动事件
*{padding: 0;margin: 0;}
div{
width: 100%;
height: 100vh;
background-color: skyblue;
}<div>元素一</div>document.ontouchstart = function(){
console.log('touchstart');
}
document.ontouchmove = function(e){
e = e || window.event
console.log('touchmove',e); //打印按住时滑动的位置
}
document.ontouchend = function(){
console.log('touchend');
}
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
