• Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web
  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Tổng hợp sự kiện onclick trong html mới nhất 2020

ATPMedia Bởi ATPMedia
21/11/2019
Trang chủ Kiến thức Code Web

Sự kiện onclick trong html là một trong những keyword được search nhiều nhất trên Google về chủ đề sự kiện onclick trong html. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Tổng hợp sự kiện onclick trong html mới nhất 2020.

Sự Kiện Onclick Trong Html

Tổng hợp sự kiện onclick trong html mới nhất 2020

1) sự kiện là gì !?

– Thông thường, event là những hành động của user khi tương tác lên phần tử HTML.

– gợi ý:

=> ví dụ, bạn hãy thử nhấn chuột vào đây
=> gợi ý, bạn hãy thử

=> gợi ý, bạn hãy thử 

Di chuyển con trỏ vào đây
  • Khi user nhấn chuột vào phần tử, đó là một event.
  • Khi user gõ văn bản vào textfield, đó là một sự kiện.
  • Khi người dùng di chuyển con trỏ vào phần tử, đó là một sự kiện.
  • ….

2) Các event trong JavaScript

– Trong JavaScript, mỗi sự kiện sẽ tương ứng với một cái tên.

– Dưới đây là danh mục một vài sự kiện đa dạng mà ta thường dùng trong JavaScript.

Tên event mô tả
onclick sự kiện xảy ra khi user nhấn chuột vào phần tử
ondblclick sự kiện xảy ra khi người dùng click kép chuột vào phần tử
onmouseenter sự kiện xảy ra khi người dùng di chuyển con trỏ vào phần tử
onmouseleave sự kiện xảy ra khi user di chuyển con trỏ ra khỏi phần tử.
onkeydown sự kiện xảy ra khi user vừa mới bấm một phím
onkeyup event xảy ra khi người dùng nhả phím ra
oncopy event xảy ra khi user copy content của phần tử
oncut event xảy ra khi người dùng cắt nội dung của phần tử
onpaste event xảy ra khi người dùng dán content vào phần tử
onchange sự kiện xảy ra khi người dùng refresh trị giá của phần tử

Bạn sẽ được tìm hiểu đầy đủ all các event trong bài chỉ dẫn nâng cao về event

3) Bắt sự kiện là gì !?

– “Bắt sự kiện” là khi một event nào đó xảy ra thì ta mong muốn JavaScript giận dữ lại với sự kiện đó bằng việc thực thi một đoạn mã định hình.

– ví dụ, tôi muốn khi người dùng click chuột vào nút này thì câu lệnh alert(‘Xin chào JavaScript’) sẽ được thực thi.

– gợi ý, tôi muốn:

– Khi user di chuyển con trỏ vào phần tử này thì màu nền của phần tử này sẽ chuyển sang màu hồng (tức là câu lệnh this.style.backgroundColor=’pink’ được thực thi)

– Khi user di chuyển con trỏ ra khỏi phần tử này thì màu nền của phần tử này sẽ chuyển sang màu trắng (tức là câu lệnh this.style.backgroundColor=’white’ được thực thi)

4) mẹo bắt event trong JavaScript

– Trước khi bắt sự kiện thì ta cần phải định hình rõ ba thành phần:

  • (1) Phần tử sử dụng để xảy ra event.
  • (2) event sẽ xảy ra.
  • (3) Đoạn mã sẽ được thực thi khi sự kiện xảy ra.

– Dưới đây là cú pháp dùng để bắt sự kiện:

<Tên-phần-tử Tên-sự-kiện=”đoạn mã sẽ được thực thi khi sự kiện xảy ra”>
gợi ý

Khi người dùng click kép chuột vào nút “Xem kết quả” thì đoạn mã:

var a = 100;
var b = 50;
var result = (a + b)*2;
alert(‘Kết quả của biểu thức là: ‘ + result)
 sẽ được thực thi.

<html>
<body>
    <buttonondblclick="var a = 100;var b = 50;var result = (a + b)*2;alert('Kết quả của biểu thức là: ' + result)">Xem kết quảbutton>
body>
html>
nhìn thấy ví dụ
ví dụ

Khi người dùng bấm chuột vào nút “Xin chào” thì hàm hello() sẽ được thực thi

<html>
<body>
    <buttononclick="hello()">Xin chàobutton>
    <pid="demo">p>
    <script>functionhello()var name = "Nguyễn Thành Nhân";var year = 1993;var str = "Tôi tên " + name + " sinh năm " + year;document.getElementById("demo").innerHTML = str;
        
    script>
body>
html>
nhìn thấy gợi ý

– lưu ý: Với cùng một phần tử, ta đủ nội lực bắt cho nó nhiều event.

ví dụ

Phần tử

có id là dùng thử bên dưới được bắt hai sự kiện:

  • Khi user di chuyển con trỏ vào nó thì sự kiện onmouseenter xảy ra và câu lệnh this.style.backgroundColor=’yellow’ sẽ được thực thi.
  • Khi người dùng di chuyển con trỏ vào nó thì event onmouseleave xảy ra và câu lệnh this.style.backgroundColor=’gray’ sẽ được thực thi.
