JavaScript-註冊時間的兩種方式

阿新 • • 發佈：2021-02-06

技術標籤：JavaScript javascript dom

註冊事件的兩種方式：1.傳統註冊事件
2.事件偵聽註冊事件 addEventListener

區別：傳統註冊事件：後面的事件會覆蓋前面的事件
事件偵聽註冊事件：不會覆蓋前面的事件

程式碼演示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" 
>
    <title>Document</title>
</head>

<body>
    <button>傳統</button>
    <button>偵聽</button>
    <script>
        // 1.傳統註冊事件:後面的事件會覆蓋前面的事件
        var btn = document.querySelectorAll('button')
        btn[0].onclick = function() {
            alert 
('1');
        }
        btn[0].onclick = function() {
                alert('2');
        }
            //2.事件偵聽註冊事件 addEventListener
            // (1)裡面的事件型別是字串
            // (2)同一個元素同一個事件可以新增多個偵聽器(事件處理程式)
        btn[1].addEventListener('click', function() {
            alert('haha');
        })
        btn[ 
1].addEventListener('click', function() {
            alert('heihei');
        })
    </script>
</body>

</html>

結果
點選傳統註冊事件只會彈出 “2” 提示框
在這裡插入圖片描述
點選事件偵聽註冊事件可以彈出全部提示框

JavaScript-註冊時間的兩種方式

技術標籤：JavaScriptjavascriptdom 註冊事件的兩種方式：1.傳統註冊事件 2.事件偵聽註冊事件 addEventListener

javascript——定義函式的兩種方式以及使用的時候傳入多個引數的情況，arguments和...rest

技術標籤：# javascriptjavascript 1.第一種方式定義函式 function abs(x) { if (x >= 0) return x;

JavaScript 宣告私有變數的兩種方式

前言 JavaScript並不像別的語言，能使用關鍵字來宣告私有變數。我瞭解的JavaScript能用來宣告私有變數的方式有兩種，一種是使用閉包，一種是使用WeakMap。

JavaScript中實現new的兩種方式引發的探究

前言當你 new 一個建構函式時發生了什麼？ “眾所周知”的三步：建立一個空物件，將它的引用賦給 this，繼承函式的原型；通過 this 將屬性和方法新增至這個物件；最後返回 this 指向的新物件，也就是例項。

Java生成隨機數兩種方式簡單時間戳方式和字母數字組合方式

//包名別忘了 import org.apache.commons.lang.StringUtils; import java.math.BigInteger; import java.util.Random;

springboot 註冊服務註冊中心(zk)的兩種方式

在使用springboot進行開發的過程中，我們經常需要處理這樣的場景：在服務啟動的時候，需要向服務註冊中心(例如zk)註冊服務狀態，以便當服務狀態改變的時候，可以故障摘除和負載均衡。

spring級聯屬性賦值的兩種方式解析

這篇文章主要介紹了spring級聯屬性賦值的兩種方式解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

詳解使用Spring快速建立web應用的兩種方式

介紹本篇文章主要介紹，如何使用 Spring 開發一個 Web 應用。我們將研究用 Spring Boot 開發一個 web 應用，並研究用非 Spring Boot 的方法。

Java sort集合排序的兩種方式解析

這篇文章主要介紹了Java sort集合排序的兩種方式解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

阿里雲伺服器手動實現mysql雙機熱備的兩種方式

一、概念 1、熱備份和備份的區別　　熱備份指的是：High Available（HA）即高可用，而備份指的是Backup，資料備份的一種。這是兩種不同的概念，應對的產品也是兩種功能上完全不同的產品。熱備份主要保障業務的連續性

mysql清空表資料的兩種方式和區別解析

在MySQL中刪除資料有兩種方式： truncate（截短）屬於粗暴型的清空 delete屬於精細化的刪除

Python操作MySQL資料庫的兩種方式例項分析【pymysql和pandas】

本文例項講述了Python操作MySQL資料庫的兩種方式。分享給大家供大家參考，具體如下：

ubuntu 16.04安裝redis的兩種方式教程詳解(apt和編譯方式）

ubuntu 16.04安裝redis的兩種方式教程如下所示：方式一：apt安裝在 Ubuntu 系統安裝 Redi 可以使用以下命令:

Python使用flask框架操作sqlite3的兩種方式

本文例項講述了Python使用flask框架操作sqlite3的兩種方式。分享給大家供大家參考，具體如下：

Linux下安裝mysql的方式（yum和原始碼編譯兩種方式）

這裡介紹Linux下兩種安裝mysql的方式：yum安裝和原始碼編譯安裝。 1. yum安裝（1）首先檢視centos自帶的mysql是否被安裝：

pytorch實現focal loss的兩種方式小結

我就廢話不多說了，直接上程式碼吧！ import torch import torch.nn.functional as F import numpy as np

Python實現圖片裁剪的兩種方式(Pillow和OpenCV)

在這篇文章裡我們聊一下Python實現圖片裁剪的兩種方式，一種利用了Pillow，還有一種利用了OpenCV。兩種方式都需要簡單的幾行程式碼，這可能也就是現在Python那麼流行的原因吧。

Python 多執行緒，threading模組，建立子執行緒的兩種方式示例

本文例項講述了Python 多執行緒，threading模組，建立子執行緒的兩種方式。分享給大家供大家參考，具體如下：

詳解springboot中使用非同步的常用兩種方式及其比較

一般對於業務複雜的流程，會有一些處理邏輯不需要及時返回，甚至不需要返回值，但是如果充斥在主流程中，佔用大量時間來處理，就可以通過非同步的方式來優化。

mapper介面注入兩種方式詳解

這篇文章主要介紹了mapper介面注入兩種方式詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下