What is the equivalent javascript code for this prototype code?
var Confirm = Class.create();
Confirm.prototype = {
initialize: function(element, message) {
this.message = message;
Event.observe($(element), 'click', this.doConfirm.bindAsEventListener(this));
},
doConfirm: function(e) {
if(! confirm(this.message))
e.stop();
}
}
Roughly speaking:
var Confirm = (function()
function Confirm(element, message) {
var self = this;
this.message = message;
hookEvent(element, "click", function(event) {
self.doConfirm(event);
});
}
Confirm.prototype.doConfirm = Confirm$doConfirm;
function Confirm$doConfirm(e) {
if (!confirm(this.message)) {
if (e.stopPropagation) {
e.stopPropagation();
}
else {
e.cancelBubble = true;
}
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
}
}
return Confirm;
})();
(You can shorten that slightly if you don't mind using anonymous functions; I prefer to help my tools help me by giving functions names.)
In the above, hookEvent is a utility function you'll have to provide that either calls addEventListener or attachEvent (to support IE8 and earlier) as appropriate, something like this:
function hookEvent(element, eventName, handler) {
// Very quick-and-dirty, recommend using a proper library,
// this is just for the purposes of the example.
if (typeof element.addEventListener !== "undefined") {
element.addEventListener(eventName, handler, false);
}
else if (typeof element.attachEvent !== "undefined") {
element.attachEvent("on" + eventName, function(event) {
return handler(event || window.event);
});
}
else {
throw "Browser not supported.";
}
}
Note how much more work is required for cross-browser compatibility. You don't have to use Prototype, but I do strongly recommend you use another decent library even if not Prototype, like jQuery, YUI, Closure, or any of several others. You'll save a lot of effort working around cross-browser differences and dealing with edge cases that come up by leveraging the significant work done by others in this area.
If your goal is to move off Prototype rather than moving off libraries entirely, here's that same thing using jQuery for instance:
var Confirm = (function()
function Confirm(element, message) {
this.message = message;
$(element).click($.proxy(this.doConfirm, this));
}
Confirm.prototype.doConfirm = Confirm$doConfirm;
function Confirm$doConfirm(e) {
if (!confirm(this.message)) {
return false;
}
}
return Confirm;
})();
That uses $().click for hookEvent, $.proxy to avoid creating an explicit closure (still creates one, just does it for you behind the scenes), and the fact that in jQuery event handlers, return false is the same as both stopping propagation and preventing the default action (just like Prototype's stop). You could also use stopPropagation and preventDefault without worrying about browser differences; jQuery handles it for you. Most libraries will.
If you move off Prototype but still want something akin to its Class feature, here's one you can drop into your code. My goal in that blog post wasn't to replace Prototype's Class (at the time I was using Prototype), but rather to fix what I found was Prototype's hugely inefficient way of handling supercalls. But in doing that, well, a full implementation that can replace Class got created. I really need to update the terminology in it, because of course it's not about classes at all (JavaScript doesn't have classes), it's just about some handy plumbing sugar for JavaScript's prototypical inheritance.
(Inb4 Raynos arrives with his pd craziness.)
function Confirm(element, message) {
this.message = message;
element.addEventListener("click", this.doConfirm.bind(this), false);
}
Confirm.prototype.doConfirm = function (e) {
if (!confirm(this.message)) {
e.preventDefault();
e.stopPropagation();
}
};
Depends on how abstract you want it to be. In the simplest case:
<button onclick="return confirm('Are you sure?')">something</button>
Related
I have an object that has methods in it. These methods are put into the object inside an anonymous function. It looks like this:
var t = {};
window.document.addEventListener("keydown", function(e) {
t.scroll = function(x, y) {
window.scrollBy(x, y);
};
t.scrollTo = function(x, y) {
window.scrollTo(x, y);
};
});
(there is a lot more code, but this is enough to show the problem)
Now I want to stop the event listener in some cases. Therefore I am trying to do a removeEventListener but I can't figure out how to do this. I have read in other questions that it is not possible to call removeEventListener on anonymous functions, but is this also the case in this situation?
I have a method in t created inside the anonymous function and therefore I thought it was possible. Looks like this:
t.disable = function() {
window.document.removeEventListener("keydown", this, false);
}
Why can't I do this?
Is there any other (good) way to do this?
Bonus info; this only has to work in Safari, hence the missing IE support.
You can name the function passed and use the name in the removeEventListener. as in:
button.addEventListener('click', function eventHandler() {
///this will execute only once
alert('only once!');
this.removeEventListener('click', eventHandler);
});
EDIT:
This will not work if you are working in strict mode ("use strict";)
EDIT 2:
arguments.callee is now deprecated (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee)
I believe that is the point of an anonymous function, it lacks a name or a way to reference it.
If I were you I would just create a named function, or put it in a variable so you have a reference to it.
var t = {};
var handler = function(e) {
t.scroll = function(x, y) {
window.scrollBy(x, y);
};
t.scrollTo = function(x, y) {
window.scrollTo(x, y);
};
};
window.document.addEventListener("keydown", handler);
You can then remove it by
window.document.removeEventListener("keydown", handler);
A version of Otto Nascarella's solution that works in strict mode is:
button.addEventListener('click', function handler() {
///this will execute only once
alert('only once!');
this.removeEventListener('click', handler);
});
in modern browsers you can do the following...
button.addEventListener( 'click', () => {
alert( 'only once!' );
}, { once: true } );
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
window.document.removeEventListener("keydown", getEventListeners(window.document.keydown[0].listener));
May be several anonymous functions, keydown1
Warning: only works in Chrome Dev Tools & cannot be used in code: link
There's a new way to do this that is supported by the latest versions of most popular browsers with the exception of Safari.
Check caniuse for updated support.
Update: Now also supported by Sefari (version 15^).
We can add an option to addEventListner called signal and assign a signal from an AbortController on which you can later call the abort() method.
Here is an example.
We create an AbortController:
const controller = new AbortController();
Then we create the eventListner and pass in the option signal:
document.addEventListener('scroll',()=>{
// do something
},{signal: controller.signal})
And then to remove the eventListner at a later time, we call:
controller.abort()
This is not ideal as it removes all, but might work for your needs:
z = document.querySelector('video');
z.parentNode.replaceChild(z.cloneNode(1), z);
Cloning a node copies all of its attributes and their values, including
intrinsic (in–line) listeners. It does not copy event listeners added using
addEventListener()
Node.cloneNode()
A not so anonymous option
element.funky = function() {
console.log("Click!");
};
element.funky.type = "click";
element.funky.capt = false;
element.addEventListener(element.funky.type, element.funky, element.funky.capt);
// blah blah blah
element.removeEventListener(element.funky.type, element.funky, element.funky.capt);
Since receiving feedback from Andy (quite right, but as with many examples, I wished to show a contextual expansion of the idea), here's a less complicated exposition:
<script id="konami" type="text/javascript" async>
var konami = {
ptrn: "38,38,40,40,37,39,37,39,66,65",
kl: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
};
document.body.addEventListener( "keyup", function knm ( evt ) {
konami.kl = konami.kl.slice( -9 );
konami.kl.push( evt.keyCode );
if ( konami.ptrn === konami.kl.join() ) {
evt.target.removeEventListener( "keyup", knm, false );
/* Although at this point we wish to remove a listener
we could easily have had multiple "keyup" listeners
each triggering different functions, so we MUST
say which function we no longer wish to trigger
rather than which listener we wish to remove.
Normal scoping will apply to where we can mention this function
and thus, where we can remove the listener set to trigger it. */
document.body.classList.add( "konami" );
}
}, false );
document.body.removeChild( document.getElementById( "konami" ) );
</script>
This allows an effectively anonymous function structure, avoids the use of the practically deprecated callee, and allows easy removal.
Incidentally: The removal of the script element immediately after setting the listener is a cute trick for hiding code one would prefer wasn't starkly obvious to prying eyes (would spoil the surprise ;-)
So the method (more simply) is:
element.addEventListener( action, function name () {
doSomething();
element.removeEventListener( action, name, capture );
}, capture );
To give a more up-to-date approach to this:
//one-time fire
element.addEventListener('mousedown', {
handleEvent: function (evt) {
element.removeEventListener(evt.type, this, false);
}
}, false);
JavaScript: addEventListener
method registers the specified listener on the EventTarget(Element|document|Window) it's called on.
EventTarget.addEventListener(event_type, handler_function, Bubbling|Capturing);
Mouse, Keyboard events Example test in WebConsole:
var keyboard = function(e) {
console.log('Key_Down Code : ' + e.keyCode);
};
var mouseSimple = function(e) {
var element = e.srcElement || e.target;
var tagName = element.tagName || element.relatedTarget;
console.log('Mouse Over TagName : ' + tagName);
};
var mouseComplex = function(e) {
console.log('Mouse Click Code : ' + e.button);
}
window.document.addEventListener('keydown', keyboard, false);
window.document.addEventListener('mouseover', mouseSimple, false);
window.document.addEventListener('click', mouseComplex, false);
removeEventListener
method removes the event listener previously registered with EventTarget.addEventListener().
window.document.removeEventListener('keydown', keyboard, false);
window.document.removeEventListener('mouseover', mouseSimple, false);
window.document.removeEventListener('click', mouseComplex, false);
caniuse
I have stumbled across the same problem and this was the best solution I could get:
/*Adding the event listener (the 'mousemove' event, in this specific case)*/
element.onmousemove = function(event) {
/*do your stuff*/
};
/*Removing the event listener*/
element.onmousemove = null;
Please keep in mind I have only tested this for the window element and for the 'mousemove' event, so there could be some problems with this approach.
Possibly not the best solution in terms of what you are asking. I have still not determined an efficient method for removing anonymous function declared inline with the event listener invocation.
I personally use a variable to store the <target> and declare the function outside of the event listener invocation eg:
const target = document.querySelector('<identifier>');
function myFunc(event) {
function code;
}
target.addEventListener('click', myFunc);
Then to remove the listener:
target.removeEventListener('click', myFunc);
Not the top recommendation you will receive but to remove anonymous functions the only solution I have found useful is to remove then replace the HTML element. I am sure there must be a better vanilla JS method but I haven't seen it yet.
I know this is a fairly old thread, but thought I might put in my two cents for those who find it useful.
The script (apologies about the uncreative method names):
window.Listener = {
_Active: [],
remove: function(attached, on, callback, capture){
for(var i = 0; i < this._Active.length; i++){
var current = this._Active[i];
if(current[0] === attached && current[1] === on && current[2] === callback){
attached.removeEventListener(on, callback, (capture || false));
return this._Active.splice(i, 1);
}
}
}, removeAtIndex(i){
if(this._Active[i]){
var remove = this._Active[i];
var attached = remove[0], on = remove[1], callback = remove[2];
attached.removeEventListener(on, callback, false);
return this._Active.splice(i, 1);
}
}, purge: function(){
for(var i = 0; i < this._Active.length; i++){
var current = this._Active[i];
current[0].removeEventListener(current[1], current[2]);
this._Active.splice(i, 1);
}
}, declare: function(attached, on, callback, capture){
attached.addEventListener(on, callback, (capture || false));
if(this._Active.push([attached, on, callback])){
return this._Active.length - 1;
}
}
};
And you can use it like so:
// declare a new onclick listener attached to the document
var clickListener = Listener.declare(document, "click" function(e){
// on click, remove the listener and log the clicked element
console.log(e.target);
Listener.removeAtIndex(clickListener);
});
// completely remove all active listeners
// (at least, ones declared via the Listener object)
Listener.purge();
// works exactly like removeEventListener
Listener.remove(element, on, callback);
I just experienced similiar problem with copy-protection wordpress plugin. The code was:
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
target.style.MozUserSelect="none"
else //All other route (For Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
And then it was initiated by loosely put
<script type="text/javascript">disableSelection(document.body)</script>.
I came around this simply by attaching other annonymous function to this event:
document.body.onselectstart = function() { return true; };
Set anonymous listener:
document.getElementById('ID').addEventListener('click', () => { alert('Hi'); });
Remove anonymous listener:
document.getElementById('ID').removeEventListener('click',getEventListeners(document.getElementById('ID')).click[0].listener)
Using the AbortController, neat and clean
Attaching EventListener
const el = document.getElementById('ID')
const controller = new AbortController;
el.addEventListener('click',() => {
console.log("Clicked")
},{signal: controller.signal})
when you want to remove the event listener
controller.abort()
Another alternative workaround to achieve this is adding an empty event handler and preventing event propagation.
Let's assume you need to remove mouseleave event handler from an element which has #specific-div id, that is added with an anonymous function, and you can't use removeEventListener() since you don't have a function name.
You can add another event handler to that element and use event.stopImmediatePropagation(), for being sure this event handler works before existing ones you should pass the third parameter (useCapture) as true.
The final code should look like the below:
document.getElementById("specific-div")
.addEventListener("mouseleave", function(event) {
event.stopImmediatePropagation()
}, true);
This could help for some specific cases that you can't prefer cloneNode() method.
window.document.onkeydown = function(){};
I am trying to figure out how to properly create and fire events in JavaScript, so in the process of learning ran into this page:
https://developer.mozilla.org/en-US/docs/DOM/document.createEvent
Which at the top informs me of the following:
The createEvent method is deprecated. Use event constructors instead.
Googling JS event constructors was not very fruitful - topics talking about constructors in general, but not what I am looking for. Could somebody please explain to me what are the event constructors and provide a good example of their usage?
From https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent:
It seems that events are now encapsulated in a class called CustomEvent. You can think of the old document.createEvent as a factory method that returns an event object. Now, instead of using document.createEvent to create the object, you now have access to create the object directly.
//this is the new way
var my_event = new CustomEvent('NewEventName');
var my_element = document.getElementById('TargetElement');
my_element.dispatchEvent(my_event);
is the replacement for
//this is the old way
var my_event = document.createEvent('NewEventName');
var my_element = document.getElementById('TargetElement');
my_element.dispatchEvent(my_event);
You want to use addEventListener()
https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener
Here's my library code for attaching events, I found these on stackoverflow and put them inside of my app global namespace:
var app={}
app.listenEvent=function(eventTarget, eventType, eventHandler) {
if (eventTarget.addEventListener) {
eventTarget.addEventListener(eventType, eventHandler,false);
}
else if (eventTarget.attachEvent) {
eventType = "on" + eventType;
eventTarget.attachEvent(eventType, eventHandler);
}
else {
eventTarget["on" + eventType] = eventHandler;
}
}
app.cancelEvent=function(event) {
if (event.preventDefault)
event.preventDefault()
else
event.returnValue = false;
}
app.cancelPropagation=function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true; }
}
So to add an listen for an event:
app.listenEvent(document.aform.afield, 'focus', function(){console.log(arguments)} )
These functions are great, they work in all browsers.
I'm trying to add a method to the Event prototype. In order to call/set preventDefault() or, in IE-speak returnValue = false and -if desired- stopPropagation() / cancelBubble = true;. I thought the code below would have sufficed.
Event = Event || window.Event;
//^^ makes the fiddle work on IE8 ^^
if(!(Event.prototype.stopEvent))
{
Event.prototype.stopEvent = function(propagate)
{
"use strict";
propagate = (propagate ? true : false);
if (this.preventDefault)
{
this.preventDefault();
if (propagate === false)
{
this.stopPropagation();
}
}
else
{
this.returnValue = false;
this.cancelBubble = !propagate;
}
return this;
};
}
Which seems to work, as you can see here. This fiddle shows OK in IE8, firefox and chrome. Though, when I add this to my script, IE8 breaks on the first line, saying 'Event is undefined'. Leaving out "use strict"; makes no difference at all.
Reluctantly, I tried this, too:
if (typeof Event === 'undefined')
{
var Event = window.Event || window.event;//FFS IE :-(
}
But to no avail: Error: 'Event.prototype' is null or not an object, so I got 1 line further. The thing is, the entire prototype method is a copy paste from my script, but what am I overlooking here? Any idea's/suggestions? Thanks
PS: I like Pure JavaScript, so please, don't suggest jQuery, prototypejs, dojo,... as a solution. I've just gotten rid of jQuery. (I like jQuery, but there is no need for it in this case)
Update
Things have taken a turn for the worse, I'm afraid. I found this MSDN reference. The entire page deals with DOM Element prototypes. It's pretty fair to say they are available and usable in IE8 (to some extent). On this page, this code caught my eye:
Event.prototype.stopPropagation = function ()
{
this.cancelBubble = true;
};
Event.prototype.preventDefault = function ()
{
this.returnValue = false;
};
It can be found ~3/4ths of the page down, in the section titled "Powerful Scenarios". This is, to my mind exactly the same thing as I want to do, but what's more: if I try this code via jsfiddle, it doesn't even work, whereas my jsfiddle (with my code) did work on IE8. This is just the last few lines of a snippet, but as far as I can work out, these few lines of code should work just fine. I've altered them as follows:
Event.prototype.stopPropagation = function ()
{
if (this.stopPropagation)
{
return this.stopPropagation();
}
this.cancelBubble = true;
};
Event.prototype.preventDefault = function ()
{
if (this.preventDefault)
{
return this.preventDefault();
}
this.returnValue = false;
};
I recently had (another) brainwave, and I think I found a better way of augmenting the event prototype. Strictly speaking, the Event prototype is not accessible in IE (<9), but it is, I found out accessible if you work your way back from an instance (well, the instance: window.event). So here's a snippet that works in all major browsers (and IE8 - not 7):
(function()
{
function ol(e)
{//we have an event object
e = e || window.event;
if (!e.stopEvent)
{
if (Object && Object.getPrototypeOf)
{//get the prototype
e = Object.getPrototypeOf(e);
}
else
{//getting a prototype in IE8 is a bit of a faff, this expression works on most objects, though
//it's part of my custom .getPrototypeOf method for IE
e = this[e.constructor.toString().match(/(function|object)\s+([A-Z][^\s(\]]+)/)[2]].prototype;
}
e.stopEvent = function(bubble)
{//augment it (e references the prototype now
bubble = bubble || false;
if (this.preventDefault)
{
this.preventDefault();
if (!bubble)
{
this.stopPropagation();
}
return this;
}
this.returnValue = false;
this.cancelBubble = !bubble;
return this;
};
}
alert(e.stopEvent ? 'ok' : 'nok');//tested, it alerts ok
if (this.addEventListener)
{
this.removeEventListener('load',ol,false);
return;
}
document.attachEvent('onkeypress',function(e)
{
e = e || window.event;
if (e.stopEvent)
{//another event, each time alerts ok
alert('OK!');
}
});
this.detachEvent('onload',ol);
}
if (this.addEventListener)
{
this.addEventListener('load',ol,false);
}
else
{
this.attachEvent('onload',ol);
}
})();
That way, the header doctype doesn't matter all that much: I've tested it using the <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, and it works in FF, chrome and IE 8, no problems whatsoever. Using <!DOCTYPE html> to be safe, though
Hope this helps someone...
Its Standards versus Quirks mode. The JSFiddle page has a DOCTYPE declaration, albeit an incredibly simple one, <!DOCTYPE html>, that kicks the render into Standards mode. Chances are your web page does not have a DOCTYPE which leaves the render in Quirks mode. After adding that simple DOCTYPE to a page I built from your fiddle, it worked for me.
I always wondered how clean is such approach - to remove an event listener from within that very listener.
UPDATE:
Internally I keep a hash of objects and listeners, so I potentially can remove event listener from any place. I'm just concerned of removing it from within itself. Will such action do a job actually?
UPDATE
I'm asking about addEventListener, removeEventListener stuff.
You can pass the once option to have a listener act only once, then remove itself. Docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
Example:
element.addEventListener('eventname', (ev) => {
console.log("event is captured only once.");
// do more stuff...
}, { once: true });
From the same docs link above, modern browser support is good, but is not available for Internet Explorer.
I just saw this because i wondered the exact same question!
arguments.callee is your friend...
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee
so you'd have
blah.addEventListener('click',function(e){
e.source.removeEventListener('click', arguments.callee);
blee bloo bleep
});
this works in Titanium Appcelerator, so it should work in javascript too (because they are The Same Thing Kinda)
NB do NOT add () to the end of arguments.callee in this example, unless you like seeing... bah dum tish!.
In fact, if you don't want to use arguments.callee, this also might work (untested):
blah.addEventListener('click', anyThingYouWantHere = function(e){
e.source.removeEventListener('click', anyThingYouWantHere);
blee bloo bleep
});
Where "anythingYouWantHere" is any variable name you'd like ~ you're effectively "naming" the function as you add it.
I just made a wrapper function that generates a self destructing event listener:
let addSelfDestructingEventListener = (element, eventType, callback) => {
let handler = () => {
callback();
element.removeEventListener(eventType, handler);
};
element.addEventListener(eventType, handler);
};
So far it works great :)
#bharal answer gave me now this solution:
//example
addBlurListener(element, field) {
const listenToBlur = (e) => {
e.target.removeEventListener(e.type, listenToBlur);
//your stuff
};
element.addEventListener('blur', listenToBlur);
},
You could try something like this, depending on how it's called:
some_div.onclick = function () {
...
this.onclick = null;
// or: some_div.onclick = null;
};
Or is it event listeners you're concerned with? Because those are a little bit more complicated.
If you want listener only trigger once, you can use this code:
element.addEventListener('eventname', function callback(){}, { once: true });
Or use wrapper to do the same thing:
function addOneTimeEventListener(element, event, callback) {
const wrapper = e => {
try {callback(e)} finally {
element.removeEventListener(event, wrapper);
};
}
element.addEventListener(event, wrapper);
}
// example
addOneTimeEventListener(document.body, 'click', e => {
console.log('this message only show once.');
});
If you want to decide when to remove listener:
function addEventListener(element, event, callback) {
const wrapper = e => {
callback(e, () => element.removeEventListener(event, wrapper));
}
element.addEventListener(event, wrapper);
}
// example
let count = 0;
addEventListener(document.body, 'click', (e, closeListener) => {
console.log(`click:${++count}`);
if(count == 3) closeListener();
});
If you use jQuery, you will probably have some convenience methods exposed for interacting with event handlers -- see bind()/unbind(), delegate()/undelegate(), one(), and similar methods.
I don't have much experience with other frameworks, but I'd imagine they offer similar functionality. If you're not using a framework at all, #sdleihssirhc has an acceptable answer.
EDIT: Ah, perhaps you're looking for something more like addEventListener() and removeEventListener(). Again, a framework will offer some convenience to your interactions and save you the trouble of reinventing the wheel in some cases.
EDIT: OK, I believe the following solutions are valid:
Use the jQuery AOP plugin. It basically wraps the old function together with the hook into a function sandwich and reassigns it to the old function name. This causes nesting of functions with each new added hook.
If jQuery is not usable for you, just pillage the source code, there did not seem to be any jQuery dependencies in the plugin, and the source is simple and very small.
Have an object describing all hooks and their targets and one to store the initial unmodified function. When adding a new hook, the wrapping would be redone around the original function, instead of re-wrap the the previous wrapping function.
You escape nested functions, and get two objects to handle instead. Potentially, this could also mean easier hook handling, if you add/remove hooks often and out of order.
I'll go with the first, since it's already done, and I don't have performance to worry about. And since the original functions are not affected, even if I switch hooking methods, I'll only need to redo the hook adding, which might be just some simple search&replace operations.
Hi,
Is it possible to create a mechanism, in which function A might have a set of hooks(functions that will execute before/after function A)?
Ideally, function A would not be aware of hooking functionality, so that I do not have to modify the source code of function A to call the hooks. Something like:
A = function(){
alert("I'm a naive function");
};
B = function(){
alert("I'm having a piggyback ride on function A!"+
"And the fool doesn't even know it!");
};
addHook(B, A)//add hook B to function A
A()
//getting alerts "I'm a naive function"/"I'm having a
//piggyback ride on function A! And the fool doesn't even know it!"
I've been trying to hack something up for a couple of hours, but so far no luck.
Might not be pretty but it seems to work...
<script>
function A(x) { alert(x); return x; }
function B() { alert(123); }
function addHook(functionB, functionA, parent)
{
if (typeof parent == 'undefined')
parent = window;
for (var i in parent)
{
if (parent[i] === functionA)
{
parent[i] = function()
{
functionB();
return functionA.apply(this, arguments)
}
break;
}
}
}
addHook(B, A);
A(2);
</script>
Take a look at jQuery's AOP plugin. In general, google "javascript aspect oriented programming".
Very simple answer:
function someFunction() { alert("Bar!") }
var placeholder=someFunction;
someFunction=function() {
alert("Foo?");
placeholder();
}
This answer is not definitive, but rather demonstrative of a different technique than those offered thus far. This leverages the fact that a function in Javascript is a first-class object, and as such, a) you can pass it as a value to another function and b) you can add properties to it. Combine these traits with function's built-in "call" (or "apply") methods, and you have yourself a start toward a solution.
var function_itself = function() {
alert('in function itself');
}
function_itself.PRE_PROCESS = function() {
alert('in pre_process');
}
function_itself.POST_PROCESS = function() {
alert('in post_process');
}
var function_processor = function(func) {
if (func.PRE_PROCESS) {
func.PRE_PROCESS.call();
}
func.call();
if (func.POST_PROCESS) {
func.POST_PROCESS.call();
}
}
The following function will give you before and after hooks that can be stacked. So if you have a number of potential functions that need to run before the given function or after the given function then this would be a working solution. This solution does not require jQuery and uses native array methods (no shims required). It should also be context sensitive so if you are calling the original function with a context if should run each before and after function likewise.
// usage:
/*
function test(x) {
alert(x);
}
var htest = hookable(test);
htest.addHook("before", function (x) {
alert("Before " + x);
})
htest.addHook("after", function (x) {
alert("After " + x);
})
htest("test") // => Before test ... test ... After test
*/
function hookable(fn) {
var ifn = fn,
hooks = {
before : [],
after : []
};
function hookableFunction() {
var args = [].slice.call(arguments, 0),
i = 0,
fn;
for (i = 0; !!hooks.before[i]; i += 1) {
fn = hooks.before[i];
fn.apply(this, args);
}
ifn.apply(this, arguments);
for (i = 0; !!hooks.after[i]; i++) {
fn = hooks.after[i];
fn.apply(this, args);
}
}
hookableFunction.addHook = function (type, fn) {
if (hooks[type] instanceof Array) {
hooks[type].push(fn);
} else {
throw (function () {
var e = new Error("Invalid hook type");
e.expected = Object.keys(hooks);
e.got = type;
return e;
}());
}
};
return hookableFunction;
}
Here's what I did, might be useful in other applications like this:
//Setup a hooking object
a={
hook:function(name,f){
aion.hooks[name]=f;
}
}a.hooks={
//default hooks (also sets the object)
};
//Add a hook
a.hook('test',function(){
alert('test');
});
//Apply each Hook (can be done with for)
$.each(a.hooks,function(index,f){
f();
});
I don't know if this will be useful. You do need to modify the original function but only once and you don't need to keep editing it for firing hooks
https://github.com/rcorp/hooker