Thứ Năm, 23 tháng 1, 2014
JavaScript Sự kiện HTML DOM
HTML DOM cho phép Javascript để phản ứng với các sự kiện HTML.
Ví dụ
Mouse Over Me
Click Me
Phản ứng với sự kiện
Một JavaScript có thể được thực hiện khi sự kiện xảy ra, giống như khi người dùng nhấp vào một phần tử HTML.
Để thực thi mã khi người dùng nhấp vào một phần tử, thêm mã JavaScript vào một thuộc tính sự kiện HTML:
onclick=JavaScript
Ví dụ về các sự kiện HTML:
- Khi người dùng nhấp chuột
- Khi một trang web đã được nạp
- Khi một hình ảnh đã được tải
- Khi con chuột di chuyển trên một phần tử
- Khi một lĩnh vực đầu vào thay đổi
- Khi một hình thức HTML được gửi
- Khi người dùng đột quỵ một phím
Trong ví dụ này, nội dung của phần tử <h1> được thay đổi khi người dùng nhấp chuột vào nó:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Thử nó cho mình »
Trong ví dụ này, một chức năng được gọi là từ xử lý sự kiện:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
Thử nó cho mình »
Các thuộc tính sự kiện HTML
Phân công các sự kiện sang HTML yếu tố mà bạn có thể sử dụng các thuộc tính sự kiện.
Ví dụ
Gán một sự kiện onclick đến một yếu tố nút:
<button onclick="displayDate()">Try it</button>
Thử nó cho mình »
Trong ví dụ trên, một chức năng có tên displayDate sẽ được thực hiện khi nút được nhấp.
Gán sự kiện Sử dụng HTML DOM
DOM HTML cho phép bạn gán các sự kiện để các phần tử HTML bằng cách sử dụng JavaScript:
Ví dụ
Gán một sự kiện onclick đến một yếu tố nút:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Click the button to execute the <em>displayDate()</em> function.</p>
<button id="myBtn">Try it</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Thử nó cho mình »
Trong ví dụ trên, một chức năng có tên displayDate được gán cho một phần tử HTML với id = "myBtn".
Các chức năng sẽ được thực hiện khi nút được nhấn vào.
Các onload và onunload Sự kiện
Các sự kiện onload và onunload được kích hoạt khi người dùng nhập vào hoặc rời khỏi trang.
Các sự kiện onload có thể được sử dụng để kiểm tra loại trình duyệt và phiên bản trình duyệt của khách truy cập, và tải đúng phiên bản của trang web dựa trên thông tin.
Các sự kiện onload và onunload có thể được sử dụng để đối phó với các tập tin cookie.
Ví dụ
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>An alert box should tell you if your browser has enabled cookies or not.</p>
</body>
</html>
Thử nó cho mình »
Các sự kiện onchange
Sự kiện onchange thường được sử dụng kết hợp với xác nhận của các lĩnh vực đầu vào.
Dưới đây là một ví dụ về cách sử dụng onchange. Các chữ hoa () chức năng sẽ được gọi khi người dùng thay đổi nội dung của một trường đầu vào.
Các onmouseover và onmouseout Sự kiện
Các onmouseover và onmouseout sự kiện có thể được sử dụng để kích hoạt một chức năng khi sử dụng chuột trên, hoặc ra khỏi, một phần tử HTML.
Ví dụ
Một ví dụ đơn giản onmouseover-onmouseout:
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
</body>
</html>
Thử nó cho mình »
Các ONMOUSEDOWN, onmouseup và onclick Sự kiện
Các ONMOUSEDOWN, onmouseup, và các sự kiện onclick là tất cả các bộ phận của một cái click chuột. Đầu tiên khi một con chuột nút được nhấn, sự kiện onMouseDown được kích hoạt, sau đó, khi con chuột nút được phát hành, sự kiện onmouseup được kích hoạt, cuối cùng, khi con chuột nhấp chuột là hoàn thành, các sự kiện onclick được kích hoạt.
Ví dụ
Một ví dụ onMouseDown-onmouseup đơn giản:
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét