本機JavaScript中的.blur和.focus事件

Question

我正在用JavaScript編寫自己的“類”函數，因此我可以對其進行調用，它將按我的需要格式化表格。

問題是我在可以訪問jQuery的網站上編寫了我的TextFade函數，但我希望自己的代碼獨立（不依賴jQuery）

我的問題是如何轉換這段代碼：

this.textFade = function(element,password){ // needs to be changed so jQuery is not needed anymore
        if(password === 'undefined')
            password = false; // default

        $(element).focus(function() {
            if( this.value == this.defaultValue )
                this.value = "";
            if(password == true)
                this.type = "password";

        }).blur(function() {
            if( !this.value.length ) {
                this.value = this.defaultValue;
                if(password == true)
                    this.type = "text";
            }
        });
}

對於不需要jQuery的東西。

我遇到的主要問題是，如何無法檢查在元素上觸發了什么事件，如果有人可以向我解釋這一點，我將自己修復（如果可能的話，無需使用其他參數來定義）。

試圖在jQuery中找到它，但是由於某種原因我找不到該函數。

Answer 1

我遇到的主要問題是如何無法檢查元素上觸發了什么事件，如果有人可以向我解釋這一點，我將可以自行修復。

通常，您會知道觸發了哪個事件，因為您已將函數連接到特定事件。 但是，如果將同一功能掛接到多個事件上，則仍然可以確定發生了哪個事件：

當您使用addEventListener掛接事件時，事件處理程序將收到一個Event對象 。 事件的type可從該對象的type屬性中獲得。 因此，例如：

// Assuming `elm` is an Element
(function() {
    elm.addEventListener('blur', handler, false);
    elm.addEventListener('focus', handler, false);

    function handler(event) {
        if (event.type === "blur") {
            // It's a blur event
        }
        else {
            // It must be a focus event
        }
    }
})();

並非所有當前在野外使用的瀏覽器都支持addEventListener ，（這是使用jQuery之類的庫的幾種原因之一）。 在較舊版本的IE上，您可能需要使用attachEvent （可以通過簡單地查看該元素是否具有addEventListener屬性來進行檢查）。 請注意，如果您在處理程序中執行this操作，則this將不會指向鈎住事件的元素（它將指向window ）。

如果將函數分配給元素的onxyz屬性（例如， elm.onclick = function...; ），則不會收到事件對象作為參數。 在某些瀏覽器（IE，Chrome）上，您可以在window對象上找到事件。 該事件對象與addEventListener或attachEvent傳遞的事件對象非常相似，因此您可以在可能以這種方式連接的處理程序中看到此事件：

function handler(event) {
    event = event || window.event;
    // ...use `event` normally...
}

...因此，如果沒有參數傳遞給函數（例如，它沒有與addEventListener或attachEvent掛鈎，而是直接分配給屬性），它將使用window.event而不是event 。

Answer 2

我通常更喜歡使用本機javascript，但這是jQuery確實派上用場的情況。 最大的問題是您要傳入元素，它可以是由jquery很好處理的任何東西（類名，節點，id，tagName）。 為簡化起見，我們將使用id參數切換element ，並使用document.getElementById獲取節點。

與擴展jQuery相反，您可以使用單例模式並擴展自己的對象。 設置一個空對象（obj），然后向其添加函數。

我不確定您要使用的功能，但不能百分百確定，這里只是基本的翻譯。

<input type="text" id="hi" value="hithere">
<input type="button" id="btn" value="click to change to password" />

<script>
var obj = {};

obj.textFade = function(id, password){
     if(password === 'undefined'){
        password = false;
     }
    document.getElementById(id).onfocus = function(){
        if(this.innerHTML == this.defaultValue){
            this.innerHTML = "";
        }
        else if(password == true){
            this.setAttribute('type','password');
        }
    };
    document.getElementById(id).onblur = function(){
        if( !this.value.length ) {
            this.value = this.defaultValue;
            if(password == true){
                this.setAttribute('type','password');
            }
        }
    };
};


document.getElementById('btn').onclick = function(){
    obj.textFade('hi',true);
};
</script>

這是一個實時版本： http : //jsfiddle.net/CJ6DK/1/