一、jQuery事件
1.1、事件注册
1.1.1、单个事件注册
1
2
3
4
5
6
7
| # 语法
element.事件(function(){})
# 案例
$('div').click(function(){
// 事件处理程序
})
|
其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、
resize、scroll 等。
1.1.2、案例
1
2
3
4
5
6
7
8
| <body>
<div>HelloWorld</div>
<script>
$('div').click(function() {
$(this).css('color', 'red');
});
</script>
</body>
|
1.1.3、总结
jQuery 为我们提供了方便的事件注册机制。
- 优点: 操作简单，且不用担心事件覆盖等问题。
- 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
二、jQuery事件处理
因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：
- on(): 用于事件绑定，目前最好用的事件绑定方法
- off(): 事件解绑
- trigger() / triggerHandler(): 事件触发
2.1、on() 绑定事件
2.1.1、说明
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。
1
2
3
4
5
6
| # 语法
element.on(events,[selector],fn)
# 说明
1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
2. selector: 元素的子元素选择器 。
3. fn:回调函数 即绑定在元素身上的侦听函数。
|
2.1.2、on方法优势一
可以绑定多个事件，多个处理事件处理程序。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script>
$('div').on({
mouseover: function() {
},
mouseout: function() {
},
click: function() {
}
});
$('div').on('mouseover mouseout', function() {
});
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <body>
<div>HelloWorld</div>
<script>
$('div').on({
mouseover: function() {
$(this).css('color', 'red');
},
mouseout: function() {
$(this).css('color', 'blue');
},
click: function() {
$(this).css('color', 'skyblue');
}
});
</script>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <head>
<style>
.current {
background-color: blue;
}
</style>
</head>
<body>
<div>HelloWorld</div>
<script>
$('div').on({
mouseover: function() {
$(this).addClass('current');
},
mouseout: function() {
$(this).removeClass('current');
}
});
</script>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <head>
<style>
.current {
background-color: blue;
}
</style>
</head>
<body>
<div>HelloWorld</div>
<script>
$('div').on("mouseover mouseout", function() {
$(this).toggleClass('current');
});
</script>
</body>
|
2.1.3、on方法优势二
可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<ul>
<li>周芷若</li>
<li>赵敏</li>
<li>张无忌</li>
</ul>
<script>
$('ul li').click(function() {
$(this).css('color', 'red');
});
</script>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <body>
<ul>
<li>周芷若</li>
<li>赵敏</li>
<li>张无忌</li>
</ul>
<script>
$('ul').on('click', 'li', function() {
$(this).css('color', 'blue');
})
</script>
</body>
|
在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
2.1.4、on方法优势三
动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件。
1
2
3
4
5
| <script>
$('div').on('click', 'p', function() {
alert("俺可以给动态生成的元素绑定事件")
});
</script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <body>
<ul>
</ul>
<button>动态添加一个li节点元素</button>
<script>
$('button').click(function() {
var $li = $('<li>周芷若</li>');
$('ul').append($li);
});
$('ul').on('click', 'li', function() {
$(this).css('color', 'blue');
});
</script>
</body>
|
2.1.5、案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <body>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<input type="button" value="发表" class="publish">
<ul></ul>
<script>
$('.publish').on('click', function() {
var content = $('textarea').val();
if (content.trim() != '') {
var $li = $('<li></li>');
$li.html(content + " <a href='javascript:;'>删除</a>");
$('ul').prepend($li);
$('textarea').val('');
}
});
$('ul').on('click', 'a', function() {
$(this).parent().remove();
});
</script>
</body>
|
2.2、off() 解绑事件
2.2.1、说明
当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件
解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定
方法 one()，在这里我们重点讲解一下 off() 。
==off() 方法可以移除通过 on() 方法添加的事件处理程序。==
2.2.2、语法
1
2
3
| 1. $("p").off() // 解绑p元素所有事件处理程序
2. $("p").off( "click") // 解绑p元素上面的点击事件 后面的 click 是侦听函数名
3. $("ul").off("click", "li"); // 解绑事件委托
|
如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
2.2.3、案例1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div>周芷若</div>
<script>
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$('div').off();
</script>
</body>
|
2.2.4、案例2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div>周芷若</div>
<script>
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$('div').off('click');
</script>
</body>
|
2.2.5、案例3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<ul>
<li>周芷若</li>
<li>赵敏</li>
<li>张无忌</li>
</ul>
<script>
$('ul').on('click', 'li', function() {
$(this).css('color', 'red');
});
$('ul').off('click', 'li');
</script>
</body>
|
2.2.6、one() 方法
one() 只能触发事件一次。
1
2
3
4
5
6
7
8
9
| <body>
<div>周芷若</div>
<script>
$('div').one('click', function() {
console.log('我只是触发一次哦');
});
</script>
</body>
|
2.3、trigger()自动触发事件
2.3.1、说明
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;
1
2
3
4
5
6
| 1. element.click() // 第一种简写形式
2. element.trigger("事件类型") // 第二种自动触发模式
3. element.triggerHandler('事件类型') // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别
|
2.3.2、案例1
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<div>周芷若</div>
<script>
$('div').on('click', function() {
$(this).css('color', 'red');
});
$('div').click();
</script>
</body>
|
2.3.3、案例2
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<div>周芷若</div>
<script>
$('div').on('click', function() {
$(this).css('color', 'red');
});
$('div').trigger('click');
</script>
</body>
|
2.3.4、案例3
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
用户名：<input type="text">
<script>
$("input").on("focus", function() {
$(this).val("HelloWorld");
});
$("input").trigger('focus');
</script>
</body>
|
2.3.5、案例4
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
用户名：<input type="text">
<script>
$("input").on("focus", function() {
$(this).val("HelloWorld");
});
$("input").focus();
</script>
</body>
|
2.3.6、案例5
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
用户名：<input type="text">
<script>
$("input").on("focus", function() {
$(this).val("HelloWorld");
});
$("input").triggerHandler('focus');
</script>
</body>
|
2.4、事件对象
2.4.1、说明
jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就
会有事件对象的产生。
1
2
3
4
5
| # 语法
element.on(events,[selector],function(event) {})
# 说明
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
|
2.4.2、案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <body>
<div>张无忌</div>
<script>
$(document).on("click", function() {
console.log('点击了document文档对象');
});
$('div').on('click', function(event) {
console.log('我点击了div');
event.stopPropagation();
});
</script>
</body>
|
==注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event。==
