.bind(): được sử dụng để đính kèm xử lý một sự kiện cho thành phần.
Đã được thêm vào từ phiên bản 1.4
Xử lý sự kiện:
.bind(Sự kiện,function(){})
-------------------------------------------------------------------------------------------------
$('div.test').bind('click',function(){
$('span').text('Đã click');
});
Đối tượng (object) - sự kiện:
.bind('Sự kiện',function(event){})
-------------------------------------------------------------------------------------------------
$('div.test').bind('mouseover',function(){
$('span').text('Con trỏ chuột đang ở vị trí (' + event.pageX + ',' + event.pageY + ')');
});
Nhiều sự kiện:
.bind('Sựkiện1 Sựkiện2',function(){})
-------------------------------------------------------------------------------------------------
$('div.test').bind('click dblclick',function(){
$('span').text('Đã click');
});
.bind({Sựkiện1:function(){}, Sựkiện2:function(){}})
-------------------------------------------------------------------------------------------------
$('div.test').bind({
click : function(){
$('span').text('Click');
},dblclick : function(){
$('span').text('Double click');
}
});
Đã được thêm vào từ phiên bản 1.0
Dữ liệu (data) - sự kiện:
.bind('Sự kiện','Dữ liệu',(function(event){}))
-------------------------------------------------------------------------------------------------
var message = 'Học Web Chuẩn'
$('div.test').bind('click',{msg: message},function(event){
$('span').text('Đã click ' + event.data.msg);
});
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div.test').bind('click',function(){
$('span').text('Đã click');
});
});
</script>
</head>
<body>
<div class="test">Click me</div>
<span></span>
</body>
</html>
Hiển thị trình duyệt:
Click vào "Click me" để thấy kết quả.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div.test').bind('mouseover',function(event){
$('span').text('Con trỏ chuột đang ở vị trí (' + event.pageX + ',' + event.pageY + ')');
});
});
</script>
</head>
<body>
<div class="test">Mouse over me</div>
<span></span>
</body>
</html>
Hiển thị trình duyệt:
Di chuyển chuột qua lại chữ "Mouse over me" để thấy kết quả.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div.test').bind('click dblclick',function(){
$('span').text('Đã click');
});
});
</script>
</head>
<body>
<div class="test">Click me</div>
<span></span>
</body>
</html>
Hiển thị trình duyệt:
Click vào "Click me" để thấy kết quả.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('div.test').bind({
click : function(){
$('span').text('Click');
},dblclick : function(){
$('span').text('Double click');
}
});
});
</script>
</head>
<body>
<div class="test">Click me</div>
<span></span>
</body>
</html>
Hiển thị trình duyệt:
Click vào "Click me" hoặc double click để thấy kết quả.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
var message = 'Học Lập Trình';
$('div.test').bind('click',{msg: message},function(event){
$('span').text('Đã click ' + event.data.msg);
});
});
</script>
</head>
<body>
<div class="test">Click me</div>
<span></span>
</body>
</html>
Hiển thị trình duyệt:
Bên trên là một ví dụ đơn giản bind xử lý data, click vào "Click me" để thấy kết quả.
Unpublished comment
Viết câu trả lời