jQuery special event API - javascript

I'm creating a special event as described in article by Brandon Aaron here
This event needs to trigger on window resize.
$.event.special.myevent = {
setup: function () {
$(window).bind("resize", $.event.special.myevent.handler);
},
teardown: function () {
$(window).unbind("resize", $.event.special.myevent.handler);
},
handler: function (e) {
var $this = $(this);
//some other rulles
console.log("handler function");
e.type = "myevent";
jQuery.event.handle.apply(this, arguments);
}
}
binding to event:
$("#myDiv1").bind("myevent", function () {
alert("my event sub");
})
Problem:
$("#myDiv1") doesn't receive the event. This seem to be related to the fact that in setup I trigger on $(window) instead of $(this).
Question is how can I have the event that piggybacks on events happening on other objects.

You can use $.proxy to change the this reference inside the function:
setup: function () {
$(window).on("resize.myevent", $.proxy($.event.special.myevent.handler, this));
},
teardown: function () {
$(window).off("resize.myevent");
},
Fiddle
I've used an event namespace for removing the handler more easily, so you don't need a reference to the function generated by $.proxy.

Related

Event Delegation: where to put the "if" statement

Javascript newbie here.
Is there a "best practice" for placement of "if" statements in event delegation?
Context
I'm setting up event listeners using vanilla Javascript (I know jQuery etc. would simplify things, but let's stick to vanilla JS): there's an event listener on the parent element that invokes a function when a child is clicked. In our example, that function to-be-invoked lives elsewhere in the code.
Let's say I only want to take action when element with id=child-element is clicked. To do this, I use an "if" statement.
There are two obvious places I can put the if statement:
Within the event listener
Within the function
Question
Is (1) or (2) preferred? If so, why? ("Better memory management", "code is easier to read", etc.)
Example 1
var foo = {
bindEvent: function () {
document.getElementById('clickableElement').addEventListener('click', function (e) {
const clickTarget = e.target.id
if (clickTarget === 'child-element') {
foo.takeAnAction.bind(foo);
foo.takeAnAction();
};
});
},
takeAnAction: function () {
console.log('Click');
},
};
Example 2
var foo = {
bindEvent: function () {
document.getElementById("clickableElement").addEventListener("click",
foo.takeAnAction.bind(foo));
},
takeAnAction: function(e) {
if (e.target.id === "child-element") {
console.log('click');
};
},
};
Thanks!
I would go with option 1. The reason is that you can easily generalise it to handle any event delegation, so it's reusable. Sample:
var foo = {
bindEvent: function (selector, callback) { //accept a selector to filter with
document.getElementById('clickableElement').addEventListener('click', function (e) {
const clickTarget = e.target; //take the element
// check if the original target matches the selector
if (target.matches(selector)) {
takeAnAction.call(foo);
};
});
},
takeAnAction: function () {
console.log('Click');
},
};
foo.bindEvent("#child-element", foo.takeAction);
Now you can produce any amount of delegated event bindings. Adding another delegated binding is as simple as:
foo.bindEvent("#parent-element", foo.takeAction);
foo.bindEvent(".table-of-content", foo.takeAction);
With option 2, you will not need to change the implementation or produce new functions for each case:
/*... */
takeAnAction: function(event) {
if (event.target.id === "child-element") {
console.log('click');
};
},
takeAnActionForParent: function(event) {
if (event.target.id === "parent-element") {
console.log('click');
};
},
takeAnActionOnTableOfContentItems: function(event) {
if (event.target.classList.contains("table-of-content") {
console.log('click');
};
},
If you need to execute the same logic in each case, there is really no need to add a new function for every single case. So, for maintainability point of view, adding the logic in the event listener that would call another function is simpler to manage than producing different functions to be called.

Object method as callback function [duplicate]

I have a bunch of handlers that call up a specific jQuery plugin. I would like to refactor the code and create an object whose properties and methods can be passed to a wrapper which would then call up the plugin.
Problem: I have difficulties emulating the following statement:
$("li", opts.tgt).live("click", function () { GetContact(this); });
Does someone have some suggestions on how to proceed? TIA.
function InitAutoCompleteTest() { // Init custom autocomplete search
var opts = {
tgt: "#lstSug", crit: "#selCrit", prfxID: "sg_", urlSrv: gSvcUrl + "SrchForContact",
fnTest: function (str) { alert(str) },
fnGetData: function (el) { GetContact(el) }
}
$("input", "#divSrchContact").bind({
"keypress": function (e) { // Block CR (keypress fires before keyup.)
if (e.keyCode == 13) { e.preventDefault(); };
},
"keyup": function (e) { // Add suggestion list matching search pattern.
opts.el = this; $(this).msautocomplete(opts); e.preventDefault();
},
"dblclick": function (e) { // Clear search pattern.
$(this).val("");
}
});
opts.fnTest("Test"); // Works. Substituting the object method as shown works.
// Emulation attempts of below statement with object method fail:
// $("li", opts.tgt).live("click", function () { GetContact(this); });
$("li", opts.tgt).live({ "click": opts.fnGetData(this) }); // Hangs.
$("li", opts.tgt).live({ "click": opts.fnGetData }); // Calls up GetContact(el) but el.id in GetContact(el) is undefined
}
function GetContact(el) {
// Fired by clicking on #lstSug li. Extract from selected li and call web srv.
if (!el) { return };
var contID = el.id, info = $(el).text();
...
return false;
}
Edit
Thanks for the feedback. I finally used the variant proposed by Thiefmaster. I just wonder why the method must be embedded within an anonymous fn, since "opts.fnTest("Test");" works straight out of the box, so to speak.
$("li", opts.tgt).live({ "click": function () { opts.fnGetData(this); } });
Simply wrap them in an anonymous function:
function() {
opts.fnGetData();
}
Another option that requires a modern JS engine would be using .bind():
opts.fnGetData.bind(opts)
Full examples:
$("li", opts.tgt).live({ "click": opts.fnGetData.bind(opts) });
$("li", opts.tgt).live({ "click": function() { opts.fnGetData(); }});
Inside the callback you then use this to access the object.
If you want to pass the element as an argument, you can do it like this:
$("li", opts.tgt).live({ "click": function() { opts.fnGetData(this); }});
From documentation
.live( events, data, handler(eventObject) )
eventsA string containing a JavaScript event type, such as "click" or "keydown." As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names.
data A map of data that will be passed to the event handler.
handler(eventObject) A function to execute at the time the event is triggered.
Example:
$('#id').live('click', {"myValue":"someValue"}, function(evt){
console.log(evt.data["myValue"]); // someValue
});​
JQuery live

User-defined callback function is being fired multiple times in Javascript/jQuery

There are some similar questions, but they all seem like regarding native jQuery callback functions.
So I have this code which (live) creates a div containting some form elements.
Values of these elements should be retrieved inside a callback function when (before) the div is removed.
function popup(callback) {
// ...
// before removing the div
callback.call();
// remove div
}
Unexpectedly, the callback function is being fired multiple times (increasingly) after the first time popup is executed.
I have simplified the code, and here is the fiddle.
I hope this is what you need.
function popup(callback) {
$("body").append('<div><span id="test">test</span> close</div>');
$(document).on("click", "#close", function() {
callback.call();
//
//callback = function() {};
$(document).off("click", "#close");
$("div").remove();
});
};
$(document).on("click", "#open", function() {
popup(function() {
alert('$("#test").length = ' + $("#test").length);
});
});
Basically, you need to remove event handler by invoking off() method.
Try dynamically generating the elements instead of using a string. This will allow you to bind events easier.
function popup(callback)
{ var $elem = $("<div></div>");
$elem.append($("<span></span>").html("test"));
$elem.append(" ");
$elem.append($("<a></a>").html("close").attr("href", "#"));
$("body").append($elem);
$elem.find("a").click(function() {
callback.call();
$elem.remove();
});
};
$(document).on("click", "#open", function() {
popup(function() {
alert('$("#test").length = ' + $("#test").length);
});
});
Example: http://jsfiddle.net/4se7M/2/
I don't know the exact scenario, but why do you want to bind and unbind the event each time you show the popup?
You can bind only once, like this, can't you?
$(document).on("click", "#close", function() {
alert('$("#test").length = ' + $("#test").length);
$("div").remove();
});
function popup() {
$("body").append('<div><span id="test">test</span> close</div>');
};
$(document).on("click", "#open", function() {
popup();
});

How do I attach event listener to an opened colorbox?

I am using the jQuery colorbox. I wish to attach an event handler to the close event after I opened the colorbox.
How would I do that?
Colorbox has event hooks that you can use. So, you could bind a function to cbox_open event and in that function, bind a function for close event.
$(document).bind('cbox_open', function(){
$(document).bind('cbox_closed', function(){
alert('x');
});
});
set the onClosed callback to a function reference, then change that function after you receive the input from the user.
example jsfiddle
something like:
// initialize your callback function
var closeEvent = function() {
console.log('not handled');
};
$(".group1").colorbox({
rel:'group1',
onComplete: function() {
// set the callback function after the colorbox has been opened
// (can substitute your own custom button event in leiu of this onComplete event)
closeEvent = function() {
console.log('handled');
}
},
onClosed: function() { closeEvent() }
});
​

Disabling click event handlers

I am trying to basically disable the click event on a <div> temporarily.
I have tried the following (preview):
$('hello').observe('click', function (e) {
e.stop();
});
$('hello').observe('click', function (e) {
alert('click not stopped!');
});
However, when #hello is clicked, the alert box still appears. I do not want the second attached handler to be called, and I do not want to change the second handler.
I will also accept a solution such as:
$('hello').observe('click', function (e) {
alert('click not stopped!');
});
$('hello').disableEvent('click');
// Now, handler won't be called
$('hello').observe('click', function (e) {
alert('click not stopped (2)!');
});
// New handler won't be called, either
$('hello').enableEvent('click');
// Now, handler will be called
I am using the Prototype.js framework. This doesn't seem to be a browser-specific issue.
When you assign handlers to events; you are basically just storing a set of functions to be executed when an event fires.
When an event fires, the handlers you've added are executed in the order they we're added. So if you we're to add three handlers to a div's click-event:
$("div").observe("click", function ()
{
alert("one");
});
$("div").observe("click", function ()
{
alert("two");
});
$("div").observe("click", function ()
{
alert("three");
});
.. you would get three alerts ("one", "two" and "three") when the click event of the div element fires. Those three alerts will still get shown, if you put in:
$("div").observe("click", function (e)
{
e.stop();
})
.. because you are only canceling the event for one particular handler. Not all associated handlers.
So what you will need to do is use a reference variable, which keeps track of wether the click event is allowed to fire:
var cancelClickEvent = true;
$("div").observe("click", function ()
{
// if cancelClickEvent is true, return the function early, to
// stop the code underneath from getting executed
if (cancelClickEvent) return;
// your code goes here
});
You will then need to implement the above if-clause in all your handlers.
Can't you just set the object's disabled property to true?
As I said in comments to roosteronacid's answer, I wrote an extension to Event.observe. Works in most browsers, but not IE.
// XXX HACK XXX
(function () {
var handlerCache = $A([ ]);
function findHandler(either) {
var pair = handlerCache.find(function (pair) {
return $A(pair).member(either);
});
return pair && pair[0];
}
function addHandler(handler) {
function newHandler(e) {
if (!e.halted) {
handler.apply(this, arguments);
}
}
handlerCache.push([ handler, newHandler ]);
return newHandler;
}
Event.observe = Event.observe.extended(function ($super, element, eventName, handler) {
handler = findHandler(handler) || addHandler(handler);
$super(element, eventName, handler);
});
Event.stopObserving = Event.stopObserving.extended(function ($super, element, eventName, handler) {
handler = findHandler(handler) || handler;
$super(element, eventName, handler);
});
Element.addMethods({
observe: Event.observe
});
Event.prototype.halt = function () {
this.halted = true;
};
}());
Note: Function.prototype.extended is a custom function which puts the original Event.observe in as $super.

Categories

Resources