JS三大家族知识点

白柚Y

已于 2022-02-21 10:15:46 修改

阅读量238

点赞数

文章标签： javascript 前端 css3

于 2022-02-17 20:40:21 首次发布

本文链接：https://blog.csdn.net/m0_67084957/article/details/122990331

版权

offest家族:

offsetWidth和offsetHeight:(只读,且始终是整数)

el.offsetWidth/offsetHeight返回元素占据页面的实际大小.

el.offsetWidth/offsetHeight=元素自身的宽高+padding+border.

行内元素和行内块元素:

el.offsetWidth/offsetHeight=元素内容撑起来的宽度和高度.

offsetParent:

el.offsetParent返回的是距离该元素最近的带有定位的父级元素.

如果当前元素的父级元素没有进行css定位(absolute,relative)属性,此元素的offsetParent为body,

如果当前元素是fixed定位,那么返回值为null.

offsetLeft和offsetTop:(只读,且始终是整数)

el.offsetLeft/offsetTop:返回的与它offsetParent边框的上边距和左边距(上左距离),如果offsetParent

是body,那么会加上body的边框宽度.

Event:获取事件对象

document.body.onclick = function(){
    console.log(event); // 鼠标事件对象
}

常见的事件对象属性:

event.type:事件类型,返回触发事件的名称(比如:click).

事件相关元素:

event.target:返回触发事件的元素.

event.currentTarget:返回绑定事件的元素

tips:触发事件的元素不一定就是绑定事件元素,因为事件存在冒泡,点击某个元素的子元素,那么父元素绑定的事件中,触发事件的元素为子元素,绑定事件的元素为父元素.

鼠标的按键信息:

相关事件:

onmousedown(当鼠标按下); onmouseup(当鼠标抬起)

event.button:当鼠标按下时,会返回一个数值.0表示左键,1表示鼠标滚轮, 2表示右键.

event.which:当鼠标按下时,会返回一个值.1表示左键 2表示中间滚轮 3表示右键.

event.contextmenu:是浏览器右键菜单的事件,我们可以通过此事件来控制右键菜单的显示与否,

或者重写右键菜单内容.

// 禁止浏览器右键
document.oncontextmenu = function() {
    event.preventDefault(); // 阻止默认事件
    event.returnValue = false;
}

鼠标的位置信息:

event.pageX/pageY:获取事件触发时鼠标相对于页面的位置.

event.clientX/clientY:获取事件触发时鼠标相对于可视区域的位置.

event.offsetX/offsetY:获取事件触发时鼠标相对于触发事件的元素内容区的位置.

event.screenX/screenY:获取事件触发时鼠标相对于屏幕的位置.

event.x/y:clientX/clientY的别名.

键盘信息:

相关事件:event.keydown(当键盘按下) ,event.keyup(当键盘松开)

event.key:按件表示值的内容(按的是什么建).

event.altKey:触发事件时alt键是否被按下.

event.ctrlKey:触发事件时ctrl键是否被按下.

event.shiftKey:触发事件时shift键是否被按下.

阻止事件冒泡和阻止默认事件:

event.stopPropagation():阻止事件冒泡.

event.preventDefault():阻止默认事件.

closest:

el.closest:获取匹配特定选择器且距离当前元素最近的父类元素(也可以是当前元素本身),如果匹配不到则返回null.

语法:var closestElement=targetElement.closest(selectors);

参数:

selectors: 指定的元素筛选选择器，比如 "p, .className, #id ...".

返回值:

closestElement 是查询到的符合筛选条件的元素，也可能是 null.

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

<script>
      var el = document.getElementById('div-03');

    var r1 = el.closest("#div-02");  
    // 返回 id 为 div-02 的那个元素

    var r2 = el.closest("div");  
    // 返回最近的符合标签为 div 的元素，这里的话就是 div-03 元素本身

    var r3 = el.closest("article > div");  
    // 返回最近的拥有父元素 article 的 div 祖先元素，这里的话就是 div-01
</script>

scroll家族:

scrollWdth和scrollHeidht(只可读不可写且都是整数).

块元素:

scrollWdth和scrollHeidht指的是元素的自身宽和高,如果有padding时,则要加上padding,不算边框.

行内元素:

行内元素的scrollWidth和scrollHeight都是0.

行内块元素:

scrollWdth和scrollHeidht指的是自身的宽高.

内容超出时:

那么scrollWidth=内容的宽度+左内边距;scrollHeight=内容的高度加上+上内边距.

添加overflow之后:

如果属性值设为auto/hidden/scroll....,那么在高度的计算上会加上下方的padding.