位置信息事件流概念 jquery的事件

Posted 2021-01-11 tang854416

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了位置信息事件流概念 jquery的事件相关的知识，希望对你有一定的参考价值。

jQuery 位置信息

jQuery位置信息就是一系列封装好的api。

一、高度和宽度

获取高度
.width 
设置高度
.width()

获取宽度
.heigth
设置高度
.heigth

二、innerwidth 、innerheigth

获取内部宽
.innerwidth()
设置内部宽
.innerwidth(value)

获取内部高
.innerheigth
获取内部宽
.innerheigth(value)

三、outwidth、 outheigth

获取外部宽
.outwidth(includemargin)

设置外部高
.outwidth（value）

获取外部高
.outheigth(includemargin)

设置外部高
.outheigth(value)

四、偏移

获取偏移
.offset（）
注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标

设置偏移
.offer(coordinates)

五、元素坐标

.position()
返回值：Object{top,left}

描述获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。(offset parent指离该元素最近的而且被定位过的祖先元素 )

当把一个新元素放在同一个容器里面另一个元素附近时，用.position()更好用。

六、滚动距离

水平方向
获取滚动距离
scrollLeft()

设置滚动距离
scrollLeft(value)

垂直方向
获取
scrollTop()

设置
scrollLeft（）

JS事件流的概念（重点）

事件流

html中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。

想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

什么是事件流

事件流描述的是从页面中接收事件的顺序

1、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

那么其实呢，js中还有另外一种绑定事件的方式：看下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById(‘btn‘);

        oBtn.addEventListener(‘click‘,function(){
            console.log(‘btn处于事件捕获阶段‘);
        }, true);
        oBtn.addEventListener(‘click‘,function(){
            console.log(‘btn处于事件冒泡阶段‘);
        }, false);

        document.addEventListener(‘click‘,function(){
            console.log(‘document处于事件捕获阶段‘);
        }, true);
        document.addEventListener(‘click‘,function(){
            console.log(‘document处于事件冒泡阶段‘);
        }, false);

        document.documentElement.addEventListener(‘click‘,function(){
            console.log(‘html处于事件捕获阶段‘);
        }, true);
        document.documentElement.addEventListener(‘click‘,function(){
            console.log(‘html处于事件冒泡阶段‘);
        }, false);

        document.body.addEventListener(‘click‘,function(){
            console.log(‘body处于事件捕获阶段‘);
        }, true);
        document.body.addEventListener(‘click‘,function(){
            console.log(‘body处于事件冒泡阶段‘);
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按钮</a>
</body>
</html>

当我们点击这个btn的时候，看看页面都输出了什么：

技术分享图片