<html>
<head>
    <styletype="text/css">#demowidth:300px;height:200px;background-color:gray;
        
    phong cách>
head>
<body>
    <divid="demo"onmouseenter="this.style.backgroundColor='yellow'"onmouseleave="this.style.backgroundColor='gray'">div>
body>
html>
xem ví dụ

– lưu ý:

  • Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy kép thì trong đoạn mã tuyệt đối k được chứa ký tự là dấu nháy kép.
  • Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy đơn thì trong đoạn mã tuyệt đối k được chứa ký tự là dấu nháy đơn.
gợi ý
<buttononclick="alert("Hello")">Xin chàobutton> <buttononclick='alert('Hello')'>Xin chàobutton> <buttononclick="alert('Hello')">Xin chàobutton> <buttononclick='alert("Hello")'>Xin chàobutton>

5) Một số ví dụ khác

ví dụ
<html>
<body>
    <inputtype="text"onkeydown="this.style.backgroundColor='pink'"onkeyup="this.style.backgroundColor='yellow'"placeholder="gõ ký tự vào đây">
body>
html>
nhìn thấy gợi ý
gợi ý
<html>
<body>
    <textareacols="50"rows="15"oncopy="alert('Bạn vừa copy content của phần tử này')"oncut="alert('Bạn vừa cắt nội dung của phần tử này')"onpaste="alert('Bạn vừa dán nội dung vào phần tử này')">Tài liệu tut học lập trình webtextarea>
body>
html>
xem gợi ý
gợi ý
<html>
<body>
    <selectonchange="alert('Bạn vừa cải thiện trị giá của phần tử này')">
        <optionvalue="html">HTMLoption>
        <optionvalue="css">CSSoption>
        <optionvalue="javascript">JavaScriptoption>
        <optionvalue="mysql">MySQLoption>
        <optionvalue="php">PHPoption>
    select>
body>
html>

nguồn: http://webcoban.vn/
Tags: bắt sự kiện click button trong jsbutton trong htmlevent javascriptevent.target trong javascriptonclick trong javascript w3schoolssự kiện hover trong javascriptsự kiện onblursự kiện onclick trong htmltạo button trong javascript
ATPMedia

ATPMedia

Bài Viết Tiếp Theo
Ham Xu Ly Chuoi Php

Tổng hợp ham xu ly chuoi php mới nhất 2020

Bài Viết Mới.

Chức Năng Tìm Kiếm Trong Php

Tổng hợp các chức năng tìm kiếm trong php mới nhất 2020

28/11/2019
Cách Làm Tên Facebook Phát Sáng

Hướng dẫn các cách làm tên facebook phát sáng mới nhất 2020

28/11/2019
đường Kẻ Ngang Trong Html

Hướng dẫn tạo đường kẻ ngang trong html đơn giản

15/09/2020
Lời Khuyên Khi Khởi Nghiệp

Những Lời Khuyên Khi Khởi Nghiệp Kinh Doanh Mà Bạn Nên Biết

22/04/2020
Công Cụ Marketing Online

Tổng Quan Những Công Cụ Marketing Online Hiệu Quả Mà Bạn Nên Biết

23/04/2020
Blog Là Gì Và Cách Sử Dụng

blog là gì và cách sử dụng? tìm hiểu thêm về blog là gì và cách sử dụng

28/11/2019
Xóa Cơ Sở Dữ Liệu Trong Phpmyadmin

Hướng dẫn xóa cơ sở dữ liệu trong phpmyadmin chi tiết nhất 2020

21/11/2019
Sàn Giao Dịch Thương Mại điện Tử Là Gì

sàn giao dịch thương mại điện tử là gì? thông tin mới nhất về các sàn giao dịch

19/11/2019
3 / 5 ( 338 votes )

XÂY DỰNG WEBSITE

Coder.com.vn là Blog chia sẻ kiến thức học lập trình miễn phí. Chuyên tổng hợp các bài viết về tài liệu học lập trình, với mong muốn tất cả mọi người ở khắp nơi trên thế giới được học lập trình miễn phí.

Chuyên mục

  • Trang Chủ
  • Source Web
  • Kiến Thức Seo
  • Bảo Mật Website
  • Tài Liệu Làm Web
  • Xây Dựng Website

Phần mềm - Công cụ

  • Brands
  • Alosoft
  • Seeding
  • Top Việc
  • Tổng Hợp
  • Quản Trị Nhân Sự

Liên kết

  • Topvui
  • Xe Mô Tô
  • Quản Lý Kho
  • Blog Việc Làm
  • Giải Pháp Việc Làm
  • Phần Mềm Miễn Phí

© 2019 | Thiết Kế bởi ATP MEDIA

  • Trang chủ
  • Xây dựng website
  • Bảo mật Website
  • Kiến thức SEO
  • Source Web
  • Tài liệu làm web

Xây dựng website đơn giản, tối ưu chi phí, chuẩn SEO và đồng thời cũng cung cấp các kiến thức hữu ích để bất kỳ ai cũng có thể thiết kế website đơn giản.