[英].blur and .focus event in native JavaScript
I am writing my own "class" functions in JavaScript so I can call it and it will format a form how I want it. 我正在用JavaScript编写自己的“类”函数,因此我可以对其进行调用,它将按我的需要格式化表格。
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) 问题是我在可以访问jQuery的网站上编写了我的TextFade函数,但我希望自己的代码独立(不依赖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. 对于不需要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. 试图在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.
我遇到的主要问题是如何无法检查元素上触发了什么事件,如果有人可以向我解释这一点,我将可以自行修复。
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 . 当您使用
addEventListener
挂接事件时,事件处理程序将收到一个Event
对象 。 The type of the event is available from that object's type
property. 事件的
type
可从该对象的type
属性中获得。 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). 并非所有当前在野外使用的浏览器都支持
addEventListener
,(这是使用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). 在较旧版本的IE上,您可能需要使用
attachEvent
(可以通过简单地查看该元素是否具有addEventListener
属性来进行检查)。 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
). 请注意,如果您在处理程序中执行
this
操作,则this
将不会指向钩住事件的元素(它将指向window
)。
If you assign a function to the onxyz
property of the element (eg, elm.onclick = function...;
), you won't receive the event object as an argument. 如果将函数分配给元素的
onxyz
属性(例如, elm.onclick = function...;
),则不会收到事件对象作为参数。 On some browsers (IE, Chrome) you can find the event on the window
object. 在某些浏览器(IE,Chrome)上,您可以在
window
对象上找到事件。 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: 该事件对象与
addEventListener
或attachEvent
传递的事件对象非常相似,因此您可以在可能以这种方式连接的处理程序中看到此事件:
function handler(event) {
event = event || window.event;
// ...use `event` normally...
}
...so that if there was no argument passed to the function (eg, it wasn't hooked up with addEventListener
or attachEvent
, but was assigned directly to the property), it will use window.event
rather than event
. ...因此,如果没有参数传递给函数(例如,它没有与
addEventListener
或attachEvent
挂钩,而是直接分配给属性),它将使用window.event
而不是event
。
I usually prefer using native javascript, but this is a case where jQuery really does come in handy. 我通常更喜欢使用本机javascript,但这是jQuery确实派上用场的情况。 The biggest problem is you are passing in element, which could be anything (classname, node, id, tagName) which is handled by jquery quite nicely.
最大的问题是您要传入元素,它可以是由jquery很好处理的任何东西(类名,节点,id,tagName)。 To simplify things, we will switch
element
with an id
parameter, and get the node with document.getElementById
. 为简化起见,我们将使用
id
参数切换element
,并使用document.getElementById
获取节点。
As opposed to extending jQuery, you can use the singleton pattern and extend your own objects. 与扩展jQuery相反,您可以使用单例模式并扩展自己的对象。 Set an empty object (obj), and add functions to that.
设置一个空对象(obj),然后向其添加函数。
I'm not 100% sure of the functionality you are after, but here a basic translation. 我不确定您要使用的功能,但不能百分百确定,这里只是基本的翻译。
<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>
Here is a live version: http://jsfiddle.net/CJ6DK/1/ 这是一个实时版本: http : //jsfiddle.net/CJ6DK/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.