jQuery事件
页面加载
- DOM的页面加载机制
- 如果先编写JavaScript代码(用于获取页面元素),再加载页面元素
- 导致问题 - 无法成功获取页面元素
- 原因 - 执行这段JavaScript代码时,页面元素还没有被加载(不存在)
- 解决先执行代码后加载元素的问题 - window.onloa
- 保证先加载页面元素完毕后,在执行JavaScript代码
-
window对象表示浏览器窗口
- load事件 - 当浏览器窗口加载页面完毕时被触发
- 事件处理函数中的代码逻辑 -> 在浏览器加载页面完毕后执行
示例代码:
<!-- 先加载JavaScript代码逻辑 -->
<script>
/*
window对象表示浏览器窗口
* load事件 - 当浏览器窗口加载页面完毕时被触发
* 事件处理函数中的代码逻辑 -> 在浏览器加载页面完毕后执行
*/
window.onload = function(){
var btn = document.getElementById('btn');
console.log(btn);
}
</script>
</head>
<body>
<!-- HTML元素 -->
<button id="btn">按钮</button>
</body>事件绑定
事件的绑定
-
bind(type, data, callback)方法 - 绑定事件
-
参数
- type - 表示绑定的事件名称(注意:没有on)
- data - 作为event.data属性传递给事件对象的额外数据对象
- callback - 表示绑定事件的处理函数
-
示例代码:
function click1(){
console.log('this is button.');
}
function click2(){
console.log('this is button too.');
}
$('#btn').bind('click', click1);
$('#btn').bind('click', click2);解绑定事件
-
unbind(type, data, callback)方法 - 解绑定事件
-
参数
- type - 表示绑定的事件名称(注意:没有on)
- data - 作为event.data属性传递给事件对象的额外数据对象
- callback - 表示绑定事件的处理函数
-
情况
- 如果只传递事件名称的话 - 解绑定该事件的所有处理函数
- 如果传递事件名称和指定的处理函数 - 解绑定该事件的指定处理函数
-
示例代码:
$('#btn').unbind('click', click1);bind()与unbind()中的data参数
- data参数的值 -> 利用event事件对象的data属性进行接收
- 特点 - 该参数的数据内容只能在事件的处理函数中被使用
示例代码:
$('#btn').bind('click', { a : '皮卡丘' }, function(event){
// var obj = { a : '皮卡丘' };
console.log(event.data);
});多事件的绑定与解绑定
- bind()方法支持同时绑定多个事件 - 事件名称使用空格隔开
- 同时绑定的多个事件, 具有同一个处理函数
- unbind()
- 不传递任何参数 - 表示解绑指定元素的所有事件
- 传递一个事件名称 - 表示解绑指定元素的指定单个事件
- 传递多个事件名称 - 表示解绑指定元素的指定多个事件
- unbind()方法
- 没有指定任何事件时 - 将指定元素的所有事件全部解绑定
- 指定一个事件名称时 - 将指定元素的指定当个事件解绑定
- 指定多个事件名称时 - 将指定元素的指定多个事件解绑定
示例代码:
// bind()方法 - 多事件绑定，事件名称之间使用空格分隔
$('#title').bind('mouseover mouseout', function(){
if ($('ul').is(':hidden')) {
$('ul').css('display','block');
} else {
$('ul').css('display','none');
}
});
/*
unbind()方法
1.没有指定任何事件时 - 将指定元素的所有事件全部解绑定
2.指定一个事件名称时 - 将指定元素的指定当个事件解绑定
3.指定多个事件名称时 - 将指定元素的指定多个事件解绑定
*/
$('#title').unbind('mouseover mouseout');
事件绑定方法的对比
-
jQuery中提供多组事件绑定与解绑定的方法
- bind()与unbind() - jQuery 3.0版本后删除方法
-
on()与off()方法 - jQuery 1.7版本后新增方法
- 其实bind()与unbind()的底层方法就是on()和off()
-
live()与die() - jQuery 1.7版本后删除方法
- 作用 - 实现事件委托
-
delegate()与undelegate() - jQuery 1.6版本后新增方法，jQuery 3.0版本后删除方法
- 作用 - 实现事件委托
- one() - 为事件绑定一次性的函数
事件切换
示例代码:
// jQuery提供hover(over, out)方法
$('#title').hover(function(){
$('ul').css('display','block');
},function(){
$('ul').css('display','none');
});事件模拟
- trigger()方法 - 可以模拟事件触发后的效果
示例代码:
<body>
<button id="btn">按钮</button>
<script>
// 绑定事件 - 由用户行为进行触发，调用处理函数
$('#btn').bind('click',function(){
console.log('this is button.');
});
// 模拟用户触发事件
$('#btn').trigger('click');
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。