Update: It might be the jQuery's trigger() do some extra works in testings, I opened a issue on github.
=====
I'm following learnQuery to build my simple jQuery. Now working on DOM event , implement on() and off() function. They provided some testings, I can't pass some of them.
Here is my code: (And you can clone this branch ,run 06.event_listeners/runner.html to run the testing)
"use strict";
function isEmpty(str) {
return (!str || 0 === str.length);
}
// listener use to bind to DOM element, call corresponding functions when event firing.
function geneEventListener(event) {
console.log('gene');
let type = Object.keys(this.handlers).find(type=>type===event.type);
if (!type) return;
let functions = this.handlers[type];
functions.forEach(f=>f.apply(this,event));
}
// cache elements which bound event listener
let Cache = function () {
this.elements = [];
this.uid = 1;
};
Cache.prototype = {
constructor:Cache,
init:function (element) {
if(!element.uid) element.uid = this.uid++;
if(!element.handlers) element.handlers = {};
if(!element.lqListener) element.lqListener = geneEventListener.bind(element);
this.elements.push(element);
},
removeElement:function (uid) {
this.elements.splice(this.elements.findIndex(e=>e.uid===uid),1);
},
removeType:function (uid,type) {
if(this.get(uid)) delete this.get(uid).handlers[type];
},
removeCallback:function (uid, type, callback) {
if(this.get(uid) && this.get(uid).handlers[type]) {
let functions = this.get(uid).handlers[type];
functions.splice(functions.findIndex(callback),1)
}
},
// return element or undefined
get:function (uid) {
return this.elements.find(e=>e.uid===uid);
},
};
/*
* One type could have many event listeners, One element could have many event types of listeners
* So use element.handlers = {'click':[listener1, listener2, ...], 'hover':[...], ...}
* */
let eventListener = (function() {
let cache = new Cache();
function add (element, type, callback){
cache.init(element);
element.addEventListener(type,element.lqListener);
if(!element.handlers[type]){
element.handlers[type] = [];
}
(element.handlers[type]).push(callback);
}
// remove a type of event listeners, should remove the callback array and remove DOM's event listener
function removeType (element, type) {
element.removeEventListener(type,element.lqListener);
cache.removeType(element.uid,type);
}
// remove a event listener, just remove it from the callback array
function removeCallback(element, type, callback) {
cache.removeCallback(element.uid,type,callback);
}
// bind a callback.
function on(element,type,callback) {
if(!(element||type||callback)) throw new Error('Invalid arguments');
add(element,type,callback);
}
function off(element,type,callback) {
if(!(element instanceof HTMLElement)) throw new Error('Invaild element, need a instance of HMTLElement');
let handlers = cache.get(element.uid).handlers;
if(isEmpty(type)&&!callback){
for(let type in handlers){
removeType(element,type);
}
}
console.log('off')
if(!isEmpty(type)&&!callback) removeType(element,type);
if(!isEmpty(type) && (typeof callback === 'function')) removeCallback(element,type,callback);
}
return {
on,
off
}
})();
I use chrome debugger to follow element.handlers's value, it seems fine, working great when add and remove callback.
And the testing have some console.log() in event's callback function, oddly enough, these console.log() do not log in console, and I try to set a breakpoint in callback, it also do not work.
I have little javascript experience, If anyone can tell me how to debug and where is the bug, thank you very much! And why console.log() cannot work in callback. It should work, since they wrote it in testing, I think.
Here is the testing code:
/*global affix*/
/*global eventListener*/
describe('EventListeners', function() {
'use strict';
var $selectedElement, selectedElement, methods;
beforeEach(function() {
affix('.learn-query-testing #toddler .hidden.toy+h1[class="title"]+span[class="subtitle"]+span[class="subtitle"]+input[name="toyName"][value="cuddle bunny"]+input[class="creature"][value="unicorn"]+.hidden+.infinum[value="awesome cool"]');
methods = {
showLove: function(e) {
console.log('<3 JavaScript <3');
},
giveLove: function(e) {
console.log('==> JavaScript ==>');
return '==> JavaScript ==>';
}
};
spyOn(methods, 'showLove');
spyOn(methods, 'giveLove');
$selectedElement = $('#toddler');
selectedElement = $selectedElement[0];
});
it('should be able to add a click event to an HTML element', function() {
eventListener.on(selectedElement, 'click', methods.showLove);
$selectedElement.click();
expect(methods.showLove).toHaveBeenCalled();
});
it('should be able to add the same event+callback two times to an HTML element', function() {
eventListener.on(selectedElement, 'click', methods.showLove);
eventListener.on(selectedElement, 'click', methods.showLove);
$selectedElement.click();
expect(methods.showLove.calls.count()).toEqual(2);
});
it('should be able to add the same callback for two different events to an HTML element', function() {
eventListener.on(selectedElement, 'click', methods.showLove);
eventListener.on(selectedElement, 'hover', methods.showLove);
console.log('3')
$selectedElement.trigger('click');
$selectedElement.trigger('hover');
expect(methods.showLove.calls.count()).toEqual(2);
});
it('should be able to add two different callbacks for same event to an HTML element', function() {
eventListener.on(selectedElement, 'click', methods.showLove);
eventListener.on(selectedElement, 'click', methods.giveLove);
$selectedElement.trigger('click');
expect(methods.showLove.calls.count()).toEqual(1);
expect(methods.giveLove.calls.count()).toEqual(1);
});
it('should be able to remove one event handler of an HTML element', function() {
$selectedElement.off();
eventListener.on(selectedElement, 'click', methods.showLove);
eventListener.on(selectedElement, 'click', methods.giveLove);
eventListener.off(selectedElement, 'click', methods.showLove);
console.log('5')
$selectedElement.click();
expect(methods.showLove.calls.count()).toEqual(0);
expect(methods.giveLove.calls.count()).toEqual(1);
});
it('should be able to remove all click events of a HTML element', function() {
$selectedElement.off();
eventListener.on(selectedElement, 'click', methods.showLove);
eventListener.on(selectedElement, 'click', methods.giveLove);
eventListener.on(selectedElement, 'hover', methods.showLove);
eventListener.off(selectedElement, 'click');
console.log('6')
$selectedElement.trigger('hover');
$selectedElement.trigger('click');
expect(methods.showLove.calls.count()).toEqual(1);
expect(methods.giveLove).not.toHaveBeenCalled();
});
it('should be able to remove all events of a HTML element', function() {
$selectedElement.off();
eventListener.on(selectedElement, 'click', methods.showLove);
eventListener.on(selectedElement, 'click', methods.giveLove);
eventListener.on(selectedElement, 'hover', methods.showLove);
eventListener.off(selectedElement);
var eventHover = new Event('hover');
var eventClick = new Event('click');
selectedElement.dispatchEvent(eventClick);
selectedElement.dispatchEvent(eventHover);
expect(methods.showLove).not.toHaveBeenCalled();
expect(methods.giveLove).not.toHaveBeenCalled();
});
it('should trigger a click event on a HTML element', function() {
$selectedElement.off();
$selectedElement.on('click', methods.showLove);
eventListener.trigger(selectedElement, 'click');
expect(methods.showLove.calls.count()).toBe(1);
});
it('should delegate an event to elements with a given css class name', function() {
eventListener.delegate(selectedElement, 'title', 'click', methods.showLove);
$('.title').trigger('click');
expect(methods.showLove.calls.count()).toEqual(1);
});
it('should not delegate an event to elements without a given css class name', function() {
eventListener.delegate(selectedElement, 'title', 'click', methods.showLove);
$('.subtitle').trigger('click');
$('.title').trigger('click');
expect(methods.showLove.calls.count()).toEqual(1);
});
it('should delegate an event to elements that are added to the DOM to after delegate call', function() {
eventListener.delegate(selectedElement, 'new-element-class', 'click', methods.showLove);
var newElement = document.createElement('div');
newElement.className = 'new-element-class';
$selectedElement.append(newElement);
$(newElement).trigger('click');
expect(methods.showLove.calls.count()).toEqual(1);
});
it('should trigger delegated event handler when clicked on an element inside a targeted element', function() {
eventListener.delegate(selectedElement, 'title', 'click', methods.showLove);
var newElement = document.createElement('div');
newElement.className = 'new-element-class';
$selectedElement.append(newElement);
$('.title').append(newElement);
$(newElement).trigger('click');
expect(methods.showLove.calls.count()).toEqual(1);
});
it('should not trigger delegated event handler if clicked on container of delegator', function() {
var $targetElement = $('<p class="target"></p>');
$selectedElement.append($targetElement);
eventListener.delegate(selectedElement, 'target', 'click', methods.showLove);
$selectedElement.click();
expect(methods.showLove.calls.count()).toEqual(0);
});
it('should trigger delegated event handler multiple times if event happens on multiple elements', function() {
eventListener.delegate(selectedElement, 'subtitle', 'click', methods.showLove);
$('.subtitle').trigger('click');
expect(methods.showLove.calls.count()).toEqual(2);
});
it('should not trigger method registered on element A when event id triggered on element B', function() {
var elementA = document.createElement('div');
var elementB = document.createElement('div');
$selectedElement.append(elementA);
$selectedElement.append(elementB);
eventListener.on(elementA, 'click', methods.showLove);
eventListener.on(elementB, 'click', methods.giveLove);
$(elementA).trigger('click');
expect(methods.showLove).toHaveBeenCalled();
expect(methods.giveLove).not.toHaveBeenCalled();
});
});
The problem lies in that there is no event called hover.
Just a combination of mouseenter and mouseleave.
You can see all event types listed here.
When calling element.addEventListener(type, element.lqListener)
with type value hover, it just does not work.
You can see more info from this question Is it possible to use jQuery .on and hover?.
You are very close to meeting your own requirement. The only issue that could locate at code, here, is that Function.prototype.apply() expects an Array at second parameter
Syntax
func.apply(thisArg, [argsArray])
Substitute
// pass `event` as element to array literal as second parameter to `.apply()`
functions.forEach(f => f.apply(this, [event]));
for
functions.forEach(f => f.apply(this, event));
Also, substituted function name _Cache for Cache, as Cache is a globally defined function
The Cache interface provides a storage mechanism for Request /
Response object pairs that are cached, for example as part of the
ServiceWorker life cycle.
"use strict";
function isEmpty(str) {
return (!str || 0 === str.length);
}
// listener use to bind to DOM element, call corresponding functions when event firing.
function geneEventListener(event) {
console.log('gene');
let type = Object.keys(this.handlers).find(type => type === event.type);
if (!type) return;
let functions = this.handlers[type];
functions.forEach(f => f.apply(this, [event]));
}
// cache elements which bound event listener
let _Cache = function() {
this.elements = [];
this.uid = 1;
};
_Cache.prototype = {
constructor: _Cache,
init: function(element) {
if (!element.uid) element.uid = this.uid++;
if (!element.handlers) element.handlers = {};
if (!element.lqListener) element.lqListener = geneEventListener.bind(element);
this.elements.push(element);
},
removeElement: function(uid) {
this.elements.splice(this.elements.findIndex(e => e.uid === uid), 1);
},
removeType: function(uid, type) {
if (this.get(uid)) delete this.get(uid).handlers[type];
},
removeCallback: function(uid, type, callback) {
if (this.get(uid) && this.get(uid).handlers[type]) {
let functions = this.get(uid).handlers[type];
functions.splice(functions.findIndex(callback), 1)
}
},
// return element or undefined
get: function(uid) {
return this.elements.find(e => e.uid === uid);
},
};
/*
* One type could have many event listeners, One element could have many event types of listeners
* So use element.handlers = {'click':[listener1, listener2, ...], 'hover':[...], ...}
* */
let eventListener = (function() {
let cache = new _Cache();
function add(element, type, callback) {
cache.init(element);
element.addEventListener(type, element.lqListener);
if (!element.handlers[type]) {
element.handlers[type] = [];
}
(element.handlers[type]).push(callback);
}
// remove a type of event listeners, should remove the callback array and remove DOM's event listener
function removeType(element, type) {
element.removeEventListener(type, element.lqListener);
cache.removeType(element.uid, type);
}
// remove a event listener, just remove it from the callback array
function removeCallback(element, type, callback) {
cache.removeCallback(element.uid, type, callback);
}
// bind a callback.
function on(element, type, callback) {
if (!(element || type || callback)) throw new Error('Invalid arguments');
add(element, type, callback);
}
function off(element, type, callback) {
if (!(element instanceof HTMLElement)) throw new Error('Invaild element, need a instance of HMTLElement');
let handlers = cache.get(element.uid).handlers;
if (isEmpty(type) && !callback) {
for (let type in handlers) {
removeType(element, type);
}
}
console.log('off')
if (!isEmpty(type) && !callback) removeType(element, type);
if (!isEmpty(type) && (typeof callback === 'function')) removeCallback(element, type, callback);
}
return {
on,
off
}
})();
onload = () => {
eventListener.on(document.querySelector("div"), "click", function(event) {
console.log(event.type);
eventListener.off(event.target, "click");
});
}
<div>click</div>
I'm the question owner.
After I created a issue, they fixed the bug in testing. In testing, we can't use our selfmade on() and off() to add event listeners, then use jQuery's trigger() to test it, since jQuery will do some extra works behind. So they replaced it by dispatchEvent().
Also, in my code there are some bugs. As #guest271314 mentioned, I misused apply(), should use call(), and should use _Cache to replace Cache. Besides,
in function removeCallback, I misused functions.findIndex(callback), it should be functions.findIndex(f=>f===callback)
The correct code is on this branch, passed all on and off testing.
Thanks all of you！
Say I have an existing button and attach a click to it via jQuery:
var $button = $('#test').click(function () { console.log('original function') });
Now, say I want to override that click so that I can add some logic to the function before and after it. I have tried binding and wrapping using the functions below.
Function.prototype.bind = function () {
var fn = this;
var args = Array.prototype.slice.call(arguments);
var object = args.shift();
return function () {
return fn.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}
function wrap(object, method, wrapper) {
var fn = object[method];
return object[method] = function() {
return wrapper.apply(this, [fn.bind(this)].concat(
Array.prototype.slice.call(arguments)));
}
}
so I call wrap with the object that the method is a property of, the method and an anonymous function that I want to execute instead. I thought:
wrap($button 'click', function (click) {
console.log('do stuff before original function');
click();
console.log('do stuff after original function');
});
This only calls the original function. I have used this approach on a method of an object before with success. Something like: See this Plunker
Can anyone help me do this with my specific example please?
Thanks
You could create a jQuery function that gets the original event handler function from data, removes the click event, then adds a new event handler. This function would have two parameters (each functions) of before and after handlers.
$(function() {
jQuery.fn.wrapClick = function(before, after) {
// Get and store the original click handler.
// TODO: add a conditional to check if click event exists.
var _orgClick = $._data(this[0], 'events').click[0].handler,
_self = this;
// Remove click event from object.
_self.off('click');
// Add new click event with before and after functions.
return _self.click(function() {
before.call(_self);
_orgClick.call(_self);
after.call(_self);
});
};
var $btn = $('.btn').click(function() {
console.log('original click');
});
$btn.wrapClick(function() {
console.log('before click');
}, function() {
console.log('after click');
});
});
Here is a Codepen
After a long search I reached the same answer as #Corey, here is a similar way of doing it considering multiple events:
function wrap(object, method, wrapper) {
var arr = []
var events = $._data(object[0], 'events')
if(events[method] && events[method].length > 0){ // add all functions to array
events[method].forEach(function(obj){
arr.push(obj.handler)
})
}
if(arr.length){
function processAll(){ // process all original functions in the right order
arr.forEach(function(func){
func.call(object)
})
}
object.off(method).on(method, function(e){wrapper.call(object,processAll)}) //unregister previous events and call new method passing old methods
}
}
$(function(){
$('#test').click(function () { console.log('original function 1') });
var $button = $('#test').click(function () { console.log('original function 2') });
wrap($button, 'click', function (click,e) {
console.log('do stuff before original functions');
click()
console.log('do stuff after original functions');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='test'>click me</div>
This is page's code.
I can't modify this.
var Example = {};
Example.create = function() {
var obj = new Example.object();
return obj;
}
Example.object = function(){
this.initialize = initialize;
function initialize() {
window.addEventListener('load', activate);
}
function activate() {
document.addEventListener('keypress', keyPressed);
}
function keyPressed(e) {
alert("Hello!");
}
};
Example.defaultObject = Example.create();
Example.defaultObject.initialize();
I have tried many things...
document.onkeypress = null;
document.keypress = null;
document.removeEventListener('keypress');
$(document).unbind('keypress');
$(document).off("keypress");
$("*").unbind('keypress');
$(document).bind('keypress', function(e) { e.stopPropagation(); });
but all failed.
How can I unbind event of document keypress?
You have to pass the listener to remove it: (a variable pointing the function aka the function name)
document.removeEventListener('keypress', keyPressed);
https://developer.mozilla.org/de/docs/Web/API/EventTarget/removeEventListener
You will have to save it somewhere to remove it later
Root cause of the issue is removeEventListener method. This method expect second parameter which is listener method
document.removeEventListener('keypress', Example.defaultObject.keyPressed);
Here you go for Solution on your problem.
var Example = {};
Example.create = function() {
var obj = new Example.object();
return obj;
}
Example.object = function(){
this.initialize = initialize;
function initialize() {
window.addEventListener('load', activate);
document.getElementById('disable').addEventListener('click', deActivate);
}
function activate() {
document.addEventListener('keypress', keyPressed);
}
function deActivate() {
document.removeEventListener('keypress', keyPressed);
document.querySelector('h1').innerHTML = 'Page Key Press Listener Removed';
}
function keyPressed(e) {
alert("Hello!");
}
};
Example.defaultObject = Example.create();
Example.defaultObject.initialize();
<body>
<h1>Page has Key Press Listener</h1>
<input id="disable" type="button" value="deactivate">
</body>
I have:
if (window.addEventListener) {
window.addEventListener('load',videoPlayer,false);
}
else if (window.attachEvent) {
window.attachEvent('onload',videoPlayer);
}
and then later I have:
if (window.addEventListener) {
window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) {
window.attachEvent('onload',somethingelse);
}
Is it preferred/functional to have them all together? Like
if (window.addEventListener) {
window.addEventListener('load',videoPlayer,false);
window.addEventListener('load',somethingelse,false);
} else if (window.attachEvent) {
window.attachEvent('onload',videoPlayer,false);
window.attachEvent('onload',somethingelse);
}
You can do how ever you want it to do. They don't have to be together, it depends on the context of the code. Of course, if you can put them together, then you should, as this probably makes the structure of your code more clear (in the sense of "now we are adding all the event handlers").
But sometimes you have to add event listeners dynamically. However, it is unnecessary to test multiple times whether you are dealing with IE or not.
Better would be to abstract from this and test only once which method is available when the page is loaded. Something like this:
var addEventListener = (function() {
if(document.addEventListener) {
return function(element, event, handler) {
element.addEventListener(event, handler, false);
};
}
else {
return function(element, event, handler) {
element.attachEvent('on' + event, handler);
};
}
}());
This will test once which method to use. Then you can attach events throughout your script with:
addEventListener(window, 'load',videoPlayer);
addEventListener(window, 'load',somethingelse);
I use this function:
function addEvent (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, function () {
return fn.call(obj, window.event);
});
}
}
/**
* multipleEventsListeners.js
* Add the capability to attach multiple events to an element, just like jQuery does
* https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b
*/
multipleEventsListeners(events, func, elem) {
elem = elem || document;
var event = events.split(' ');
for (var i = 0; i < event.length; i++) {
elem.addEventListener(event[i], func, false);
}
}
/*
Use:
var input = document.querySelector('input');
multipleEventsListeners(input, 'keyup change', function(e){
console.log = this.value;
});
*/
from: https://gist.github.com/juanbrujo/a1f77db1e6f7cb17b42b
by using a named function and passing that into your event listener, you can avoid having to write the same code over and over again.
// Setup our function to run on various events
var someFunction = function (event) {
// Do something...
};
// Add our event listeners
window.addEventListener('click', someFunction, false);
window.addEventListener('mouseover', someFunction, false);
addEventListener automatically passes the event object into your function as an