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

Question

我正在用JavaScript编写我自己的"class"函数，这样我就可以调用它，它会按照我想要的方式格式化表单。

问题是，我在一个可以访问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属性中获得。例如：

// 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确实派上了用场。最大的问题是您正在传递元素，它可以是任何由jquery处理得很好的东西(classname、node、id、tagName)。为了简化，我们将使用id参数切换element，并使用document.getElementById获取节点。

与扩展jQuery相反，您可以使用singleton模式并扩展自己的对象。设置一个空对象(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/