If this is the equivalent to the jquery bind method, what would it be for the trigger method.
function bind( scope, fn ) {
return function () {
fn.apply( scope, arguments );
};
}
the code above is from another post and it looks the same as a proxy method
you can comment on this too
I have to take the jquery part out off this framework, - this is just the relevant part
if (selector === '') {
this.el.bind(eventName, method);
} else {
this.el.delegate(selector, eventName, method);
}
}
}
});
if (includes) result.include(includes);
return result;
};
exports.Controller = mod;
})($, window);
var exports = this;
var Events = {
bind: function(){
if ( !this.o ) this.o = $({});
this.o.bind.apply(this.o, arguments);
},
trigger: function(){
if ( !this.o ) this.o = $({});
this.o.trigger.apply(this.o, arguments);
}
};
thanks
It depends on the type of event you wish to trigger. If it's a custom event:
var event = new Event('build');
elem.dispatchEvent(event);
If it's a native event:
var event = new MouseEvent('click');
elem.dispatchEvent(event);
This is of course meant to simulate a mouse event. Other events have their own type.
Once I crossed this site How to Manually Trigger Events in JavaScript
// Here is a VERY basic generic trigger method
function triggerEvent(el, type)
{
if ((el[type] || false) && typeof el[type] == 'function')
{
el[type](el);
}
}
// We could call this on multiple objects at any time
function resetFields()
{
triggerEvent(document.getElementById('has-email'), 'onchange');
triggerEvent(document.getElementById('other-field'), 'onclick');
triggerEvent(document.getEleemntById('another-one'), 'onblur');
}
Related
(function( $ ){
var methods = {
init : function( options ) {
var settings = $.extend({ //Объявление настроек по умолчанию, которые можно переопределить в вызове плагина
code: 7,
listHeight: 160,
placeholder: "925000000",
phoneNumber: ""
}, options);
},
getCode : function( ) {
return $(this).settings.code;
}
};
$.fn.telephoneNumber = function( method ) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Метод с именем ' + method + ' не существует.' );
}
};
})( jQuery );
I need to refer to a variable code from a function getCode.
Function getCode returns nothing, how fix?
Since this in the call to your plugin will refer to the jQuery instance on which it was called, you can't use it to refer directly to your plugin's information.
The usual way to handle this is to store any information your plugin needs using jQuery's data function. Here's a simple example (this is loosely based in your code, but not an exact update of it; it's just an example):
(function ($) {
var methods = {
init: function (options) {
// Save settings using `data`
this.data("myplugin", $.extend({/*...*/}, options));
},
doSomething: function () {
// Get settings using `data`
var settings = this.data("myplugin");
// Use them...
}
};
var slice = Array.prototype.slice;
$.fn.myplugin = function (command) {
if (typeof command === "string") {
methods[command].apply(this, slice.call(arguments, 1));
} else {
methods.init.apply(this, arguments);
}
return this;
};
})(jQuery);
Live Example
Note that your code requires that the user call the plugin to initialize it, and then again to call a method on it, which I've reproduced above. So:
$("some selector").myplugin(); // Init
$("some selector").myplugin("doSomething"); // Use
You could auto-init with defaults if the user doesn't do that, by changing the plugin function like this:
$.fn.myplugin = function (command) {
if (typeof command === "string") {
if (!this.data("myplugin")) { // Not initialized?
methods.init.call(this); // Init with defaults
}
methods[command].apply(this, slice.call(arguments, 1));
} else {
methods.init.apply(this, arguments);
}
return this;
};
Here's that in action
settings has scope limited to init method as you've defined it there only. getCode function has no access to this variable.
Just define the settings globally, and you can access it in getCode.
I understand the proper way to handle event.stopPropagation for IE is
if(event.stopPropagation) {
event.stopPropagation();
} else {
event.returnValue = false;
}
But is it possible to prototype Event so that I don't have to do the check each and everytime I use stopPropagation?
This question seemed helpful: JavaScript Event prototype in IE8 however I don't quite understand the accepted answer and how it is a prototype that can essentially be set and forget.
Probably this:
Event = Event || window.Event;
Event.prototype.stopPropagation = Event.prototype.stopPropagation || function() {
this.cancelBubble = true;
}
returnValue = false is an analogue for preventDefault:
Event.prototype.preventDefault = Event.prototype.preventDefault || function () {
this.returnValue = false;
}
If you're doing your own event handling in plain javascript, then you probably already have a cross browser routine for setting event handlers. You can put the abstraction in that function. Here's one that I use that mimics the jQuery functionality (if the event handler returns false, then both stopPropagation() and preventDefault() are triggered. You can obviously modify it however you want it to behave:
// refined add event cross browser
function addEvent(elem, event, fn) {
// allow the passing of an element id string instead of the DOM elem
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
function listenHandler(e) {
var ret = fn.apply(this, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return(ret);
}
function attachHandler() {
// normalize the target of the event
window.event.target = window.event.srcElement;
// make sure the event is passed to the fn also so that works the same too
// set the this pointer same as addEventListener when fn is called
var ret = fn.call(elem, window.event);
// support an optional return false to be cancel propagation and prevent default handling
// like jQuery does
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return(ret);
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
Or, you can just make a utility function like this:
function stopPropagation(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.returnValue = false;
}
}
And just call that function instead of operating on the event in each function.
We can use this alone: event.cancelBubble = true.
Tested working in all browsers.
I need to launch custom events from CLASS. I know to do this with DOM objects and jquery, using triggerHandler, like $(object)..triggerHandler("inputChange", {param:X});
The problem is when i try this with a Class, like this:
var MyClass = (function(){
var static_var = 1;
var MyClass = function () {
var privateVar;
var privateFn = function(){ alert('Im private!'); };
this.someProperty = 5;
this.someFunction = function () {
alert('Im public!');
};
this.say = function() {
alert('Num ' + this.someProperty);
$(this).triggerHandler("eventCustom");
}
this.alter = function() {
this.someProperty ++;
}
};
return MyClass;
})();
TheClass = new MyClass();
$(TheClass).on('eventCustom', function() {
alert('Event!');
});
TheClass.say();
This doesn't launch warnings or errors, but the events listener is not working (or event is not dispatched). I think the jQuery event system doesn't work with not DOM object, correct?
Any other way (I need events, not callbacks for my specific case) to launch the events?
Thanks a lot!
I wrote an ES6 event class for nowadays in under 100 lines of code without using JQuery. If you don't want to use DOM-events you can extend your class, which should deal with Events.
For listening to events, you can use on, once, onReady, onceReady. On is execute the callbackfunction every time the label is trigger. Once only one time. The "ready"-functions execute the callback, if the label had been already triggerd before.
For triggering an event, use a trigger. To remove an eventhandler, use off.
I hope the example makes it clear:
class ClassEventsES6 {
constructor() {
this.listeners = new Map();
this.onceListeners = new Map();
this.triggerdLabels = new Map();
}
// help-function for onReady and onceReady
// the callbackfunction will execute,
// if the label has already been triggerd with the last called parameters
_fCheckPast(label, callback) {
if (this.triggerdLabels.has(label)) {
callback(this.triggerdLabels.get(label));
return true;
} else {
return false;
}
}
// execute the callback everytime the label is trigger
on(label, callback, checkPast = false) {
this.listeners.has(label) || this.listeners.set(label, []);
this.listeners.get(label).push(callback);
if (checkPast)
this._fCheckPast(label, callback);
}
// execute the callback everytime the label is trigger
// check if the label had been already called
// and if so excute the callback immediately
onReady(label, callback) {
this.on(label, callback, true);
}
// execute the callback onetime the label is trigger
once(label, callback, checkPast = false) {
this.onceListeners.has(label) || this.onceListeners.set(label, []);
if (!(checkPast && this._fCheckPast(label, callback))) {
// label wurde nocht nicht aufgerufen und
// der callback in _fCheckPast nicht ausgeführt
this.onceListeners.get(label).push(callback);
}
}
// execute the callback onetime the label is trigger
// or execute the callback if the label had been called already
onceReady(label, callback) {
this.once(label, callback, true);
}
// remove the callback for a label
off(label, callback = true) {
if (callback === true) {
// remove listeners for all callbackfunctions
this.listeners.delete(label);
this.onceListeners.delete(label);
} else {
// remove listeners only with match callbackfunctions
let _off = (inListener) => {
let listeners = inListener.get(label);
if (listeners) {
inListener.set(label, listeners.filter((value) => !(value === callback)));
}
};
_off(this.listeners);
_off(this.onceListeners);
}
}
// trigger the event with the label
trigger(label, ...args) {
let res = false;
this.triggerdLabels.set(label, ...args); // save all triggerd labels for onready and onceready
let _trigger = (inListener, label, ...args) => {
let listeners = inListener.get(label);
if (listeners && listeners.length) {
listeners.forEach((listener) => {
listener(...args);
});
res = true;
}
};
_trigger(this.onceListeners, label, ...args);
_trigger(this.listeners, label, ...args);
this.onceListeners.delete(label); // callback for once executed, so delete it.
return res;
}
}
// +++ here starts the example +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
class TestClassEvents extends ClassEventsES6 {
constructor() {
super();
this.once('sayHallo', this.fStartToTalk);
this.on('sayHallo', this.fSayHallo);
}
fStartToTalk() {
console.log('I start to talk... ');
}
fSayHallo(name = 'Nobody') {
console.log('Hallo ' + name);
}
}
let testClassEvents = new TestClassEvents();
testClassEvents.trigger('sayHallo', 'Tony');
testClassEvents.trigger('sayHallo', 'Tim');
testClassEvents.onReady('sayHallo', e => console.log('I already said hello to ' + e));
testClassEvents.trigger('sayHallo', 'Angie');
testClassEvents.off('sayHallo');
testClassEvents.trigger('sayHallo', 'Peter');
console.log('I dont say hallo to Peter, because the event is off!')
Your understanding of how javascript works is limited since you are approaching it from a traditional OOP point of view. Take a look at this fiddle http://jsfiddle.net/9pCmh/ & you will see that you can actually pass functions as variables to other functions. There are no classes in javascript, only functions which can be closures which can be made to emulate traditional classes:
var MyClass = (function(){
var static_var = 1;
var MyClass = function ( callback ) {
var privateVar;
var privateFn = function(){ alert('Im private!'); };
this.someProperty = 5;
this.someFunction = function () {
alert('Im public!');
};
this.say = function() {
alert('Num ' + this.someProperty);
callback();
}
this.alter = function() {
this.someProperty ++;
}
};
return MyClass;
})();
TheClass = new MyClass(function() {
alert('Event!');
});
TheClass.say();
Alternatively you could create a function in your "class" to configure the callback/trigger instead of passing it into the constructor.
Have a look at this as a start for your further reading on this concept... How do JavaScript closures work?
Edit
To appease those critics looking for an eventQueue here is an updated jsfiddle :)
http://jsfiddle.net/Qxtnd/9/
var events = new function() {
var _triggers = {};
this.on = function(event,callback) {
if(!_triggers[event])
_triggers[event] = [];
_triggers[event].push( callback );
}
this.triggerHandler = function(event,params) {
if( _triggers[event] ) {
for( i in _triggers[event] )
_triggers[event][i](params);
}
}
};
var MyClass = (function(){
var MyClass = function () {
this.say = function() {
alert('Num ' + this.someProperty);
events.triggerHandler('eventCustom');
}
};
return MyClass;
})();
TheClass = new MyClass();
events.on('eventCustom', function() {
alert('Event!');
});
events.on('eventCustom', function() {
alert('Another Event!');
});
TheClass.say();
When users click "search" input element, the search text inside the input will disappear and since I have several controls like that, I thought I could make the code reusable. Here is my code formerly done and working with jQuery but now in YUI I cannot make it work.
var subscriptionBoxTarget = "div.main div.main-content div.side-right div.subscription-box input";
var ssbNode = YAHOO.util.Selector.query(subscriptionBoxTarget);
var ssbValue = YAHOO.util.DOM.getAttribute(ssbNode,"value");
var subscriptionBox = new RemovableText(ssbNode,ssbValue,null);
subscriptionBox.bind();
////////////////////////////////
//target : the target of the element which dispatches the event
// defaultText : the default for input[type=text] elements
// callBack : is a function which is run after everthing is completed
function RemovableText(target,defaultText,callBack)
{
var target = target; //private members
var defaultText = defaultText;
var callBack = callBack;
//instance method
this.bind = function()
{
mouseClick(target,defaultText);
mouseOff(target,defaultText);
if(callBack != null)
callBack();
}
//private methods
var mouseClick = function(eventTarget,defaultValue)
{
var _eventTarget = eventTarget;
var _defaultValue = defaultValue;
/*$(eventTarget).bind("click",function(){
var currentValue = $(this).val();
if(currentValue == defaultValue)
$(this).val("");
});*/
YAHOO.util.Event.addListener(_eventTarget,"click",function(e){
alert(e);
});
}
var mouseOff = function(eventTarget,defaultValue)
{
var _eventTarget = eventTarget;
var _defaultValue = defaultValue;
/*$(eventTarget).bind("blur",function(){
var currentValue = $(this).val();
if(currentValue == "")
$(this).val(_defaultValue);
});*/
YAHOO.util.Event.addListener(_eventTarget,"blur",function(e){
alert(e);
});
}
}
You have a lot of unnecessary code here.
The input parameters passed to the RemovableText constructor are available by closure to all the methods defined inside. You don't need to, and shouldn't redefine named params as vars.
function RemovableText(target, defaultText, callback) {
this.bind = function () {
YAHOO.util.Event.on(target, 'click', function (e) {
/* You can reference target, defaultText, and callback in here as well */
});
YAHOO.util.Event.on(target, 'blur', function (e) { /* and here */ });
if (callback) {
callback();
}
};
}
The definition of an instance method from within the constructor seems dubious, as is the requirement that the values passed to the constructor must be kept private. Just assign them to instance properties (this._target = target; etc) and add instance methods to the prototype. If the functionality you're after is just this simple, then why bother with methods at all?
Using the click event does not support keyboard navigation. You should use the focus event.
I'm not sure why you would have a callback passed at construction that fires immediately after attaching the event subscribers.
I have built a js class that is have the control (html Control ) parameter, I tried to add dynamically an onchange event to the control but I have the following error:
htmlfile: Not implemented
//-------------- the code
Contrl.prototype.AddChangeEvent = function() {
var element = this.docID;
var fn = function onChange(element) {
// action
};
if (this.tag == "input" && (this.el.type == "radio")) {
this.el.onclick = fn(element); // there i have the error
}
else {
this.el.onchange = fn(element); // there i have the error
}
}
By writing this.el.onclick = fn(element), you're calling fn immediately, and assigning whatever fn returns to onclick.
You need to make an anonymous function that calls fn with the arguments you want it to get, like this:
this.el.onclick = function() { return fn(element); };
However, this is not the correct way to assign event handlers in Javascript.
You should call attachEvent (for IE) or addEventListener (for everything else), like this:
function bind(elem, eventName, handler) {
if (elem.addEventListener)
elem.addEventListener(eventName, handler, false);
else if (elem.attachEvent)
elem.attachEvent("on" + eventName, handler);
else
throw Error("Bad browser");
}