本地JavaScript中的.blur和.focus事件 [英] .blur and .focus event in native JavaScript

问题描述

我在JavaScript中编写我自己的类函数，所以我可以调用它，它将格式化我想要的形式。

我的TextFade函数在我有权访问jQuery的网站中，但我希望自己的代码独立（不依赖jQuery）。

我的问题是我怎么能转换这段代码：

  this.textFade = function（element，password）{//需要改变，所以jQuery是不需要
 if（password ==='undefined'）
 password = false; //默认
 
 $（元素）.focus（函数（）{
 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中找到它，但由于某些原因，我找不到该函数。

解决方案

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

通常情况下，您会知道哪个事件被触发是因为您将某个函数连接到特定事件。但是，如果您将相同的函数绑定到多个事件，您仍然可以确定发生了哪个事件：

当您使用 addEventListener ，你的事件处理程序将收到一个 事件对象。事件的类型可以从该对象的类型属性中使用。例如：

  //假设`elm`是元素
（function（）{
 elm.addEventListener（'blur'，handler，false）; 
 elm.addEventListener（'focus'，handler，false）; 
 
函数处理程序（event）{
 if（ event.type ===blur）{
 //这是一个模糊事件
} 
 else {
 //它必须是一个焦点事件
} 
} 
}）（）; 
  

并非所有当前正在使用的浏览器都支持 addEventListener attachEvent 来替代（您可以通过简单地查看元素是否具有 addEventListener 属性就可以了）。请注意，如果您在处理程序中执行，则此不会指向您挂钩事件的元素（它将指向窗口）。





如果您将函数分配给元素的 onxyz 属性（例如， elm.onclick = function ...; ），您将不会收到事件对象作为参数。在某些浏览器（IE，Chrome）上，您可以在窗口对象中找到事件。该事件对象与 addEventListener 或 attachEvent 传入的事件对象非常相似，所以您可以在处理程序中看到这一点以这种方式搞定：

 函数处理程序（事件）{
 event = event || window.event; 
 // ...使用`event`通常... 
} 
  

...，以便如果没有参数传递给函数（例如，它没有与 addEventListener 或 attachEvent ，但直接分配给该属性），它将使用 window.event 而不是事件。

I am writing my own "class" functions in JavaScript so I can call it and it will format a form how I want it.

The thing is i wrote my TextFade function in a website where I had access to jQuery but i would like my own code to be stand alone (not reliant on jQuery)

My question is how can I convert this piece of code :

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";
            }
        });
}

To something that doesnt require jQuery.

The main problem I am having is how I can't check what event got triggered on the element, if someone can explain that to me I would be able to fix it myself (without using another parameter to define it if possible).

Tried to find it in jQuery but I could not find the function for some reason.

解决方案

The main problem I am having is how I can't check what event got triggered on the element, if someone can explain that to me I would be able to fix it myself.

Normally you'd know which event was triggered because you hooked up a function to a specific event. But if you hook the same function up to more than one event, you can still determine which event occurred:

When you hook up an event using addEventListener, your event handler will receive an Event object. The type of the event is available from that object's type property. So for instance:

// 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
        }
    }
})();

Not all browsers currently in use in the wild support addEventListener, however (this is one of the several reasons to use a library like jQuery). On older versions of IE, you may need to use attachEvent instead (you can check by simply looking to see if the element has an addEventListener property on it). Note that if you do, within the handler, this won't point to the element on which you hooked the event (it'll point to window).

If you assign a function to the onxyz property of the element (e.g., elm.onclick = function...;), you won't receive the event object as an argument. On some browsers (IE, Chrome) you can find the event on the window object. That event object is very similar to the ones passed in by addEventListener or attachEvent, so you see this in handlers that might get hooked up that way:

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

...so that if there was no argument passed to the function (e.g., it wasn't hooked up with addEventListener or attachEvent, but was assigned directly to the property), it will use window.event rather than event.

这篇关于本地JavaScript中的.blur和.focus事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！