day22
1、事件
1.含义:
访问web页面得用户引起的一系列的操作,事件是人机交互的重要组成部分,如果用户的某个操作,需要给用户反馈,则用到事件处理函数
ele.eventName = function () {};
2.分类:
鼠标事件、html事件、键盘事件
3.鼠标事件
1)onclick 点击
var oBtn = document.querySelector("#bnt");
oBtn.onclick = function () {
console.log("ok");}
2)ondblclik 双击
oBtn.ondblclick = function () {
console.log("双击");
}
3)onmouseover 鼠标移入
oBtn.onmouseover = function(){
console.log("鼠标移入")
}
4)onmouseout 鼠标移出
oBtn.onmouseout = function(){
console.log("鼠标移出")
}
5)onmousedown 鼠标按下(不松)
oBtn.onmousedown= function(){
console.log("鼠标按下")
}
6)onmouseup 鼠标释放
oBtn.onmouseup=function(){
console.log("鼠标释放")
}
7)onmousemove 鼠标移动: 只要鼠标在相应区域移动即可触发,触发次数不知。
oBtn.onmousemove = function () {
console.log("鼠标移动");}
4.html事件
1)onselect 选中文本时触发
oTxt.onselect = function () {
console.log("选中文本时触发"); };
2)onresize 窗口尺寸改变时触发
window.onresize = function () {
console.log("尺寸改变");}
表示距离的属性clientWidth/clientHeight(不包含滚动条的尺寸,即可视区域)
console.log(
document.documentElement.clientWidth,
document.documentElement.clientHeight );
3)onscroll 滚动条滚动时触发
window.onscroll = function () {
console.log("滚动条滚动");}
scrollTop/scrollLeft 竖直方向滚动条滚动距离和水平方向滚动条滚动的距离 是可读可写的属性
console.log(
document.documentElement.scrollTop,
document.documentElement.scrollLeft)
btn.onclick = function () {
document.documentElement.scrollTop = 0; };
4)onfocus 获得焦点时触发
oTxt.onblur = function () {
console.log("失去焦点时触发"); };
5)onchange 改变内容时触发
oTxt.onchange = function () {
console.log("内容改变且失去焦点时触发"); };
6)文本框键入时触发
oTxt.oninput = function () {
console.log("文本框有键入时触发"); };
7)onsubmit表单提交/onreset表单重置
2、定位 position
1)属性:static(默认)、relative(相对定位,参照物是自己)、absolute(绝对定位,参照物是带定位属性的父级元素)、fixed(固定定位,只和可视区域有关),位置改变使用left和top
2)relative
.outer {
position: relative;
width:200px;
height:200px;
background-color: red;
top:100px;
left:100px;
}
3)absolute
.inner {
position: absolute;
left: 10px;
top: 10px;
width: 10px;
height:10px;
background-color: blue;
}
4)fixed
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
position: fixed;
right:0;
top: 100px;
}
li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid black;
}
div{
height: 600px;
border: 1px solid #ccc;
} /*锚点:实现页面不同区域的跳转,使用a链接
*/
- 京东秒杀
- 京东秒
- 京东
- 京
- 京东秒杀o
京东秒杀
京东秒
京东
京
京东秒杀o
3、offsetleft/offsetright 距离定位父级左边距和上边距
#outer {
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
#inner {
position: relative;
left: 20px;
top: 75px;
width: 100px;
height: 100px;
margin-left: 50px;
background-color: blue;
}
console.log(inner.offsetLeft, inner.offsetTop);