jQuery的事件

一、JQ的位置

1.1offset()获取/设置元素的位置

offset()方法可以设置和获取元素距离文档的位置，和他的父级没有关系。

该方法有两个属性:

1.offset().top 获取元素距离页面顶部的距离

2.offset().left 获取元素距离页面左部的距离

下面方法可以更改元素距离文档的位置，使其改变位置。

offset({

        top:100,

        left:100

})

1.2 position()获取元素的位置(不可以更改元素的位置)

position()可以获取到盒子本身距离带有定位的父级盒子的距离，如果没有父级盒子以页面为准。

position()也是有两个属性:

1.position().left 获取元素距离带有定位的父级盒子的顶部的距离

2.position().top 获取元素距离带有定位的父级盒子的左侧的距离

1.3scroll()

scroll()是页面滚动事件

scrollLeft(),scrollTop()设置/获取被页面卷走(遮住)的左侧和顶部

不带参数是获取，参数为不带单位的数字则是设置设置被卷去的顶部

二、JQ的事件

2.1绑定事件

$.('div/.xxx/#xxx').click(function(){//程序})

JQ的事件和DOM中的事件都一样就是少些了on

2.2on()绑定事件

1.one()事件

如果有的事件只想触发一次，就可以用one()来绑定事件

2.on()事件

on()方法在匹配元素上绑定一个或者多个事件的事件处理函数

$('div').on(evevts,[selector],fn)

(1)events:一个或多个空格分隔符的事件类型，如click和keydown

(2)selector:元素的子元素选择器 

(3)fn:回调函数，绑定在元素身上的侦听函数

2.3on()的优势

(1)优势1:

可以绑定多个事件，多个处理事件处理程序

同处理程序:

$('div').on('mouseenter click',function(){//程序})

不同处理程序：

$('div').on({

mouseover:function(){//程序},

mouseover:function(){//程序},

mouseover:function(){//程序},

})

(2)优势2:

可以事件委托。意思就是把子元素身上绑定的事件委派给父元素

$('ul').on('click','li',function(){//程序})

(3)优势3:

动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

var li=$('<li>我是新创建的li</li>') （创建元素的方法）

$('div').on('click','li'function(){//程序})

2.4事件处理off()解绑事件

$('div').off()  解除绑定div元素所有的事件

$('div').off('click')  解除绑定div元素上面的点击事件

$('div').off('click','li') 解除绑定事件委托

2.5自触发事件

$('div').on('click',function(){

        console.log('hello word')

});

$('div').tirgger('click') 此时为自触发点击事件不需要鼠标点击(会触发默认行为)

$('div').triggerHandler('click') 也是自触发事件但是不会触发默认行为

***特例：

a标签的tigger('click')是一个特例，会触发a标签的点击事件,但是不会触发链接click事件的默认行为------跳转到href对应链接的操作。

三、JQ事件对象

$('div').on(events,'selector',function(event){})

event只是形参 可以更改

event.preventDefault() 阻止默认行为

event.stopPropagation()  阻止冒泡事件

***(事件传播过程分为三个阶段：‌捕获阶段、‌目标阶段和冒泡阶段。‌stopPropagation方法主要用于阻止事件在冒泡或捕获阶段的继续传播。‌)