jQuery基础- 位置信息事件流事件对象事件代理jquery事件

Posted 2021-01-21 xihuanniya

一、jQuery的位置信息

jQuery的位置信是JS的client系列、offset系列、scroll系列封装好的一些简便api。

1、宽度和高度

       a、获取宽度和高度，例如：      

　　.width()  // 获取匹配元素集合中的第一个元素的宽度值，内容宽度，不含padding
　　.height()  // 获取匹配元素集合中的第一个元素的高度值，内容高度，不含padding

       注意：这个方法不接受任何参数。.css(‘width’)（或.css(‘height’)）和 .width()（或.height()）之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度（或高度）需要数学计算的时候推荐使用.width()（或.height()） 方法。

       b、设置宽度和高度，例如： 

　　.width(value)  // 给每个匹配的元素设置宽度，value为数字，不带单位
　　.height(value)  //给每个匹配的元素设置高度，value为数字，不带单位

2、innerWidth()和innerHeight()

       a、获取内部宽和高，例如： 

　　.innerWidth()  // 获取匹配元素集合中第一个元素的宽度值,含padding，不含border
　　.innerHeight()  // 获取匹配元素集合中第一个元素的高度值,含padding，不含border

       注意：这种方法不适用于window 和 document对象，对于这些对象可以使用.width()和.height()代替。

       b、设置内部宽和高，例如：

    .innerWidth(value)  // 给每个匹配的元素设置内部宽度，value为数字，不带单位
    .innerHeight(value)  //给每个匹配的元素设置内部高度，value为数字，不带单位

3、outerWidth()和outerHeight()

       a、获取外部宽和高

　　// 获取匹配元素集合中第一个元素的外部宽度（包括padding，border和可选的margin）
　　.outerWidth([includeMargin])
　　// 获取匹配元素集合中第一个元素的外部高度（包括padding，border和可选的margin）
　　.outerHeight([includeMargin])

              参数includeMargin：类型是布尔值，默认为false，表示不包含margin值。

              注意：这个方法不适用于window 和 document对象，对于这些对象可以使用.width()和.height()代替。

       b、设置外部宽和高

　　.outerWidth(value)  // 给每个匹配的元素设置内部宽度，value为数字，不带单位
　　.outerHeight(value)  //给每个匹配的元素设置内部高度，value为数字，不带单位

4、偏移

       a、获取偏移量，例如：

　　.offset()  // 返回一个包含top和left属性的Object对象

       描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档，与父相子绝无关。

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

       b、设置偏移量，例如： 

　　.offset({ top: 10, left: 30});  // 设置匹配的元素集合中每一个元素的坐标，坐标相对于文档

5、元素坐标　　

　　.position()  // 返回一个包含top和left属性的Object对象

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

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

 

6、滚动距离

       a、获取水平方向滚动距离和垂直方向滚动距离，例如：

　　.scrollLeft() // 获取匹配元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）
　　.scrollTop() // 获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）

       b、设置水平方向滚动距离和垂直方向滚动距离，例如：　　

　　.scrollLeft(value)  // 设置每个匹配元素的水平方向滚动条位置
　　.scrollLeft(value)  // 设置每个匹配元素的垂直方向滚动条位置

二、JS的事件流的概念

1、事件的概念

       html中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。

 

2、什么是事件流

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

 

3、事件流的由来（了解）

       由于微软和网景乱搞，后来必须要为事件传播机制，制定一个标准，因为事件捕获是网景公司开发出来的，而事件冒泡是由微软公司开发出来的，它们都想要自己的技术成为标准，所以导致这两个公司老是干架，制定标准的人为了不让它们干架，所以研发了事件流。

 

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

　　①事件捕获阶段：事件捕获和事件冒泡是相反的，也就是说，当用户触发了一个事件的时候，这个事件是从DOM树的最上层开始触发一直到捕获到事件源；

　　②处于目标阶段：事件在目标元素上发生并处理，但是事件处理会被看成是冒泡阶段的一部分；

　　③事件冒泡阶段：官方的定义就是从最特定的事件目标到最不特定的事件目标，意思就是说，加入用户单击了一个元素，，该元素拥有一个click事件，那么同样的事件也将会被它的祖先触发，这个事件从该元素开始一直冒泡到DOM树的最上层，这一过程称为事件冒泡；

 

5、事件流的写法以及实现方式

       a、标准实现方式是使用关键词addEventListener，假如你想给某元素添加/删除事件，可以这样写： 

　　element.addEventListener(eventType, fn, false);
　　element.removeEventListener(eventType, fn, false);

　　参数解释：

　　　　eventType：表示要使用哪种事件类型，比如click；

　　　　fn：回调函数，里面写触发此事件你要做什么事情；

　　　　false：事件机制，分为冒泡和捕获，false表示事件冒泡，true表示事件捕获；

 

       b、既然有标准的实现方式，那么肯定也存在着非标准的写法，如下：

　　element.attachEvent(eventType, fn);   // 这种写法兼容IE, IE没有实现事件捕获
　　element.detachEvent(eventType, fn);

　　参数解释：

　　　　eventType：事件类型；

　　　　fn：回调函数；

 

       c、冒泡和捕获的示例，如下：

