元素尺寸和位置,scroll事件,事件响应链,事件默认行为-阿里云开发者社区

开发者社区> 景凌凯> 正文

元素尺寸和位置,scroll事件,事件响应链,事件默认行为

简介:
+关注继续查看

元素的尺寸和位置
// 通过元素对象的style属性设置的样式是行内样式,所以通过style获取也是获取的行内样式,并不能获取css设置的样式值。



// 元素对象的clientWidth属性表示元素的宽度,
// console.log(box.clientWidth);
// clientHeight高度。
// console.log(box.clientHeight);



// 带边框的宽高。
// console.log(box.offsetWidth);
// console.log(box.offsetHeight);




// 获得元素相对于浏览器窗口的坐标。
// console.log(box.offsetLeft);
// console.log(box.offsetTop);

// 使用自身相对窗口的坐标减去父元素相对窗口的坐标可以得到自己相对于父元素的坐标。


// 浏览器窗口的宽高(工作区,显示页面的区域)
console.log(window.innerWidth);
console.log(window.innerHeight);

// 整个浏览器窗口的宽高
console.log(window.outerWidth);
console.log(window.outerHeight);

// 元素对象的onscroll事件,当元素内容发生滚动时触发,它是一个频繁出发的事件。

box.onscroll = function(){
// console.log("div发生滚动了");
}

// scrollTop属性表示元素纵向的滚动偏移量。
console.log(box.scrollTop);


// scrollHeight属性表示元素的内容高度
console.log(box.scrollHeight);


// 元素内容高度 - 元素本身高度 = 最大偏移量。
// 元素的当前偏移量等于最大偏移量时,说明滚动到底部了。
if(box.scrollHeight-box.clientHeight==box.scrollTop){
console.log("到底了");
}


// 事件的传播分为捕获和冒泡两个阶段,通过行内属性和元素对象.onxxxx这两种方式添加的事件监听都是冒泡阶段的事件监听。


outer.onclick = function(){
console.log("outer被点击了");
}

inner.onclick = function(e){
console.log("inner被点击了");
// 事件对象的stopPropagation方法,可以阻止事件的继续传播。
e.stopPropagation();
}




// 元素对象的addEventListener方法,为元素添加一个事件监听。第一个参数是要监听的事件类型,第二个参数是事件函数,第三个参数可选,是否在冒泡捕获阶段监听,默认为false
// 相比于前两种方法,这种方法可以为同一个元素的同一个事件添加多个事件函数。
outer.addEventListener("click",function(e){
console.log("outer捕获阶段");
},true);

outer.addEventListener("click",function(e){
console.log("outer冒泡阶段");
},false);



// 在事件响应链中任何阶段都可以阻止事件的传播



// removeEventListener移除已经添加过的事件监听
inner.removeEventListener("click",f1,true);





// 在浏览器中,某些事件会触发浏览器的默认行为,例如,按下F5,浏览器就会刷新当前页面,点击a标签,页面就会跳转。

var link = document.getElementById("link");

link.onclick = function(e){
// 事件对象的preventDefault方法,可以阻止本次事件所触发的浏览器默认行为。
e.preventDefault();
}

document.body.onkeydown = function(e){
if(e.keyCode==116){
e.preventDefault();
}
}


var box = document.getElementById("box");

// 当鼠标指针进入元素时触发。
box.onmouseenter = function(){
// console.log("鼠标进入了");
}

// 当鼠标指针离开元素时触发。
box.onmouseleave = function(){
// console.log("鼠标离开了");
}

// 当鼠标指针在元素中移动时触发,属于频繁触发的事件。
box.onmousemove = function(){
// console.log("鼠标移动了");
}

box.onmousedown = function(e){
console.log(e);
}

box.onmousewheel = function(){
console.log("滚轮滚动了");
}

box.addEventListener("DOMMouseScroll",function(){
console.log("滚轮滚动了");
})





























版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
javascript中获取元素尺寸
Javascript获取获取屏幕、浏览器窗口 ,浏览器,网页高度、宽度的大小 屏幕可用工作区宽度:window.screen.availHeight,和浏览器无关,屏幕相关屏幕可用工作区高度:window.
731 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13875 0
javascript练习题-事件
  前端javascript练习题-事件  键盘控制div移动如果需要在页面中移动,要将元素脱离文档流(否则会影响页面布局) js实现代码: var odiv=document.getElementsByTagName("div")[0]; document.
536 0
+关注
景凌凯
有点尴尬唉 你要寻找的东西已经被吃掉啦!
47
文章
1366
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载