jQuery学习笔记——事件相关
jQuery事件发展历程
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定
简单事件绑定
简单事件注册
click（handler）：单击事件；
mouseenter（handler）：鼠标进入事件；
mouseleave（handler）：鼠标离开事件；
缺点：
不能同时注册多个事件
bind方式注册事件
bind()共有两个参数：
①第一个参数：事件类型；
②第二个参数：事件处理函数
缺点：
不支持动态事件绑定，即创建新元素时，不会有事件绑定
jQuery 3.x已删除，而使用了on( )方法代替
<body>
<input type="button" value="按钮点击" />
<div id="pnum">
<p>12p>
<p>34p>
<p>56p>
<p>78p>
div>
<script src="./jquery-1.12.4.js">script>
<script>
// bind注册事件
$('p').bind("click mouseenter",function(){
$(this).css('background-color', 'skyblue');
})
$('90
').appendTo($('#pnum')); // 新添加的元素p没有注册事件
script>
body>
delegate方式注册事件
参数：
①第一个参数：selector，事件最终由谁来执行；
②第二个参数：事件的类型
③第三个参数：要做什么
特点：
①动态创建的元素也有注册事件
②只用创建一个事件，然后进行分配
实质：
通过冒泡来观察，注册事件
缺点：
只能注册委托事件
<body>
<input type="button" value="按钮点击" />
<div id="pnum">
<p>12p>
<p>34p>
<p>56p>
<p>78p>
div>
<script src="./jquery-1.12.4.js">script>
<script>
// delegate注册事件
// 委托事件,最终执行的不是div，而是由p来执行
$('div').delegate("p", 'mouseenter', function(){
// alert('hhhhh');
$(this).css('background-color', 'skyblue');
});
$('90
').appendTo($('#pnum')); // 新添加的p元素添加了注册事件
script>
body>
on注册事件
jQuery3.x删除了bind( )和delegate( )而使用on( )方法来代替，用on统一了所有事件的处理方式
- on注册简单事件
特点：
由自己触发，不支持动态绑定
语法：
$(selector).on(event，handler)
<input type="button" value="按钮点击" />
<div id="pnum">
<p>12p>
<p>34p>
<p>56p>
<p>78p>
div>
<script src="./jquery-1.12.4.js">script>
<script>
// on注册事件
// on事件注册简单事件
$('p').on('mouseenter', function(){
$(this).css('background-color', 'skyblue');
});
$('90
').appendTo($('#pnum'));
script>
body>
- on注册委托事件
语法：
$(selector).on(event，selector，data，handler )
参数：
①events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或自定义事件）；
②selector，执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行
③data，传递给处理函数的数据，事件触发的时候函数handler通过event.data来使用（并不常用），形如{key1:value1,key2:value2}的对象
④handler，事件处理函数
事件执行顺序
<body>
<input type="button" value="按钮点击" />
<div id="pnum">
<p>12p>
<p>34p>
<p>56p>
<p>78p>
div>
<script src="./jquery-1.12.4.js">script>
<script>
// 执行顺序
// 点击div中的p时，显示顺序是 1 >> 3 >> 2
$('p').on('click',function(){
alert('1');
});
$('div').on('click', function(){
alert('2');
})
$('div').on('click', 'p', function(){
alert('3');
})
script>
body>
总结：
如果元素其有自己的注册事件，也有委托事件，则先执行委托事件，再执行自己的事件
绑定事件处理函数
ready(fn)
指定当jQuery所对应的DOM对象装载完成时执行fn( )函数
常见的场景：
入口函数：
$(document).ready(function(){
//...
})
指定在页面装载完成后立即执行ready( )方法里指定的函数
on（events [，selector] [，data]，handler(eventObj)）
<body>
<input type="button" value="按钮点击" />
<div id="pnum">
<p>12p>
<p>34p>
<p>56p>
<p>78p>
div>
<script src="./jquery-1.12.4.js">script>
<script>
$('div').on('click', 'p', {reading: 'book', watching: 'movie'}, function(event){
alert('data属性:\n' + event.data.watching);
})
script>
body>
off(events [，selector] [，handler(eventobj)])
one()方法的反向操作，用于删除绑定的事件处理函数
如果指定selector，则只删除匹配selector的DOM元素上的事件处理函数；
如果指定了handler，则只删除该事件处理函数；
但如果没有指定任何参数，则删除jQuery对象中所有DOM元素上的事件处理函数；
<body>
<input type="button" value="按钮点击" />
<div id="pnum">
<p>12p>
<p>34p>
<span>spspan>
div>
<br />
<span>spanspan>
<script src="./jquery-1.12.4.js">script>
<script>
$('div').on('click mouseenter', 'p', {reading: 'book', watching: 'movie'}, function(event){
alert('data属性:\n' + event.data.watching);
})
var foo = function(){
$(this).css('background-color', 'skyblue');
}
$('div').on('click mouseenter', 'p', {reading: 'book', watching: 'movie'}, foo)
$('span').on('mouseenter', function(){
$(this).css('background-color', 'pink');
$(this).css('color', 'red');
})
// $('span').off('mouseenter');
// $('div').off('mouseenter', 'p');
$('div').off('mouseenter', 'p', foo);
// $('div').off()
script>
body>
one(type，data，fn)
这个事件处理函数只会执行一次，也就是说，使用one( )绑定的事件处理函数被激发一次后，jQuery将会解除one( )方法绑定的事件处理函数
trigger(type [，data])
以编程的方式触发当前jQuery对象包含的所有DOM对象上的type事件，该方法可以触发由bind( )绑定的自定义事件
除此外，该函数会导致DOM元素执行同名的事件动作
<body>
<input type="button" value="按钮点击" id="btn" />
<input type="checkbox" name="触发" id="check" />
<script src="./jquery-1.12.4.js">script>
<script>
// trigger触发事件
$('#btn').on("click", function(){
$('#check').trigger('click');
})
script>
body>
triggerHandler(type [，data])
该方法与trigger的作用基本相似，只是低昂用该方法来触发type事件时，不会导致DOM元素执行同名的事件动作。
hover(over，out)
其中over和out都是函数，分别绑定到onmouseover、onmouseout事件上作为事件处理函数
<body>
<p id='hover'>颜色p>
<script src="./jquery-1.12.4.js">script>
<script>
// hover
$('#hover').hover(
function(){$(this).css('background-color', 'skyblue')},
function(){$(this).css('background-color', 'pink')}
)
script>
body>
toggle([speed]，[easing]，[fn])
切换jQuery对象包含的DOM元素的显示/隐藏状态。
其中：
speed参数指定“显示/隐藏”动画效果的速度，默认是0ms，可能的值包含slow、normal、fast；
easing参数指定切换效果，默认为swing，也可指定为linear；
fn为在动画完成时执行的函数，每个元素的动画完成后执行一次fn函数
<body>
<input type="button" value="toggle" id='tbtn' />
<div id="tog">div>
<script src="./jquery-1.12.4.js">script>
<script>
// toggle
$('#tbtn').on('click', function(){
$('#tog').toggle("slow", "linear", function(){
console.log("动画完成！")
})
})
script>
body>
事件对象
jQuery事件大致包含以下几种属性和方法：
- currentTarget：
表示在事件冒泡阶段中事件对象所处的DOM对象； - data:
表示通过bind()、on()、delegate()等方法绑定事件处理函数时传入的data参数； - delegateTarget：
返回在jQuery中绑定事件处理函数的对象 - isDefaultPrevented( ):
判断是否调用了事件对象的preventDefault( )方法，即是否阻止了默认行为。 - isPropagationStopped( )：
判断是否调用了事件对象的stopPropogation( )方法，即是否阻止事件传播。 - pageX：
返回鼠标指针距离文档左边界的距离。 - pageY：
返回鼠标指针距离文档上边界的距离。 - preventDefault( ):
调用该方法阻止事件的默认行为。 - which：
对于鼠标、键盘事件，该属性返回激发该事件的鼠标键或键盘键。 - type：
返回事件的类型 - relatedTarget：
返回参与该事件的所有其他DOM元素 - result：
返回该事件触发的事件处理函数执行后的返回值 - stopPropagation( ):
调用该方法停止事件传播 - target：
返回触发该事件的初始事件源 - timeStamp：
返回1970-01-01到浏览器创建该事件时的时间差，以ms为单位。