• 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
20/11/2019
Trang chủ Kiến thức Code Web
Rate this post

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.

Cách Làm Video đại Diện

Hướng dẫn các cách làm video đại diện mới nhất 2020

02/12/2019
Trang Web Tĩnh Là Gì

trang web tĩnh là gì ? hướng dẫn sử dụng trang web tĩnh mới nhất 2020

06/11/2019
Cổng Thanh Toán Là Gì

cổng thanh toán là gì ? Các cổng thanh toán điện tử phổ biến tại Việt Nam mới nhất 2020

29/10/2019
Img 5fe362f20cf1e

Conversion Rate là gì? Giải pháp tăng cao chỉ số Conversion Rate

23/12/2020
Có nên thuê dịch vụ môi giới cho thuê văn phòng

CÓ NÊN THUÊ MỘT NHÀ MÔI GIỚI VĂN PHÒNG CHO THUÊ KHÔNG?

08/08/2022
Bỏ Gạch Chân Trong Css

Hướng dẫn cách bỏ gạch chân trong css mới nhất 2020

21/11/2019
Content Marketing

Các dạng Content Marketing

02/12/2020
Cách đăng Bài Lên Google

Hướng dẫn các cách đăng bài lên google mới nhất 2020

02/12/2019

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.