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

时间:2023-01-28 16:24:16

一、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>