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>12</p>
<p>34</p>
<p>56</p>
<p>78</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
// bind注册事件
$('p').bind("click mouseenter",function(){
$(this).css('background-color', 'skyblue');
})
$('<p>90</p>').appendTo($('#pnum')); // 新添加的元素p没有注册事件
</script>
</body>
delegate方式注册事件
参数:
①第一个参数:selector,事件最终由谁来执行;
②第二个参数:事件的类型
③第三个参数:要做什么
特点:
①动态创建的元素也有注册事件
②只用创建一个事件,然后进行分配
实质:
通过冒泡来观察,注册事件
缺点:
只能注册委托事件
<body>
<input type="button" value="按钮点击" />
<div id="pnum">
<p>12</p>
<p>34</p>
<p>56</p>
<p>78</p>
</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');
});
$('<p>90</p>').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>12</p>
<p>34</p>
<p>56</p>
<p>78</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
// on注册事件
// on事件注册简单事件
$('p').on('mouseenter', function(){
$(this).css('background-color', 'skyblue');
});
$('<p>90</p>').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>12</p>
<p>34</p>
<p>56</p>
<p>78</p>
</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>12</p>
<p>34</p>
<p>56</p>
<p>78</p>
</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>12</p>
<p>34</p>
<span>sp</span>
</div>
<br />
<span>span</span>
<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为单位。