<button id="btn">按钮</button>
　　<script>
　　　　window.onload = function(){
　　　　　　var oBtn = document.getElementById(‘btn‘);

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

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

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

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

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

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

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

          document.addEventListener(‘click‘,function(){
              console.log(‘document处于事件冒泡阶段‘);
          }, false);
      };
    </script>
    <!--
    控制台输出结果如下：
    document处于事件捕获阶段
    html处于事件捕获阶段
    body处于事件捕获阶段
    btn处于事件捕获阶段
    btn处于事件冒泡阶段
    body处于事件冒泡阶段
    html处于事件冒泡阶段
    document处于事件冒泡阶段
    -->

三、事件对象

       什么是事件对象？在触发DOM上的事件时都会产生一个对象。

1、认识事件对象

       事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

       例如：鼠标操作产生的event中会包含鼠标位置的信息；键盘操作产生的event中会包含与按下的键有关的信息。

       所有浏览器都支持event对象，但支持方式不同，在DOM中event对象必须作为唯一的参数传给事件处理函数，在IE中event是window对象的一个属性。

 

2、什么时候产生事件对象？

       当触发某个事件的时候，这个事件的回调函数的形参会默认接收一个event事件对象。

 

3、DOM中的事件对象

       DOM0级和DOM2级事件处理程序都会把event作为参数传入。

       根据习惯：可以用e，或者ev或者event。

       DOM中事件对象重要属性和方法：

属性	描述
type	用于获取事件类型
target	用于获取事件目标，即事件加在哪个元素上

      

方法	描述
stopPropagation()	用于阻止事件冒泡
preventDefault()	阻止事件的默认行为（移动端用的多）

 

4、IE中的事件对象

       第一种情况： 通过DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

       第二种情况：通过attachEvent()添加的事件处理程序，event对象作为参数传入。

       IE中事件对象重要属性和方法：

属性	描述
type	用于获取事件类型
srcElement	用于获取事件目标，即事件加在哪个元素上
cancelBubble	用于阻止事件冒泡，是属性（true表示阻止）
returnValue	用于阻止事件的默认行为，是属性（false表示阻止）

 

5、Event对象的一些兼容性写法（了解）

       a、获得event对象兼容性写法，如下：

    event || (event = window.event);

       b、获得target兼容型写法，如下：　　

    event.target||event.srcElement;

       d、阻止冒泡兼容性写法，如下：　　

    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble =true);

       c、阻止浏览器默认行为兼容性写法，如下：　　

    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

四、事件委托（事件代理）

       通俗的讲，onclick、onmouseover、onmouseout等就是事件，委托，就是让别人来做，这个事件本来是加在某些元素上的，然而我们可以加到别人身上，来完成这个事件。

1、原理

       利用冒泡的原理，把事件加到父级上，触发执行效果。

2、作用

       a、性能要好；

       b、针对新创建的元素，直接可以拥有事件；

3、事件源

       跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的。

4、使用情景

       a、为DOM中的很多元素绑定相同事件；

       b、为DOM中尚不存在的元素绑定事件；

5、语法：.on( events [, selector ] [, data ], handler(eventObject))

　　参数解释：

　　　　events：String类型，一个或多个空格分隔的事件类型；

　　　　selector：String类型，选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素；

　　　　data：任意类型，当一个事件被触发时，要传递给事件处理函数的event.data；

　　　　handler(eventObject)：Function类型，事件被触发时，执行的函数；

　　描述：在选定的元素上绑定一个或多个事件处理函数。

　　示例：

　　<ul>
        <li>第一项</li>
        <li>第二项</li>
    </ul>

    <script>
        $(function () {
            // 现有的li和未来添加的li都能做事件操作
            $(‘ul‘).on(‘click‘,‘li‘,function () {
              alert(this.innerText);
          });
          $(‘ul‘).append(‘<li>第三项</li>‘);
       })
    </script>

五、jquery常用的事件

       jquery常用的事件，大家一定要熟记在心，如下：

事件	描述
click()	鼠标单击触发事件
dblclick()	鼠标双击触发事件
mousedown()/mouseup()	鼠标按下/弹起触发事件
mousemove()	鼠标移动
mouseover()/mouseout()	鼠标移入/移出触发（包含被选元素和其子元素）
mouseenter()/mouseleave()	鼠标移入/移出触发（只在穿过/离开被选元素时触发）
hover()	hover(fn1,fn2)分别当鼠标指针进入和离开元素时执行
focus()/blur()	表单控件聚焦/失去焦点时触发
keydown()/keyup()	键盘按下/弹起时触发
change()	表单元素发生改变时触发
select()	文本元素发生改变时触发事件
submit()	表单提交时触发

 

六、解决单双击冲突问题

       知识铺垫：两次点击间隔小于300ms为双击，所以考虑利用定时器解决，如下：

　　<button>按钮</button>

　　<script>
        var timer = null;
        $(‘button‘).click(function () {
            clearTimeout(timer);  // 开定时器之前先关定时器
            timer = setTimeout(function () {
                console.log(‘单击了‘);
            },300)
        });

        $(‘button‘).dblclick(function () {
            clearTimeout(timer);
            console.log(‘双击了‘);
        });
　　</script>

七、应用：回到顶部代码示例：　　

　　<div class="fixTop">回到顶部</div>

　　<script>
        $(function () {
            $(‘.fixTop‘).click(function(event) {
                $(‘html,body‘).animate({
                    ‘scrollTop‘:0
                },1000)
            });
        });
　　</script>