本机 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

我通常更喜欢使用原生 javascript，但这是 jQuery 真正派上用场的情况。 最大的问题是你传入了元素，它可以是 jquery 很好地处理的任何东西（类名、节点、id、tagName）。 为简单起见，我们将element切换为id参数，并通过document.getElementById获取节点。

与扩展 jQuery 不同，您可以使用单例模式并扩展您自己的对象。 设置一个空对象（obj），并为其添加函数。

我不能 100% 确定您所追求的功能，但这里有一个基本的翻译。

<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/

Answer 2

我遇到的主要问题是我无法检查元素上触发了哪些事件，如果有人可以向我解释，我可以自己修复它。

通常您会知道触发了哪个事件，因为您将函数连接到特定事件。但是，如果您将同一个函数与多个事件挂钩，您仍然可以确定发生了哪个事件：

当您使用addEventListener 连接事件时，您的事件处理程序将收到Event object。事件的类型可从该对象的 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 不会指向您挂钩事件的元素（它将指向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。