js onfocus事件、js onblur事件

阿新 • • 發佈：2021-01-28

onfocus事件：
html元素獲取到焦點所觸發的事件，通常用於 <input>輸入框標籤，<select>下拉列表標籤，以及<a>超連結標籤，不是所有html元素都支援onfocus事件。

onblur事件:
html元素失去焦點所觸發的事件，與onfocus事件相對，通常用於<input>輸入框標籤，不是所有html元素都支援onblur事件。

程式碼展示：

<html>

<head>
    <script type="text/javascript" 
>
        function focus_input() {
            document.getElementById("first").style.backgroundColor = "purple";
        }
        function blur_input() {
            document.getElementById("first").style.backgroundColor = "gold";
        }
        function 
 focus_select() {
            document.getElementById("second").style.backgroundColor = "purple";
        }
        function blur_select() {
            document.getElementById("second").style.backgroundColor = "gold";
        }
        function focus_a() {
            document. 
getElementById("third").style.backgroundColor = "purple";
        }
        function blur_a() {
            document.getElementById("third").style.backgroundColor = "gold";
        }
    </script>
</head>

<body>
    <input id="first" type="text" onfocus="focus_input()" onblur="blur_input()" />
    <select id="second" onfocus="focus_select()" onblur="blur_select()">
        <option value="option_1">option_1</option>
        <option value="option_2">option_2</option>
        <option value="option_3">option_3</option>
    </select>
    <a id="third" href="#" onfocus="focus_a()" onblur="blur_a()">a標籤</a>
</body>

</html>

效果展示：
js onfocus事件、js onblur事件

js onfocus事件、js onblur事件

技術標籤：Web前端jshtmljavascriptcss onfocus事件： html元素獲取到焦點所觸發的事件，通常用於 <input>輸入框標籤，<select>下拉列表標籤，以及<a>超連結標籤，不是所有html元素都支援onfo

Vue框架、掛載點el、插值表示式、過濾器、文字指令、事件指令、js物件補充、js函式補充

```python\"\"\"Vue框架：前臺介面，頁面邏輯1）指令2）例項成員3）元件4）專案開發DRF框架：資料（介面）1）基礎的模組：請求、響應、解析、渲染2）序列化、三大認證3）過濾、搜尋、排序、分頁4）異常、第三方jwt、

前端阻止冒泡事件、將專案打包並安裝在當前環境中、請求路徑引數傳遞方式、JQ觸發動態新增元素、position絕對定位和相對定位、js中動態新增id、Corpus專案部署上線

一、前端阻止冒泡事件舉例：button裡面有個span標籤，button和span都綁定了點選事件，點選span不會觸發button的點選事件

js的事件冒泡、捕獲、目標和事件的相容

在js中，事件的寫法有三種，這也是件事的相容。 1.addEventListener var div=document.querySelector("div");

js：BOM（window物件事件、物件的定時器、this指向、js的執行機制）

1、BOM （1）BOM概念 BOM（Browser Object Model）瀏覽器物件模型，他提供了獨立於內容與瀏覽器視窗進行互動的物件，核心是window

10、JS事件委託或者事件代理原理以及實現

JS事件委託或者事件代理原理以及實現事件委託（事件代理）原理：簡單的說就是將事件交由別人來執行，就是將子元素的事件通過冒泡的形式交由父元素來執行。

Vue.js 條件渲染、列表渲染、事件處理、表單輸入繫結基本使用

條件渲染、列表渲染、事件處理、表單輸入繫結基本使用條件渲染 v-if 基本用法

3、JS函式與DOM事件

js函式是用function關鍵字定義，由函式名、引數列表和函式體構成的程式碼分類：自定義函式、內建函式自定義函式語法:定義函式不會執行函式內容，需要呼叫函式function 函式名([引數列表]){函式體[return 資料]}

js捕獲滑鼠事件、鍵盤事件

window.onload=function(){ document.onmousedown=function(event) { console.log(\'按下\') console.log(event.altKey)

node.JS事件機制與events事件模組的使用方法詳解

node.JS事件機制說明多數 Node.js 核心 API 都是採用慣用的非同步事件驅動架構，其中某些型別的物件（稱為觸發器）會週期性地觸發命名事件來呼叫函式物件（監聽器）。例如，一個net.Server物件會在每次有新連線時觸

JS通用方法觸發點選事件程式碼例項

這篇文章主要介紹了JS通用方法觸發點選事件程式碼例項,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JavaScript-Runoob-JS 瀏覽器BOM ：JavaScript 即使事件

ylbtech-JavaScript-Runoob-JS 瀏覽器BOM ：JavaScript 即使事件 1.返回頂部 1、 JavaScript計時事件

JS高階——執行緒機制與事件機制總結

執行緒與程序程序: 程式的一次執行, 它佔有一片獨有的記憶體空間可以通過windows工作管理員檢視程序

js-API 02 獲取元素和事件

一，對錶單的禁用 document.getElementById(\"txt\").disabled=true; 二，阻止a連結的跳轉 return false

Runoob-react.js：React 表單與事件

ylbtech-Runoob-react.js：React 表單與事件 1.返回頂部 1、 React 表單與事件本章節我們將討論如何在 React 中使用表單。

JS中dom0級事件和dom2級事件的區別介紹

dom0級事件 1 2 3 4 5 6 7 8 9 10 <a href=\"#\" id=\"hash\" onclick=\"fn();fn();\"> <button type=\"button\">返回上面進行開通</button>

js滑鼠移入移出事件對比

技術標籤：js ie8之前的方法滑鼠移出 mouseover 滑鼠移入 mouseout ie8之後的方法滑鼠移出 mouseenter 滑鼠移入 mouseleave

Java Script(三)——onload事件、onclick事件、onsubmit事件、onchange事件、onblur事件

技術標籤：JavaWebjavascriptjsjavacssvue js中的事件事件是電腦輸入裝置與頁面進行互動的響應。

echarts滾輪縮放事件_Vue JS滑鼠拖動圖片滾輪縮放圖片

技術標籤：echarts滾輪縮放事件 # 滑鼠拖動圖片滾輪縮放圖片（完整程式碼在最後）

如何利用原生JS實現觸控滑動監聽事件

前言今天寫一個小Demo，有個地方涉及到了左滑右滑的邏輯，本來想著用外掛來著，但是想到自己好久沒用原生js寫滑動的監聽了，所以試著用原生JS來實現了一下，畢竟溫故而知新嘛，同時做個記錄。先把實現的效果貼出來

js onfocus事件、js onblur事件

相關推薦