01-复习
事件
浏览器事件
onload onresize onsrcoll
鼠标事件
onmouseover onmouseout onclick ondblclick oncontextmenu onmouseenter onmouseleave onmousedown onmousemove onmouseup onmousewheel
键盘事件
onkeydown onkeyup
表单事件
oninput onchange onfocus onblur onsubmit
移动端事件
ontouchstart ontouchmove ontouchend
动画事件
ontransitionend onanimationend
02-事件使用
事件对象
window.event ev
键盘码
ev.keyCode ev.which
例子
<style>
.box {
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var oBox = document.querySelector('.box')
var l = 0
var t = 0
var timer = null
document.onkeydown = function (ev) {
// 事件对象
// window.event ev
// 键盘码
// ev.keyCode ev.which
if (ev.keyCode === 39) {
clearInterval(timer)
timer = setInterval(function () {
l++
oBox.style.left = l + 'px'
}, 10)
}
if (ev.keyCode === 37) {
clearInterval(timer)
timer = setInterval(function () {
l--
oBox.style.left = l + 'px'
}, 10)
}
if (ev.keyCode === 38) {
clearInterval(timer)
timer = setInterval(function () {
t--
oBox.style.top = t + 'px'
}, 10)
}
if (ev.keyCode === 40) {
clearInterval(timer)
timer = setInterval(function () {
t++
oBox.style.top = t + 'px'
}, 10)
}
}
document.onkeyup = function () {
clearInterval(timer)
}
</script>
</body>
03-键盘组合事件
组合键
- ctrlKey shiftKey altKey
<body>
嘿嘿嘿
<script>
document.onkeydown = function (ev) {
// console.log(ev)
// 组合键
// - ctrlKey shiftKey altKey
if (ev.ctrlKey && ev.keyCode === 67) {
alert('你不是VIP中P,得交钱!!!')
// 阻止 浏览器的一些默认行为
return false
// ev.preventDefault()
}
}
</script>
</body>
04-键盘提交登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.form {
width: 400px;
padding: 20px;
margin: 100px auto;
box-shadow: 0 0 10px #ccc;
border-radius: 10px;
}
.form-group {
position: relative;
}
.glyphicon {
position: absolute;
right: 10px;
top: 35px;
}
</style>
</head>
<body>
<div class="form">
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="text" class="form-control user" name="username" placeholder="用户名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control pass" name="password" placeholder="密码">
<i class="glyphicon glyphicon-eye-close"></i>
</div>
<button type="submit" class="btn btn-default login">登录</button>
</div>
<script>
var oLogin = document.querySelector('.form .login')
var oUser = document.querySelector('.form .user')
var oPass = document.querySelector('.form .pass')
oLogin.onclick = function () {
console.log(oUser.value, oPass.value)
alert('提交成功')
}
oPass.onkeydown = function (ev) {
if (ev.keyCode === 13) {
console.log(oUser.value, oPass.value)
alert('提交成功')
}
}
</script>
</body>
</html>
04-键盘提交登录2
小眼睛-开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.form {
width: 400px;
padding: 20px;
margin: 100px auto;
box-shadow: 0 0 10px #ccc;
border-radius: 10px;
}
.form-group {
position: relative;
}
.glyphicon {
position: absolute;
right: 10px;
top: 35px;
}
</style>
</head>
<body>
<div class="form">
<div class="form-group">
<label for="exampleInputEmail1">用户名</label>
<input type="text" class="form-control user" name="username" placeholder="用户名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control pass" name="password" placeholder="密码">
<i class="glyphicon glyphicon-eye-close"></i>
</div>
<button type="submit" class="btn btn-default login">登录</button>
</div>
<script>
var oLogin = document.querySelector('.form .login')
var oUser = document.querySelector('.form .user')
var oPass = document.querySelector('.form .pass')
var oIcon = document.querySelector('.glyphicon')
oLogin.onclick = function () {
console.log(oUser.value, oPass.value)
alert('提交成功')
}
oPass.onkeydown = function (ev) {
if (ev.keyCode === 13) {
console.log(oUser.value, oPass.value)
alert('提交成功')
}
}
// 开关
var flag = true
oIcon.onclick = function () {
// this 谁发生了事件代表的就是谁
// oIcon -> this
if (flag) {
this.className = 'glyphicon glyphicon-eye-open'
oPass.type = 'text'
} else {
this.className = 'glyphicon glyphicon-eye-close'
oPass.type = 'password'
}
flag = !flag
}
</script>
</body>
</html>
05-浏览器默认行为
<body>
表单提交 滚动 复制 粘贴 鼠标拖文字 鼠标右键菜单
<script>
// 表单提交 滚动 复制 粘贴 鼠标拖文字 鼠标右键菜单
// document.oncontextmenu = function () {
// alert(1)
// // 阻止默认行为
// return false
// }
document.onmousedown = function () {
return false
}
</script>
</body>
一、浏览器的默认行为以及阻止行为
（一）右键菜单事件：oncontextmenu；
阻止：return false；
（二）超链接的默认行为：跳转；
阻止：标准浏览器：event.preventDefault（）；
IE8及以下：event.returnValue = false；
兼容：event.preventDefault ？ event.preventDefault（） ：event.returnValue = false；
（三）浏览器的拖拽事件：ondragstart；
阻止：return false；
二、事件监听器
（一）如果绑定同一个事件，触发多个事件处理程序时，使用监听事件
（二）添加监听事件
function addEvent（obj，event，fn，false）{
if（obj.addEventListener）{
obj.addEventListener（event，fn，false）；
}else if（obj.attachEvent）{
obj.attachEvent（"on" + event，fn）；
}
}
（三）移除监听事件
function removeEvent（obj，event，fn，false）{
if（obj.removeEventListener）{
obj.removeEventListener（event，fn，false）；
}else if（obj.detachEvent）{
obj.detachEvent（"on" + event，fn）
}
}
三、事件捕获
（一）事件流
（二）事件捕获
（三）事件冒泡
四、事件委托
（一）将加到子节点上的事件加到其父节点上，作用是为了提高性能，原理是利用了事件冒泡
（二）事件源的获取
var target = event.target || event.srcElement；
五、JSON
（一）[]，如果是字符串，加双引号
（二）{"key" ："value"}
06-鼠标信息
到元素位置
console.log(ev.offsetX, ev.offsetY)
到可视区距离
console.log(ev.clientX, ev.clientY)
到页面距离
- 不兼容ie 6 7 8
console.log(ev.pageX, ev.pageY)
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var oBox = document.querySelector('.box')
oBox.onclick = function (ev) {
// 到元素位置
// console.log(ev.offsetX, ev.offsetY)
// 到可视区距离
// console.log(ev.clientX, ev.clientY)
// 到页面距离
// - 不兼容ie 6 7 8
console.log(ev.pageX, ev.pageY)
}
</script>
</body>
07-鼠标拖拽
拖拽
- 需要三个事件：onmousedown onmousemvoe onmouseup
- 元素必须是定位
- 按下事件包含移动和抬起事件
- 在整个页面上移动
- 按下存鼠标到元素的距离
- 移动鼠标到页面距离-鼠标到元素距离 = 移动距离
- 让和left top 等于移动距离
- 抬起清除移动事件
例子
<style>
.box {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">abc</div>
<script>
// 拖拽
// - 需要三个事件：onmousedown onmousemvoe onmouseup
// - 元素必须是定位
// - 按下事件包含移动和抬起事件
// - 在整个页面上移动
// - 按下存鼠标到元素的距离
// - 移动鼠标到页面距离-鼠标到元素距离 = 移动距离
// - 让和left top 等于移动距离
// - 抬起清除移动事件
var oBox = document.querySelector('.box')
oBox.onmousedown = function (ev) {
// 鼠标到元素
var oldX = ev.offsetX
var oldY = ev.offsetY
document.onmousemove = function (ev) {
// page 鼠标到页面
var x = ev.pageX - oldX
var y = ev.pageY - oldY
oBox.style.left = x + 'px'
oBox.style.top = y + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
}
return false // 阻止默认行为
}
</script>
</body>
07-鼠标拖拽2封装
<style>
.box {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">abc</div>
<div class="box">abc</div>
<script>
// 拖拽
// - 需要三个事件：onmousedown onmousemvoe onmouseup
// - 元素必须是定位
// - 按下事件包含移动和抬起事件
// - 在整个页面上移动
// - 按下存鼠标到元素的距离
// - 移动鼠标到页面距离-鼠标到元素距离 = 移动距离
// - 让和left top 等于移动距离
// - 抬起清除移动事件
var aBox = document.querySelectorAll('.box')
aBox.forEach(function (ele) {
ele.onmousedown = function (ev) {
// 鼠标到元素
var oldX = ev.offsetX
var oldY = ev.offsetY
document.onmousemove = function (ev) {
// page 鼠标到页面
var x = ev.pageX - oldX
var y = ev.pageY - oldY
ele.style.left = x + 'px'
ele.style.top = y + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
}
return false // 阻止默认行为
}
})
</script>
</body>
07-鼠标拖拽3封装
<style>
.box {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">abc</div>
<div class="box">abc</div>
<script>
// 拖拽
// - 需要三个事件：onmousedown onmousemvoe onmouseup
// - 元素必须是定位
// - 按下事件包含移动和抬起事件
// - 在整个页面上移动
// - 按下存鼠标到元素的距离
// - 移动鼠标到页面距离-鼠标到元素距离 = 移动距离
// - 让和left top 等于移动距离
// - 抬起清除移动事件
var aBox = document.querySelectorAll('.box')
aBox.forEach(function (ele) {
drag(ele)
})
function drag(ele) {
ele.onmousedown = function (ev) {
// 鼠标到元素
var oldX = ev.offsetX
var oldY = ev.offsetY
document.onmousemove = function (ev) {
// page 鼠标到页面
var x = ev.pageX - oldX
var y = ev.pageY - oldY
ele.style.left = x + 'px'
ele.style.top = y + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
}
return false // 阻止默认行为
}
}
</script>
</body>
07-鼠标拖拽4限制范围
范围是浏览器窗口
<style>
.box {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">abc</div>
<!-- <div class="box">abc</div> -->
<script>
// 拖拽
// - 需要三个事件：onmousedown onmousemvoe onmouseup
// - 元素必须是定位
// - 按下事件包含移动和抬起事件
// - 在整个页面上移动
// - 按下存鼠标到元素的距离
// - 移动鼠标到页面距离-鼠标到元素距离 = 移动距离
// - 让和left top 等于移动距离
// - 抬起清除移动事件
var aBox = document.querySelectorAll('.box')
aBox.forEach(function (ele) {
drag(ele)
})
function drag(ele) {
ele.onmousedown = function (ev) {
// 鼠标到元素
var oldX = ev.offsetX
var oldY = ev.offsetY
document.onmousemove = function (ev) {
// page 鼠标到页面
var x = ev.pageX - oldX
var y = ev.pageY - oldY
// 限制范围
if (x <= 0) {
x = 0
} else if (x >= window.innerWidth - ele.offsetWidth) {
x = window.innerWidth - ele.offsetWidth
}
if (y <= 0) {
y = 0
} else if (y >= window.innerHeight - ele.offsetHeight) {
y = window.innerHeight - ele.offsetHeight
}
ele.style.left = x + 'px'
ele.style.top = y + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
}
return false // 阻止默认行为
}
}
</script>
</body>
07-鼠标拖拽4限制范围2
自定义范围
<style>
.box {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">abc</div>
<!-- <div class="box">abc</div> -->
<script>
// 拖拽
// - 需要三个事件：onmousedown onmousemvoe onmouseup
// - 元素必须是定位
// - 按下事件包含移动和抬起事件
// - 在整个页面上移动
// - 按下存鼠标到元素的距离
// - 移动鼠标到页面距离-鼠标到元素距离 = 移动距离
// - 让和left top 等于移动距离
// - 抬起清除移动事件
var aBox = document.querySelectorAll('.box')
aBox.forEach(function (ele) {
drag(ele)
})
function drag(ele) {
ele.onmousedown = function (ev) {
// 鼠标到元素
var oldX = ev.offsetX
var oldY = ev.offsetY
document.onmousemove = function (ev) {
// page 鼠标到页面
var x = ev.pageX - oldX
var y = ev.pageY - oldY
// 限制范围
if (x <= 50) {
x = 0
} else if (x >= window.innerWidth - ele.offsetWidth) {
x = window.innerWidth - ele.offsetWidth
}
if (y <= 50) {
y = 0
} else if (y >= window.innerHeight - ele.offsetHeight) {
y = window.innerHeight - ele.offsetHeight
}
ele.style.left = x + 'px'
ele.style.top = y + 'px'
}
document.onmouseup = function () {
document.onmousemove = null
}
return false // 阻止默认行为
}
}
</script>
</body>
08-事件源
<style>
div {
background-color: pink;
height: 200px;
width: 200px;
}
h3 {
background-color: cyan;
position: absolute;
left: 300px;
top: 0;
}
</style>
</head>
<body>
<div>
<h3>标题</h3>
</div>
<script>
var oDiv = document.querySelector('div')
// 只要结构是嵌套就可以触发父级的事件
oDiv.onclick = function (ev) {
// target 不兼容ie 6 7 8
// srcElement 所有浏览器都可以用
console.log(ev.target)
}
</script>
</body>
09-事件委托
事件委托
- 子级事件让父级添加
- 节省性能
- 给未来元素加事件
例子
<style>
ul {
overflow: hidden;
background-color: #666;
}
li {
list-style: none;
width: 150px;
height: 150px;
background-color: #ccc;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
// var aLi = document.querySelectorAll('li')
// li 加了多少次事件 6次？
// aLi.forEach(function (ele) {
// ele.onclick = function () {
// ele.style.background = 'pink'
// }
// })
// 事件委托
// - 子级事件让父级添加
// - 节省性能
// - 给未来元素加事件
var oUl = document.querySelector('ul')
// 只加了一次事件
oUl.onclick = function (ev) {
// console.log(ev.target)
// console.log(ev.target.tagName) // 标签名
if (ev.target.tagName === 'LI') {
// console.log(ev.target)
ev.target.style.background = 'pink'
}
}
</script>
</body>
09-事件委托2
后添加的元素叫未来元素
例子
<style>
ul {
overflow: hidden;
background-color: #666;
}
li {
list-style: none;
width: 150px;
height: 150px;
background-color: #ccc;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<ul>
<li index="0">111</li>
<li>222</li>
<li>333</li>
</ul>
<input type="button" value="添加" class="btn">
<script>
// var aLi = document.querySelectorAll('li')
// aLi.forEach(function (ele, index) {
// ele.onclick = function () {
// console.log(index)
// }
// })
var oUl = document.querySelector('ul')
var oBtn = document.querySelector('.btn')
oBtn.onclick = function () {
// 后添加的元素 叫 未来元素
oUl.innerHTML += '<li>abc</li>'
}
oUl.onclick = function (ev) {
if (ev.target.tagName === 'LI') {
console.log(ev.target.getAttribute('index'))
}
}
</script>
</body>
10-留言板
forEach(function(){})写法
<body>
<textarea class="txt"></textarea>
<input type="button" value="添加" class="btn">
<ul class="list">
<li>111 <span>删除</span></li>
<li>222 <span>删除</span></li>
<li>333 <span>删除</span></li>
</ul>
<script>
var oTxt = document.querySelector('.txt')
var oBtn = document.querySelector('.btn')
var oList = document.querySelector('.list')
oBtn.onclick = function () {
var li = document.createElement('li')
li.innerHTML = oTxt.value + ' <span>删除</span>'
oList.appendChild(li)
oTxt.value = ''
var aS = document.querySelectorAll('.list span')
aS.forEach(function (ele) {
ele.onclick = function () {
ele.parentNode.remove()
}
})
}
var aS = document.querySelectorAll('.list span')
aS.forEach(function (ele) {
ele.onclick = function () {
ele.parentNode.remove()
}
})
</script>
</body>
10-留言板2事件委托
事件委托写法 利用事件源 加 事件委托
<body>
<textarea class="txt"></textarea>
<input type="button" value="添加" class="btn">
<ul class="list">
<li>111 <span>删除</span></li>
<li>222 <span>删除</span></li>
<li>333 <span>删除</span></li>
</ul>
<script>
var oTxt = document.querySelector('.txt')
var oBtn = document.querySelector('.btn')
var oList = document.querySelector('.list')
oBtn.onclick = function () {
var li = document.createElement('li')
li.innerHTML = oTxt.value + ' <span>删除</span>'
oList.appendChild(li)
oTxt.value = ''
}
oList.onclick = function (ev) {
// 利用事件源 加 事件委托
if (ev.target.tagName === 'SPAN') {
ev.target.parentNode.remove()
}
}
</script>
</body>
11-如何获取键盘码
<script>
document.onkeydown = function (ev) {
console.log(ev.keyCode)}
</script>
750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
