js事件的详细介绍
11.事件
1.什么是事件
js属于事件驱动编程,把'驱动',执行,调用
通过一些交互,触发一些函数
事件:发起-->执行
绑定事件-->触发事件
on 绑定 emit触发 off解绑
2.事件分类
鼠标事件
点击事件 onclick
双击事件 ondblclick
按下事件 onmousedown
抬起事件 onmouseup
鼠标进入事件 onmouseenter
鼠标离开事件 onmouseleave
onmouseleave,onmouseenter遇到子元素,不会触发
鼠标移动事件 onmousemove
鼠标进入事件 onmouseover
上面两个遇到了子元素,会触发
鼠标离开事件onmouseout
鼠标滚轮 onmousewheel
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
.inner{
width: 100px;
height: 100px;
background-color: pink;
}
style>
head>
<body>
<div class="box">
<div class="inner">
div>
div>
<script>
var box = document.querySelector(".box");
// 1.单件事件 onclick
// box.onclick = function () {
// alert(123)
// }
// 会覆盖前面的onclick事件
box.onclick = function () {
console.log("onclick");
}
// 鼠标点击盒子,就会触发, 就像onclick+(),执行
// 2.双击
box.ondblclick = function () {
console.log("ondblclick");
}
// 3.鼠标按下 onmousedown先执行,再执行onclick
box.onmousedown = function () {
console.log("onmousedown");
}
// 4.鼠标抬起onmousedown先执行,再执行onmouseup,最后onclick
box.onmouseup = function () {
console.log("onmouseup");
}
// 5.鼠标滚动事件
box.onmousewheel = function () {
console.log("滚轮....onmousewheel");
}
// 6.鼠标进入
box.onmouseenter = function () {
console.log("onmouseenter 鼠标进入");
}
// 7.鼠标离开
box.onmouseleave = function () {
console.log("onmouseleave 鼠标离开");
}
// 8.鼠标进入
box.onmouseover = function () {
console.log("onmouseover 鼠标进入");
}
// 9.鼠标离开
box.onmouseout = function () {
console.log("onmouseout 鼠标离开");
}
// 1.
// onmouseover 优先于onmouseenter
// onmouseout优先于onmouseleave
// 2.onmouseover 和onmouseout 遇到子元素也会触发
// onmouseenter 和onmouseleave 遇到子元素不会触发
// 10.鼠标移动
box.onmousemove = function () {
console.log("onmousemove 鼠标移动");
}
script>
body>
html>
键盘事件
键盘按下 onkeydown 获取不到输入框的完整内容,能防止别人误输入
键盘抬起 onkeyup 输入完成 后抬起,抬起的时候,就能获取输入的内容
非功能键 onkeypress 非功能键有用
html事件
onload 页面加载 并且外部资源也加载完成后,触发
ounload 卸载
onresize改变窗口大小事件
onselect 文本框选中事件
onchange 文本框改变内容事件
oninput 文本框输入事件
onfocus 光标聚焦事件
onblur 失去焦点
onwheel滚轮事件
onerror错误事件
onscroll 滚动条事件
oncontextmenu 右击菜单事件
表单**
onsubmit 提交
- .会触发js onsubmit事件
- return false;//阻止表单的默认行为,不让表单提交
onreset 重置
3.js的事件模式
内联模式(不推荐)
脚本模式(重点)
当一个元素上,绑定了内联模式与脚本模式时,脚本模式优先
4.事件对象
1.什么是事件对象
在交换时,产生一条记录对象
2.事件对象的默认写法
var e=evt||window.event;
window.event ie6+
evt google 重点掌握
3.事件对象的属性
// button 监听按下了哪个键
// type 事件的类型
// charCode 字符编码
// keyCode 按键编码
// target 和srcElement
// altKey
// shiftKey
// metaKey
// clientX,clientY 客户
// pageX,pageY 页面
// screenX,screeY 屏幕
// offsetX,offsetY 偏移
// stopPropagation()//停止冒泡
// cancelBubble=true//取消冒泡
// preventDefault()//阻止默认行为
// returnValue=false//阻止默认行为
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
html,
body {
height: 500%;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
}
style>
head>
<body>
<div class="box">
div>
<script>
/*
e.button onmousedown 0左键 1 滚轮键 2 右键
e.keyCode 没有小写 全是大写,13是回车键 37 38 39 40 左上右下
e.key //按键的字符
e.clientX,e.clientY 鼠标点击的点,到当前浏览器的左上角的距离
e.pageX,e.pageY 鼠标点击的点,到页面左上角的距离
e.offsetX,e.offsetY 鼠标点击的点,到当前元素左上角的距离
e.screenX,e.screenY 鼠标点击的点,到当前屏幕左上角的距离
e.target e.srcElement 鼠标点击的目标元素,target不一定等于this
e.type 事件的类型,返回值不带on,列如onclick--click
e.altKey 是否按下了shiftKey
e.ctrlKey 是否按下了CtrlKey
e.metaKey window(win键)
*/
window.onmousedown = function (evt) {
var e = evt || window.event
// console.log(e.button);//onmousedown 0左键 1 滚轮键 2 右键
}
window.onkeydown = function (evt) {
var e = evt || window.event
// 没有小写 全是大写,13是回车键 37 38 39 40 左上右下
// console.log(e.keyCode);
console.log(e.key);//按键的字符
}
var box = document.querySelector(".box")
box.onclick = function (evt) {
var e = evt || window.event;
console.log(e.clientX, e.clientY);
console.log(e.pageX, e.pageY);
console.log(e.offsetX, e.offsetY);
console.log(e.screenX, e.screenY);
console.log(e.target, this);
console.log(e.type);
console.log(e.altKey);
console.log(e.shiftKey);//按住shift 就返回true 否则false
console.log(e.ctrlKey);
console.log(e.metaKey);
}
script>
body>
html>
5.事件流
当元素叠到一起,点某一个元素,事件会传递
传递分为2个过程 冒泡和捕获
事件流有三个阶段 冒泡-目标-捕获
冒泡:从内到外传递事件
捕获 从外往内传递事件
6.事件的默认行为
- 表单,提交,重置行为
- a标签,跳转的行为
- 图片,拖拽的行为
- 右击菜单,显示菜单的行为
阻止默认行为
-
return false 重点
-
preventDefault()重点
-
returnValue=false了解
-
兼容写法 了解
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
7.事件的监听
addEventListener(“事件类型”,函数,true/false)
capture 捕获
once 1次
addEventListener 默认是冒泡,就需要把第3个参数,设置true
addEventListener和removeEventListener的第3个参数,统一为true或false
8.三大家族
三大家族 "DOM"的属性,而offsetX,offsetY是"事件"对象的属性
offsetParent 找带有就近定位的父元素,如果父级们没有定位,默认找body 返回dom对象
offsetLeft,offsetTop 获取当前元素到带有定位父元素的距离,默认到body的距离 返回数值
offsetWidth offsetHeight 获取自身元素的宽与高=自身宽高+padding+border,就是不包含margin 返回数值
parentNode 找亲父元素(上一层)
offsetParent 找带有就近定位的父元素,如果父级们的没有定位,默认找body
9.案例盒子拖拽
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 200px;
height: 200px;
background-color: green;
/* 位置移动 */
position: absolute;
}
style>
head>
<body>
<div class="box">
div>
<script>
var box = document.querySelector(".box")
// 给盒子绑定鼠标按下事件
box.onmousedown = function (e) {
// 获取拖动的点到盒子起始点的位置
var disX = e.pageX - this.offsetLeft
var disY = e.pageY - this.offsetTop;
// 在按下鼠标的同时,拖动盒子,绑定鼠标移动事件
document.onmousemove = function (e) {
box.style.left = e.pageX - disX + "px"
box.style.top = e.pageY - disY + "px"
}
// 鼠标松开不移动 清空绑定的移动事件
// 文档的任何位置松开
document.onmouseup = function (e) {
box.onmouseup = document.onmousemove = null
}
}
script>
body>
html>