水平垂直居中的12种方法
- absolute + 负margin
- absolute + margin:auto
- absolute + calc
- absolute + translate
- flex + justify-content + align-items
- flex + margin auto
- 网格布局：grid
- 行内块元素 + line-height
- 行内块元素 + ::after 伪元素选择器
- 行内块元素 + css-table
- 行内块元素 + table
- 行内块元素 + writing-mode
插入节点
insertBefore：插入，可以任意插入在可插入的地方
<div class="box">
<div class="box2">hello1</div>
<div class="box2">hello2</div>
<div class="box2">hello3</div>
<div class="box2">hello4</div>
</div>
<script>
var box=document.querySelector(".box")
var a1=document.createElement("h1")
a1.innerHTML="6666"
// 在hello2与hello3之间插入
box.insertBefore(a1,box.children[2])
// 在hello3与hello34之间插入
box.insertAfter(a1,box.children[4])
</script>
事件的绑定和解绑
什么是事件句柄？
元素在某种状态(浏览器实现的也叫事件触发)达成时 要执行的提前设定好程序 我们称之为事件句柄
事件有三要素: 事件源 事件类型 事件处理程序(handler)
下面的程序就是一个事件，当点击hello的时候就是触发这个事件的发生
<style>
.box {
width: 200px;
height: 200px;
background-color: palegreen;
}
</style>
<div class="box">hello</div>
<script>
var box = document.querySelector(".box")
box.onclick = function() {
console.log("触发了事件")
}
</script>
事件的绑定方式
绑定方式有三种
- 行内式:标签的属性值是事件触发时执行代码
- 属性绑定:只能绑定一个handler
- 给元素添加一个事件监听器
行内式:标签的属性值是事件触发时执行代码
下面的代码都将用上面代码定义的box和div
<div class="box" onclick="javaScript:console.log(66666)">hello2</div>
<div class="box" onclick="javaScript:console.log(66666)">hello2</div>
也可以自己定义一个函数，在行内式里面去调用
<div class="box" onclick="javaScript:myconsole.mylog()">hello2</div>
<div class="box" onclick="myconsole.mylog()">hello2</div>
// 也可以连着调两个函数，但属性绑定就不行，会被后面的那个函数覆盖掉
<div class="box" onclick="myconsole.mylog();fn()">hello5</div>
<div class="box" onclick="fn()">hello2</div>
var myconsole = {
mylog: () => {console.log("自定义函数1")}
function fn(){
console.log("自定义函数2")
}
}
属性绑定:只能绑定一个handler，如果绑定两个会被后面一个覆盖掉前面一个
box.onclick = function() {
console.log("触发了事件2")
fn()
}
给元素添加一个事件监听器
//尽量使用这一种
box.addEventListener("click",function(){
console.log(666661)
})
box.addEventListener("click",function(){
console.log(666662)
})
console.log(666663)
IE的使用方法，了解一下就可以了
// IE的绑定使用方法，了解一下
box.attchEvent("click",function(){
console.log(666663)
})
box.adde=box.addEventListener||box.attchEvent
box.adde("click",function(){
console.log(666663)
})
事件解绑
行内和属性绑定的事件解绑
<div id="xiake" onclick="console.log('解绑1')">
解绑
</div>
// 行内和属性绑定的事件 解绑:xiake.οnclick=null
xiake.onclick=function(){
xiake.onclick=null;
console.log(6666)
}
监听事件的解绑
// 移除对应的元素的对应的监听程序
function fn1 () {
console.log("解绑1")
}
function fn2 () {
console.log("解绑2")
}
function fn3 () {
console.log("解绑3")
}
// 添加监听事件
xiake.addEventListener("click",fn1)
xiake.addEventListener("click",fn2)
xiake.addEventListener("click",fn3)
// 移除监听事件
xiake.removeEventListener("click",fn1)
总结
如果是行内式或者属性绑定像这样的：box.οnclick=函数 就直接把绑定的事件设为null就可以了：box.οnclick=null
如果是监听事件绑定：box.addEventListener 就直接把监听事件移除了就可以了：box.removeEventListener
鼠标事件，键盘事件，其他事件
鼠标事件
onwheel：当鼠标滚轮在元素上向上或向下滚动时，会发生 onwheel 事件，当用户使用触摸板滚动或放大或缩小元素时，也会发生 onwheel 事件
click：单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上，并按了回车键时，同样会触发事件
dblclick：双击鼠标左键时发生，如果右键也按下则不会发生
mousedown：单击任意一个鼠标按钮时发生
mouseout：鼠标指针位于某个元素上，且将要移出元素的边界时发生，不考虑子元素，从父元素移动到子元素，对于父元素而言，仍然算作离开
mouseover：鼠标指针移出某个元素，到另一个元素上时发生，不考虑子元素，从父元素移动到子元素，对于父元素而言，仍然算作离开
mouseup：松开任意一个鼠标按钮时发生
mousemove：鼠标在某个元素上时持续发生
mouseenter：鼠标进入元素时触发，该事件不会冒泡，考虑子元素，子元素仍然是父元素的一部分
mouseleave：鼠标离开元素时触发，该事件不会冒泡，考虑子元素，子元素仍然是父元素的一部分
键盘事件
keydown：按下键盘上任意键触发，如果按住不放，会重复触发此事件，如果阻止了事件默认行为，文本不会显示
keypress：按下键盘上一个字符键时触发，如果阻止了事件默认行为，文本不会显示
keyup：抬起键盘上任意键触发
其他事件
window的load：页面中所有资源全部加载完毕的事件
图片的load：图片资源加载完毕的事件
scroll：窗口发生滚动时运行的事件，通过scrollTop和scrollLeft，可以获取和设置滚动距离
change：文本改变事件
input: 文本改变事件，即时触发
focus：元素聚焦的时候触发（能与用户发生交互的元素，都可以聚焦），该事件不会冒泡
blur：元素失去焦点时触发，该事件不会冒泡
submit：提交表单事件，仅在form元素有效
click
<style>
.box {
width: 400px;
height: 300px;
background-color: brown;
cursor: pointer;
overflow-y: scroll;
}
.son{
width: 200px;
height: 400px;
background-color: palegreen;
cursor: pointer;
margin: 20px;
}
</style>
<div class='box'>
<div class="son"></div>
</div>
var box=document.querySelector(".box")
box.addEventListener("click",()=>{
console.log("鼠标按下和松开时 鼠标指针在被选元素区域内部")
})
下面的所有样式都是使用上面的
dblclick
box.addEventListener("dblclick",()=>{
console.log("鼠标第一次按下和第二次松开时 鼠标指针在被选元素区域内部 并且时间间隔不能太长")
})
mousedown
box.addEventListener("mousedown",()=>{
console.log("鼠标在被选元素内按下")
})
mouseup
box.addEventListener("mouseup",()=>{
console.log("鼠标在被选元素内松开")
})
mouseover
box.addEventListener("mouseover",()=>{
console.log("鼠标进入被选元素")
})
mouseout
box.addEventListener("mouseout",()=>{
console.log("鼠标从被选元素出去")
})
mouseleave
box.addEventListener("mouseleave",()=>{
console.log("鼠标从被选元素出去")
})
mouseenter
box.addEventListener("mouseenter",()=>{
console.log("鼠标从被选元素进去")
})
onwheel
box.onwheel=function(){
console.log("鼠标滚轴滚动时 鼠标指针在被选元素内部")
}
scroll
var box=document.querySelector(".box")
box.addEventListener("scroll",function(){
console.log("元素自己的滚动条滚动啦:单位时间内滚动条的位置发生变化")
})
keydown
<input type="text" id="box2" autofocus>
var box2=document.querySelector("#box2")
box2.addEventListener("keydown",function(){
console.log("输入框的键盘按下")
})
keyup
box2.addEventListener("keyup",function(){
console.log("输入框的键盘松开")
})
keypress
box2.addEventListener("keypress",function(){
console.log("输入框的键盘按下")
})
input
box2.addEventListener("input",function(){
console.log("输入框在输入就触发")
})
change
box2.addEventListener("change",function(){
console.log("输入框失焦并且value改变")
})
focus
box2.focus()
box2.addEventListener("focus",function(){
console.log("输入框获取焦时触发")
})
blur
box2.addEventListener("blur",function(){
console.log("输入框失焦时触发")
})
onload
// onload 加载完毕时执行
window.onload=function(){
console.log("浏览器加载完毕:5大BOM的功能加载完成")
console.log(document.querySelector("#box3"))
}
console.log(document.querySelector("#box3"),2222)
<div id="box3">666</div>
事件对象
事件触发时 handler函数内部会传入数据 触发时的信息
<style>
.box {
width: 400px;
height: 3000px;
background-color: brown;
cursor: pointer;
margin: 200px;
}
</style>
<div class='box'>666</div>
这里的e就是事件触发传入的数据 MouseEvent
事件源是什么，传入的数据就会有所变化，例如如果事件源是input，那么数据就是inputEvent，事件源是键盘，那么数据就是keyboardEvent
clientX和clientY与x，y一样的，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x,y是新浏览器支持
offsetX，offsetY 针对目标元素的左上角坐标（e.target）
layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角
当元素及它的父级都没有定位属性时，以body的左上角为原点，当元素的父级都有定位属性时，以父级的左上角为原点，当元素自身有定位属性时，以自身的左上角为原点
pageX， pageY相对页面左上角的距离
screenX screenY 相对屏幕左上角的位置
var box=document.querySelector(".box")
box.addEventListener("click",function(e){
console.log(e.pageY,e.offsetY)
})
movementX：它提供了当前事件和上一个事件之间鼠标在水平方向上的移动值
var box=document.querySelector(".box")
box.onmousemove=function(e){
console.log(111,e.movementX)
}
得到inputEvent的数据
<input type="text" id="box2">
box2.oninput=function(e){
console.log(e,box2.value,this.value,e.target.value)
}
得到keyboard的数据
box2.onkeydown=function(e){
console.log(e,e.keyCode,box2.value,this.value,e.target.value)
}
这里的this就是点击的那个按钮， 事件就是点击事件，传入的数据就是 PointerEvent
<button id="btn2">btn2</button>
// 这里的this就是点击的那个按钮， 事件就是点击事件，传入的数据就是 PointerEvent
btn2.onclick=function(e){
console.log(this,e)
}
兼容性写法，让IE浏览器也可以执行
e = (e.constructor==PointerEvent&&e)||window.event //兼容写法
console.log(e)
}
总结
clientX和clientY与x，y一样的，以浏览器显示区域的左上角开始，指鼠标的坐标。x,y是新浏览器支持
offsetX，offsetY，针对目标元素的左上角坐标，从padding开始。
layerX,layerY，往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角
pageX，pageY相对页面左上角的距离
screenX screenY 相对屏幕左上角的位置
盒子模型
el.offsetWidth：本身宽度+边框线+左右内边距；
el.offsetHeight：本身高度+边框线+上下内边距；
el.offsetTop：相对第一个父级节点有定位属性的上偏移量；
el.offsetLeft：相对有定位属性的父节点左偏移量；
el.clientWidth：本身的宽度+左右内边距;
el.clientHeight：本身的高度+上下内边距；
el.clientTop：上边框线的宽度
el.clientLeft：左边框线的宽度
el.scrollWidth：盒子的实际宽度(包括滚动条不可见部分，不包括边线)
el.scrollHeight：盒子的实际高度(包括滚动条不可见部分，不包括边线)
el.scrollTop：滚动条向下滚动的距离；
el.scrollLeft：滚动条向右滚动的距离；
window.innerHeight：浏览器窗口可见区域高度；
window.innerWidth：浏览器窗口可见区域宽度;
<style>
body{
margin: 0px;
}
.box {
width: 400px;
height: 300px;
background-color: brown;
cursor: pointer;
position: relative;
left: 100px;
top: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
cursor: pointer;
position: absolute;
left: 10px;
top: 20px;
}
.box3{
width: 100px;
height: 100px;
background-color: gold;
cursor: pointer;
margin: 10px;
padding: 5px;
border: 3px solid saddlebrown;
}
</style>
<div class='box'>
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
var box=document.querySelector(".box")
var box2=document.querySelector(".box2")
var box3=document.querySelector(".box3")
let total=0;
Object.prototype.myoffsetTop=function() {
let baba=this.offsetParent
total+=this.offsetTop
if(baba){
baba.myoffsetTop()
}
return total
}
var re=box3.myoffsetTop()
console.log(re)
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
