.bind() | Hàm jQuery | Tham khảo jQuery

Định nghĩa và sử dụng

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

Cấu trúc

Đã được thêm vào từ phiên bản 1.4

Xử lý sự kiện:

$('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="https://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ả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery - sử dụng click
<div class="test">Click me</div> <span></span>	<div class="test">Click me</div> <span>Đã click</span>

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

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://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ả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery - sử dụng click
<div class="test">Mouse over me</div> <span></span>	<div class="test">Mouse over me</div> <span>Con trỏ chuột đang ở vị trí (X, Y)</span>

.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="https://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ả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery - sử dụng click
<div class="test">Click me</div> <span></span>	<div class="test">Click me</div> <span>Đã click</span>

.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="https://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ả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery - sử dụng click
<div class="test">Click me</div> <span></span>	<div class="test">Click me</div> <span>Click</span> <span>Double click</span>

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div.test').bind({
        click : function(){
            $('span').text('Click');
        },dblclick : function(){
            $('span').text('Double click');
        },mouseenter : function(){
            $('span').text('Mouse enter');
        },mouseleave : function(){
            $('span').text('Mouse leave');
        }
    });
});
</script>
</head>

<body>
<div class="test">Click me</div>
<span></span>
</body>
</html>

Hiển thị trình duyệt:

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery - sử dụng click
<div class="test">Click me</div> <span></span>	<div class="test">Click me</div> <span>Click</span> <span>Double click</span> <span>Mouse enter</span> <span>Mouse leave</span>

.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="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var message = 'Học Web Chuẩn';
    $('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ả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery - sử dụng click
<div class="test">Click me</div> <span></span>	<div class="test">Click me</div> <span>Đã click Học Web Chuẩn</span>

.before()

.blur()