Home >Web Front-end >JS Tutorial >Tutorial on adding support for custom events to custom objects_javascript skills

Tutorial on adding support for custom events to custom objects_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:05:471660browse

I usually don’t read code written by others. Why? tired! Moreover, what this comrade gave was compressed! sweat. . . Test me, right? Also, this comrade did not give an example code, he only said that there was no problem with the code. I tried hard to "crack" it, but my brain cells died too quickly! Before I became an idiot, I decided not to look down. Isn't it just to add support for custom events to custom objects? Let me write an example. Even if it is a tutorial, if you can’t understand it, there is nothing I can do! I won't be stupid enough to write code for you and let you sell it for money!
Okay, here is the code I wrote, pay attention to it:


[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]

In the example, it is customized A: JCEvent, c1, c2, c3 are all instances of it.
Each instance has an oOutline, which I generally use as a container for objects. pParent is used to indicate where the custom object is displayed, which is equivalent to a placeholder. If not specified, it is document.body.

In the example, I defined three custom events: onCreate, onChangeSkin, onClick
onCreate is triggered in the create method.
onChangeSkin is triggered in the setSkin method.
onClick is triggered in oOutline.onclick.

Calling sequence:
Since onCreate is called in the create method, c1.onCreate must be declared before c1.create().

event parameters, see:

this.setSkin = function(pSkin){
var oldSkin = oOutline.className;
oOutline.className = pSkin;

if(typeof this.onChangeSkin == "function")
this.onChangeSkin(oldSkin,pSkin);
}


this.onChangeSkin(oldSkin,pSkin);
This way, you can use oldSkin and newSkin in each instance.

For example:
c1.onChangeSkin = function(pOld,pNew){
alert("onChangeSkin event n sets the skin of c1: n new skin: " pNew " n old skin: " pOld) ;
}


In addition, in the example:

$.$css = function(pKey,pValue,p){
var obj = p ? $.$ (p) : this;
obj.style[pKey] = pValue;
obj.$css = $.$css;
return obj;
}

This paragraph, Writing Object.prototype.$css = function(...) is absolutely unsuccessful. As for why, it is beyond the scope of discussion here.


I have nothing to say, so just leave it blank. For those who don’t understand, I’m trying to improve your JavaScript knowledge.
To make a digression: Don’t always deal with jQuery, prototype, json, etc.
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn