Event 对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
Ie9以下浏览器中的事件对象是放在全局中的window.event;
解决兼容性:event = event || window.event
- target 目标元素 实际被点到的元素
- currentTarget 侦听元素 进入该事件函数的侦听目标(指向添加监听事件的对象),也就是设执行addEventListener方法,默认和this完全相同
- srcElement 目标元素,实际被点到元素与target完全相同
screenX、pageX、offsetX和clientX的区别
事件对象属性:
clientX/clientY: 鼠标位子相对于浏览器可视区域鼠标位于浏览器的左侧和顶部的距离。(可视页面,不会计算水平滚动的距离)
pageY/pageX: 鼠标位子相对于浏览器可视区域body的顶部和左侧部分的距离。(整个页面,受滚动条影响)
screenY/screenX: 鼠标位子相对于浏览器有效区域的上方和左侧的距离。(屏幕,X轴受滚动条的影响)
offsetX/offsetY:相对于定位父盒子最左上角的x,y坐标。(页面,受滚动条影响)
当前元素的偏移位置:
offsetTop/offsetLeft:相对于定位父盒子最左上角的x,y坐标。(页面,受滚动条影响)
PageY和pageX的兼容写法(很重要)
在页面位置就等于 = 看得见的+看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
1. event.target属性;返回触发此事件的元素(事件的目标节点)。
重要作用:事件委托(就是将事件绑定到父级/爷爷级对象上,通过事件对象的target属性来控制子级对象的改变,例:点击子级元素时子级发生样式改变):
event.target.style=''(点击的目标对象)
2. event.currentTarget属性; 返回其事件监听器触发该事件的元素 相当于this。
3. event.type属性; 返回当前 Event 对象表示的事件的名称。
4.event.timeStamp属性; 返回事件生成的日期和时间。
1-4案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box" id="box" onclick="targett(event)">
<p>我爱https://blog.csdn.net/muzidigbig</p>
<p>我爱https://blog.csdn.net/muzidigbig</p>
</div>
</body>
<script>
function targett(event) {
// 解决IE9兼容性问题
event = event || window.event;
//返回触发此事件的元素(事件的目标节点)。
console.log(event.target);
// console.log(event.target.id);
// console.log(event.target.tagName);
// console.log(event.target.nodeName);
// console.log(event.target.className);
// console.log(event.target.innerHTML);
// console.log(event.target.innerText);
//事件委托(点击子级元素,相对应的样式发生改变)
event.target.style.color='yellow';
//返回其事件监听器触发该事件的元素。
console.log(event.currentTarget);
//返回当前 Event 对象表示的事件的名称。
console.log(event.type);
//返回事件生成的日期和时间。
console.log(event.timeStamp);
}
</script>
</html>
5. event.keyCode ; 键盘按键代码(返回值number)和keydown/keyup(事件会在键盘按下/松开时触发)配合使用
上下左右案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
width: 20px;
height: 20px;
border: 1px solid black;
}
.bc{
background-color: pink;
}
</style>
</head>
<body>
<table>创建一个十行十列的表格,代码略……</table>
</body>
<script>
window.onload = function () {
dig();
function dig() {
//这里将随机数作为获取对象的索引;注意这里定义在全局位置的变量
var random = Math.round(Math.random()*100);
console.log(random);
var tds = document.getElementsByTagName('td');
tds[random].className='bc';
//键盘按键事件
document.onkeydown = function (event) {
if(event.keyCode == 38){
tds[random].className='';
random -= 10;
if(random>1 ){
tds[random].className='bc';
}else{
//这里用到了递归
dig();
}
}else if(event.keyCode == 40){
tds[random].className='';
random += 10;
if(random<99){
tds[random].className='bc';
}else{
dig();
}
}else if(event.keyCode == 37){
tds[random].className = '';
random -= 1;
if(random>0 || random==0){
tds[random].className = 'bc';
}else {
dig();
}
}else if(event.keyCode == 39){
tds[random].className = '';
random += 1;
if(random < 99 || random == 99){
tds[random].className = 'bc';
}else{
dig()
}
}
}
}
}
</script>
</html>
js--三大特效(重点重点)
三大家族和一个事件对象
三大家族(offset/scroll/client)(单位默认px,这里得到的只是一个返回的number数值,只可读)
事件对象/event (事件被触动时,鼠标和键盘的状态)(通过属性控制)
1. offset家族 (返回值为number,只可读)
offset这个单词本身是--偏移,补偿,位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族;
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent共同组成了offset家族。
offsetWidth和offsetHight (检测盒子自身宽高+padding+border)
这两个属性,他们绑定在了所有的节点元素上。获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding+border;(不包含margin)
offsetWidth =width+padding+border;
offsetHeight =Height+padding+border;
offsetLeft和offsetTop (元素的left/top距离有定位的父盒子左/上面的距离,该元素的左上角与父容器(offsetParent对象)左上角的距离)
返回距离上级盒子(带有定位)左边的位置。(受滚动条影响)
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下,offsetLeft == style.left(去掉px)
offsetParent(检测父系盒子中带有定位的父盒子节点)
1、返回该对象的父级 (带有定位)
如果当前元素的父级元素没有进行CSS定位 (position为absolute或relative,fixed), offsetParent为body元素。
2、如果当前元素的父级元素中有CSS定位 (position为absolute或relative,fixed),offsetParent取最近的那个父级元素。
offsetLeft和style.left区别:
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置;而 style.left不可以。
二、offsetTop 返回的是数字,而 style.top 返回的是字符串;除了数字外还带有单位:px。
三、offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
四、如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
案例:匀速动画
动画原理:定时器+盒子本身的位置+步长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 100px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<button onclick="speed()">匀速动画</button>
<div>
https://blog.csdn.net/muzidigbig
</div>
</body>
<script>
function speed() {
var btn = document.getElementsByTagName('button')[0];
var div = document.getElementsByTagName('div')[0];
function bian() {
//动画原理:盒子未来的位置 = 盒子现在的位置+步长
//用offsetLeft属性获取定位的盒子距离body左边的距离改变这个距离
//将offsetLeft重新设置的值赋给style.left
//offset获取值的返回类型为number
div.style.left = div.offsetLeft+10+'px';
}
setInterval(bian,2000);
}
</script>
</html>
2.scroll家族组成(卷页)
scrollWidth和scrollHeight(滚动条滚过的所有长度和宽度;不包括border、margin)
检测盒子的宽高。(调用者:节点元素。属性。)
盒子内容的宽高。(如果有内容超出了,显示内容的高度;不超出是盒子本身的高度)
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
IE8一下不超出盒子,高为内容的高度
scrollToph和scrollLeft(与onscroll滚动事件配合)
网页,被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
它的兼容性问题
一、未声明 DTD(谷歌只认识他)
document.body.scrollTop
二、已经声明DTD(IE678只认识他)
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的
window.pageYOffset
兼容性写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
案例:
固定导航栏
<script>
window.onload = function () {
//需求1:当我们滚动界面的时候,被卷曲的头部超过第二个盒子距离顶部的位置,那么直接给第二个盒子加类名.fixed
//需求2:当我们滚动界面的时候,被卷曲的头部小于第二个盒子距离顶部的位置,那么直接给第二个盒子取消类名.fixed
//步骤:
//1.老三步。
//2.判断 ,被卷曲的头部的大小
//3.满足条件添加类,否则删除类
//1.老三步。
var topDiv = document.getElementById("top");
var height = topDiv.offsetHeight;
var middle = document.getElementById("Q-nav1");
var main = document.getElementById("main");
window.onscroll = function () {
//2.判断 ,被卷曲的头部的大小
if(scroll().top > height){
//3.满足条件添加类,否则删除类
middle.className += " fixed";
//第二个盒子不占位置了,所以我们给第三个盒子一个上padding占位置,不出现盒子抖动问题
main.style.paddingTop = middle.offsetHeight+"px";
}else{
middle.className = "";
//清零
main.style.paddingTop = 0;
}
}
}
</script>
3.client 家族
client 可视区域(document部分)
clientWidth: width + padding 不包含border和滚动条占用的空间
检测屏幕宽度(可视区域)
ie9及其以上的版本
window.innerWidth
标准模式
document.documentElement.clientWidth;
怪异模式
document.body.clientWidth;
使用的时候,有三个地方需要注意:
1)这个函数必须在页面加载完成后才能运行,否则document对象还没生成,浏览器会报错。
2)大多数情况下,都是document.documentElement.clientWidth返回正确值。但是,在IE6的quirks模式中,document.body.clientWidth返回正确的值,因此函数中加入了对文档模式的判断。
3)clientWidth和clientHeight都是只读属性,不能对它们赋值。
window.onresize = function(){} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生
案例:
<script>
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
document.write(client().width);
</script>
document.compatMode的解释:https://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html
Js获取宽高度的归纳总结
首先,先吓唬一下我们的小白们!在js中的描述宽高的可以细分有22种。
- window.innerWidth //除去菜单栏、工具栏以及滚动条等的宽度
- window.innerHeight//除去菜单栏、工具栏以及滚动条等的高度
- window.outerWidth//与innerWidth 相反
- window.outerHeight//与innerHeight 相反
- window.screen.height//电脑屏幕的高度
- window.screen.width//电脑屏幕的宽度
- window.screen.availHeight//电脑屏幕的可利用高度
- window.screen.availWidth//电脑屏幕的可利用宽度
- window.screenTop//浏览器距离屏幕的高度
- window.screenLeft//浏览器距离屏幕的宽度
- document.body.clientWidth//指元素的自身宽度(包括padding)
- document.body.clientHeight//指元素的自身的高度(包括padding)
- document.body.clientLeft//子级div内容位置到父级内容区域的宽度距离(即border值)
- document.body.clientTop//子级div内容位置到父级内容区域的高度距离(即border值)
- document.body.offsetWidth//指定元素的宽度(包括padding,border和内容)
- document.body.offsetHeight//指定元素的高度(包括padding,border和内容)
- document.body.offsetTop//距离父级元素的高度
- document.body.offsetLeft//距离父级元素的宽度
- document.body.scrollWidth//获取的是文档的宽度(当指定的宽度小于浏览器窗口的时候,为浏览器的宽度)
- document.body.scrollHeight//获取的是文档的高度(当指定的高度小于浏览器窗口的时候,为浏览器的高度)
- document.body.scrollTop//文档被滚动上去的时候(即滚动条往上滚动的距离)
- document.body.scrollLeft//文档被滚动右去的时候(即滚动条往右滚动的距离)
浏览器滚动条宽度的计算方法是:
const scrollWidth = window.innerWidth - document.body.clientWidth;
看起来有点怕怕,但我们细分可以很清晰的分清楚他们
- width和height的都是值元素或窗口等的宽高,top和left表示的是到相对元素的距离
- client,offset,scrollh和screen都分别有width,height,top和left
- 最后就是区别窗口和屏幕的宽高和元素的宽高
若有不足请多多指教!希望给您带来帮助!