jQuery事件
事件绑定与解绑
bind()方法
绑定事件的一种方式
- 括号中填写 事件名称 事件处理函数
- 允许同时绑定多个事件(使用空格隔开)
- 与事件监听器相似
unbind( )方法
解除绑定
- 括号中填写 事件名称 指定的事件处理函数名称
- 没有参数时会解绑所有事件
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
事件绑定
bind( )方法 - 绑定事件的一种方式
* 与事件监听器相似
* 括号中填写 事件名称 事件处理函数
unbind( )方法 - 解除绑定
* 括号中填写 事件名称 指定的事件处理函数名称
*/
/* 定位绑定事件的元素位置 */
var $div =$( '#d1' );
/* 为指定元素绑定事件 */
$div.bind( 'click', function () {
console.log( '我特啊呦弄啥嘞' );
} );
/* 也可以先定义事件处理函数并命名 - 方便绑定与解绑 */
function log () {
console.log( '我特啊呦弄啥嘞' );
}
/* 绑定事件 */
$div.bind( 'click', log );
/* 事件解绑 */
$div.unbind( 'click', log );
</script>
</body>
多事件绑定与解绑
<body>
<button id="an">按钮</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
多事件绑定
bind( )方法 - 允许同时绑定多个事件(使用空格隔开)
*/
/* 定位绑定事件的元素位置 */
var $an = $( '#an' );
/* 为指定元素绑定事件 */
$an.bind( 'mouseover mouseout', function () {
var $div = $( '#d1' );
/* 进行条件选择判断 - 什么时候触发什么事件 */
if ( $div.is(':hidden') ) {
$div.show();
} else {
$div.hide();
}
} );
/* 解绑指定的事件 */
$an.unbind( 'mouseover' );
</script>
</body>
绑定事件的方式
bind( )方法
- 在括号中填写 事件名称 事件处理函数
one( )方法
- 在括号中填写 事件名称 事件处理函数
- 该方法只执行一次
on( )方法
- 在括号中填写 事件名称 事件处理函数
解绑事件的方式
unbind( )方法
- 解除绑定“括号中填写 事件名称 指定事件处理函数名称”
off( )方法
- 解除绑定“括号中填写 事件名称 指定事件处理函数名称”
示例代码
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script src="jquery.js"></script>
<script>
/*
绑定事件的方式
bind( )方法 - 在括号中填写 事件名称 事件处理函数
* unbind( )方法 - 解除绑定“括号中填写 事件名称 指定事件处理函数名称”
on( )方法 - 在括号中填写 事件名称 事件处理函数
* off( )方法 - 解除绑定“括号中填写 事件名称 指定事件处理函数名称”
one( )方法 - 在括号中填写 事件名称 事件处理函数
* 只执行一次绑定事件
*/
var $d1 = $( '#d1' );
$d1.bind( 'click',function () {
console.log( '我特啊呦赌赢' );
} );
var $d2 = $( '#d2' );
$d2.on( 'click', function () {
console.log( '我特啊呦付汪木' );
});
var $d3 = $( '#d3' );
$d3.one( 'click', function () {
console.log( '咦!...嫩个鳖孙...' );
} );
</script>
</body>
事件模拟
trigger()方法
- 可以模拟事件触发后的效果
<body>
<button id="an">按钮</button>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/* 定位指定元素并且绑定事件 */
$( '#an' ).bind( 'click', function () {
$( '#d1' ).show();
} );
/* trigger()方法可以模拟事件触发后的效果 - 由用户触发的效果 */
$( '#an' ).trigger( 'click' );
</script>
</body>