0

我正在用 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 中找到它，但由于某种原因我找不到该函数。

4

2 回答 2

1

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

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

当您使用 连接一个事件时addEventListener，您的事件处理程序将接收一个Event对象。事件的类型可从该对象的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...;），您将不会收到事件对象作为参数。在某些window浏览器（IE、Chrome）上，您可以在对象上找到事件。addEventListener该事件对象与or传入的事件对象非常相似attachEvent，因此您可以在可能以这种方式连接的处理程序中看到这一点：

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

...因此，如果没有传递给函数的参数（例如，它没有与addEventListeneror挂钩attachEvent，而是直接分配给属性），它将使用window.event而不是event.

于 2012-11-26T10:53:59.023 回答
0

我通常更喜欢使用原生 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/

于 2012-11-26T11:42:50.980 回答