### insertBefore
父节点.insertBefore(目标节点，参照节点)；将目标节点添加至参照节点之前
### 滚动条及事件
兼容写法：document.body.scrollTop = document.documentElement.scrollTop = 0
### 事件
事件：对某个元素的某种操作
事件元素 事件类型 [事件对象]
button 单击 事件对象
事件三要素
1.事件元素:触发该事件的元素
2.事件类型:什么动作 单击 双击 划入 划出
3.事件对象:事件对象不是必须的，它携带者相关事件类型的所有属性和方法
注意事项:有事件产生时，才会有事件对象
事件对象的兼容写法：
document.onclick = function(evt){
var e = evt || event;
}
### 鼠标事件对象的属性
1. page针对于页面的左顶点 常用
console.log("page:"+ e.pageX + "," + e.pageY);
2.client针对于可视窗口的左顶点 不常用
console.log("client:" + e.clientX + "," + e.clientY);
3.offset针对于父元素的左顶点 常用于拖拽
console.log("offset:" + e.offsetX + "," + e.offsetY);
### 事件流
事件流:当子元素和父元素拥有相同事件时,子元素向父元素传递或父元素向子元素传递的过程，称为事件流
1： 事件的冒泡:子->父 但并不是所有事件都会产生冒泡问题 onfocus onblur onload不会产生冒泡问题
2：事件的捕获
### 阻止事件冒泡
时间兼容的同时 var e = evt || event;
阻止冒泡将阻止冒泡的代码添加至传播源中： e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
### 阻止浏览器的默认行为
事件兼容的同时 var e = evt || event;
a标签的跳转
阻止浏览器的默认行为
e.preventDefault?e.preventDefault():e.returnValue = false;
<style>
#tiger{
width: 100px;
height: 100px;
background-image:url(../../html内容/34762cfad383d031.png.webp);
background-size: 100px 100px;
position: absolute;
left:200px;
top:500px;
}
</style>
<body>
<div id="tiger"></div>
</body>
<script>
var obtn = document.querySelector("#tiger")
// 小老虎跳一跳用这个
// document.onclick = function(){
// obtn.style.top = obtn.offsetTop - 100 +"px"
// }
document.onmousemove = function(evt){
var e = evt || event;
obtn.style.left = e.pageX - obtn.offsetWidth/2+"px";
obtn.style.top = e.pageY - obtn.offsetHeight/2+"px"
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
