Định nghĩa và sử dụng .bind() trong jQuery

.bind(): được sử dụng để đính kèm xử lý một sự kiện cho thành phần.

Cấu trúc .bind() trong jQuery

Đã đượ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);
});

.bind(Sự kiện,function(){})

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ả.

.bind(Sự kiện,function(event){})

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ả.

.bind('Sựkiện1 Sựkiện2',function(){})

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ả.

.bind({Sựkiện1:function(){}, Sựkiện2:function(){}})

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ả.

.bind(Sự kiện,Dữ liệu,(function(event){}))

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ả.

Viết câu trả lời

Drop Images

0 Bình luận