javascript事件處理的三種方式

阿新 • • 發佈：2019-01-14

問題描述：如何實現如下功能

單擊輸入框時，提示資訊消失，輸入框背景變黃色，但在瀏覽器其他地方後輸入框顯示提示訊息

<body>
    <input type="text" id="name" value="請輸入名字" >
    <button type="button" id="bt" >提交</button>
</body>

第一種：HTML處理事件

最為普遍，直接在標籤加入事件監聽

<body>
    <input type="text" id="name" value="請輸入名字" onfocus="fun(this)" onblur="fun1(this)" >
    <button type="button" id="bt" >提交</button>
</body>

事件處理程式碼：

var a = document.getElementById("name");
function fun (x) {
    if(a.value=="請輸入名字"){
        a.value="";
        x.style.background="yellow";
    }
}

function fun1(x){
    if(a.value == ""){
        a.value = "請輸入名字";
        x.style.background="white";
    }
    x.style.background="white";   
}

第二種：DOM0級事件

使用DOM監聽，載入事件

var a = document.getElementById("name");
a.onfocus = function(){
    if(a.value=="請輸入名字"){
        a.value="";
        this.style.background="yellow";
    }
}
a.onblur = function(){
    if(a.value == ""){
        a.value = "請輸入名字";
        this.style.background="white";
    }
    this.style.background="white";  
}

第三種：DOM2級事件

是使用標準的addEventListener方式和IE私有的attachEvent方式

var a = document.getElementById("name");

if(a.addEventListener){
    a.addEventListener("focus",function(){
        if(a.value=="請輸入名字"){
            a.value="";
            this.style.background="yellow";
        }
    })

    a.addEventListener("blur",function(){
        a.value="請輸入名字";
        this.style.background="white";
    })
}else{
    a.attachEvent("onfocus",function(){
        if(a.value=="請輸入名字"){
            a.value="";
            
        }
    })
    a.attachEvent("onblur",function(){
        a.value="請輸入名字";
        
    })
}

JS中註冊事件的三種方式及相容性處理

第一種(所有瀏覽器都支援，但是無法給同一個物件的同一個事件註冊多個事件處理函式) btn.onclick = function() { alert("111") } btn.onclick = function() {

javascript中定義事件的三種方式

在javascript中，可以為某個元素指定事件，指定的方式有以下三種： 1、在html中，使用onclick屬性 2、在javascript中，使用onclick屬性（1）注意函式名沒有雙引號。 3、在javascipt中，使用addEvenListener()方法三種方法的比較（1）在第二、

JavaScript嵌入的三種方式以及變數的命名規則：

一、JavaScript嵌入的三種方式： 1、行間JavaScript <input type="button" name="" onclick="alert('ok！');"> 2、內嵌JavaScript：可以寫入body，也可以寫入head

jquery 呼叫 click 事件的三種方式

第一種方式： $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二種方式： $('#clickmebi

繫結事件的三種方式

第一種繫結事件的方式即把事件寫在標籤的屬性裡面，例如<a href="#" onclick="t()"></a>，這是DOM0級的標準。好處：大家都會，幾乎所有的瀏覽器都支援壞處：夾雜在HTML程式碼中，程式碼不簡潔；這種事件寫法效率不高；不符合“行為

javascript函式定義三種方式詳解

定義函式的三種方式 function語句式 function test1() { console.info("test1"); } 函式的直接變數 ECMAScript var test2 = function () { cons

javascript事件處理的三種方式

問題描述：如何實現如下功能單擊輸入框時，提示資訊消失，輸入框背景變黃色，但在瀏覽器其他地方後輸入框顯示提示訊息 <body> <input type="text" i

JavaScript中事件綁定的三種方式

element blog href 轉載 pre 模型 www. 初學者進行 JavaScript使得網頁與用戶友好交互，在使用 js 進行時間綁定的時候有三種綁定方式。第一種：初學者以及普通寫法 1 <div id="dom0"> 2 &

React事件處理的三種方式及this問題

一，在React元素繫結事件要注意的兩點 1,在React中事件的命名採用駝峰命名法，而不是原生dom中的小寫，如：onclick要寫成onClick,onchange要寫成onChange 2,響應事件的函式要以物件的形式賦值，而不是以dom字串的形

Javascript事件處理程式碼的三種寫法

1.作為HTML屬性值的事件處理程式 HTML程式碼<input name="btn" type="button" id="btn" value="按鈕" onclick="alert('mzwu.com');" /> 2.作為JavaScript屬性的事件

android事件處理的三種方式

android當中處理事件的三種方法：（這裡是按鈕的點選觸發的事件）第一種方法：建一個內部類 private class ClickHandler implementsOnClickListener{ @Override

JS中事件綁定的三種方式

events load textarea sch 事件 ron 事件綁定 upload fun 以下是搜集的在JS中事件綁定的三種方式。 1. HTML onclick attribute <button type="button" id="upload"

javascript實現繼承的三種方式

定義數列 .net 一個數 str www div name type屬性一、原型鏈繼承 function Parent(){} function Child(){} Child.prototype = new Parent(); 通過對象child的p

Spring MVC異常統一處理的三種方式

Spring 統一異常處理有 3 種方式，分別為：使用 @ ExceptionHandler 註解實現 HandlerExceptionResolver 介面使用 @controlleradvice 註解 HandlerExceptionReso

Python基礎（四）--- Python多執行緒介紹，開啟執行緒的三種方式，time模組，join，Daemon，Lock、Rlock，事件機制，Timer

一、多執行緒介紹 --------------------------------------------------------- 1.threading用於提供執行緒相關的操作，執行緒是應用程式中工作的最小單元。 2.python當前版本的多執行緒庫沒有實現優先順序、執行緒組，執

UE4 UI更新的三種方式及具體實現的方式（最優化的方式是事件驅動）

UE4中UI的更新分為下面三種方式：函式繫結和屬性繫結是Tick更新的，也就是說每幀都在呼叫資料就行更新，他們倆個原理是一樣的，最優化的方式是事件繫結！ 1、函式繫結：百分比血量來舉例 1、拖入Progress Bar 2、在Progress裡新建繫結函式 3、設定如下：為了優化

mybatis3.1-[topic-18-20]-_對映檔案_引數處理_單個引數&多個引數&命名引數 _POJO&Map&TO 三種方式及舉例

筆記要點出錯分析與總結 /**MyBatis_對映檔案_引數處理_單個引數&多個引數&命名引數 * _POJO&Map&TO 三種方式及舉例 _ * 單個引數 : #{引數名} ,取出引數值; [mybatis 不會做特殊處理]

Javascript繫結click事件的四種方式總結

一：HTML中新增onclick <button id="vv" onclick="myfunction()" >哈哈</button> 二：JS中定義函式繫結事件！ var funcc = function () {

JavaScript中元素建立的三種方式

目錄 1. document.write("標籤的程式碼及內容"); 缺陷:如果是在頁面載入完畢後,此時通過這種方式建立元素,那麼頁面上存在的所有的內容全部被幹掉 <body> <input type="button" valu

SpringMVC總結之異常處理的三種方式

目錄 1.使用Spring MVC提供的簡單異常處理器SimpleMappingExceptionResolver 2.實現Spring的異常處理介面HandlerExceptionResolver 自定義自己的異常處理器 3.使用@ExceptionHandler註解實現異常處理

javascript事件處理的三種方式

第一種：HTML處理事件

第二種：DOM0級事件

第三種：DOM2級事件

相關推薦