 Show Trong bài học này, chúng ta sẽ tìm hiểu về event – sự kiện trong Javascript. Chúng ta sẽ tìm hiểu về các loại sự kiện, một số ví dụ và cách thêm các sự kiện cho thẻ html.
Video – Event – Sự kiện trong JavascriptHướng dẫn chi tiết"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni". Event – sự kiện là gì? Các loại sự kiện thường dùngCách để thêm sự kiện cho các phần tử HTML DOM Thêm trực tiếp sự kiện vào html
Cách để thêm sự kiện cho các phần tử HTML DOM"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni". Xảy ra khi bạn copy nội dung của thẻ bài 6 nhé. Ngoài ra, mình sẽ dùng Bootstrap để căn chỉnh cho html nhé. Bạn có thể lượt bỏ phần Bootstrap cũng được. Thêm trực tiếp sự kiện vào htmlThêm sự kiện cho các phần tử HTML DOM bằng JS <div class="form-group mt-5"> <input class="form-control" type="text" id="mes" onkeyup="xemKetQua()"> <div class="mt-3" id="result"></div> </div> Sự kiện cho phần tử này, nhưng thực thi trên phần tử khác Thêm sự kiện bằng phương thức addEventListener() <script type="text/javascript">
function xemKetQua() {
// Xác định 2 thẻ theo id
var input_text = document.getElementById("mes")
var result = document.getElementById("result")
// lấy giá trị của input_text
var text = input_text.value
// gán giá trị cho result
result.innerHTML = text
}
</script>
Event là sự tương tác của JavaScript với HMTL được xử lý thông qua các sự kiện xảy ra khi người sử dụng hoặc trình duyệt thao tác một trang. Ví dụ Thêm sự kiện cho các phần tử HTML DOM bằng JSSự kiện cho phần tử này, nhưng thực thi trên phần tử khác <ul class="list-group"> <li class="list-group-item"><a href="" class="dang2-js">Cras justo odio</a></li> <li class="list-group-item"><a href="" class="dang2-js">sdajusto odio</a></li> <li class="list-group-item"><a href="" class="dang2-js">Csdass justo odio</a></li> </ul> Thêm sự kiện bằng phương thức addEventListener() <script type="text/javascript">
// Lấy danh sách các thẻ
var list = document.getElementsByClassName("dang2-js") // elements
for (var i = 0; i < list.length; i++) {
list[i].onclick = function(){
alert("Dạng 2 thêm event bằng gán js")
return false
}
</script>
Event là sự tương tác của JavaScript với HMTL được xử lý thông qua các sự kiện xảy ra khi người sử dụng hoặc trình duyệt thao tác một trang. Ví dụgetElementsByClassName(“dang2-js”) để lấy một nhóm các phần tử. Kết quả của phương thức này là một mảng dữ liệu. Một số sự kiện thường dùng STT Sự kiện cho phần tử này, nhưng thực thi trên phần tử khácThêm sự kiện bằng phương thức addEventListener() Event là sự tương tác của JavaScript với HMTL được xử lý thông qua các sự kiện xảy ra khi người sử dụng hoặc trình duyệt thao tác một trang. Ví dụ <form class="mt-5">
<div class="form-group">
<label>User name</label>
<input type="text" class="form-control" id="username" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" required >
</div>
<div class="form-group">
<label>Nhập lại password</label>
<input type="password" class="form-control" id="re_password" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-outline-info" onclick="kiemTraForm()">Đăng ký</button>
</div>
</form>
Một số sự kiện thường dùng <script type="text/javascript">
function kiemTraForm() {
var username = document.getElementById("username").value
var password = document.getElementById("password").value
var re_password = document.getElementById("re_password").value
// if(username==""){
// alert("Chưa nhập User name")
// return false
// }
// if(password==""){
// alert('Chưa nhập Password')
// return false
// }
if(password!= re_password){
alert('Mật khẩu chưa khớp')
return false
}
return true
}
</script>
STT Event Name Thêm sự kiện bằng phương thức addEventListener()Event là sự tương tác của JavaScript với HMTL được xử lý thông qua các sự kiện xảy ra khi người sử dụng hoặc trình duyệt thao tác một trang. Ví dụ <script type="text/javascript">
var input_username = document.getElementById("username")
input_username.addEventListener('keyup',function() {
if(input_username.value.length>15){
alert("Tên username quá dài, hơn 15 ký tự")
}
});
</script>
Một số sự kiện thường dùng STTphương thức addEventListener(“tên của event”,hàm xử lý). Event Namebỏ chữ “on”, ví dụ, onkeyup thành keyup. DescriptionDownload onclick comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web. Xảy ra khi click vào thẻ HTML ệ |
