Question

我在JavaScript中编写自己的“类”函数，因此我可以调用它，它会根据我的需要格式化表单。

事情是我在一个网站上写了我的TextFade函数，我可以访问jQuery，但我希望自己的代码可以独立存在（不依赖于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 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。

Answer 2

我通常更喜欢使用原生的javascript，但这是jQuery确实派上用场的情况。最大的问题是你传入的元素，可以是任何（classname，node，id，tagName），由jquery很好地处理。为简化操作，我们会使用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/

原生JavaScript中的.blur和.focus事件

2 个答案: