</body>
```
## Setup
Run the following example in CodePen:
```
```
Each exercise builds on the previous exercise. There is a completed solution at the end of this page.
## Exercise: `collection.is(selector) -> boolean`
### The problem
[collection.is](https://api.jquery.com/is/) checks the current matched set of elements against a selector.
```
import "https://unpkg.com/jquery@3/dist/jquery.js";
var elements = $([
document.createElement("div"),
document.createElement("span"),
]);
console.log(elements.is("div")); //-> true
```
Click to see test code
```
QUnit.test("$.fn.is", function () {
expect(3);
var elements = $([
document.createElement("div"),
document.createElement("span"),
]);
ok(elements.is("div"), "is div");
ok(elements.is("span"), "is span");
ok(!elements.is("a"), "is a");
});
```
### What you need to know
- [matches](https://developer.mozilla.org/en-US/docs/Web/API/Element/matches) returns if an element matches a selector:
```
Hello World
```
### The solution
Click to see the solution
```
is: function(selector){
var matched = false;
$.each(this, function(i, element){
if( this.matches( selector) ) {
matched = true;
}
});
return matched;
},
```
## Exercise: `collection.data(key [, value])`
### The problem
[collection.data](https://api.jquery.com/data/) stores arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
```
Hello World
```
Click to see test code
```
QUnit.test("$.fn.data", function () {
$("#qunit-fixture").html('
text
');
$("#el").data("foo", "bar");
equal($("#el").data("foo"), "bar", "got back bar");
});
```
### What you need to know
- Use [WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap) to store data associated with an object in such a way that when the object is removed the data will be also be removed from the `WeakMap` and available for garbage collection.
```
var map = new WeakMap();
(function () {
var key = { name: "key" };
var value = { name: "value" };
map.set(key, value);
})();
setTimeout(function () {
console.log(map);
// In chrome, you can see the contents of the weakmap
// and it will not have the key and value.
}, 500);
```
### The solution
Click to see the solution
```
data: (function(){
var data = new WeakMap();
return function(propName, value) {
if (arguments.length == 2) {
// set the data for every item in the collection
return $.each(this, function(i, el) {
var elData = data.get(el);
if (!elData) {
elData = {};
data.set(el, elData);
}
elData[propName] = value;
});
} else {
// return the data in the first value
var el = this[0], elData = data.get(el);
return elData && elData[propName];
}
};
})(),
```
## Exercise: `collection.on(eventType, selector, handler)`
### The problem
[collection.on](https://api.jquery.com/on/) attaches a delegate event listener.
```
First
Second
```
Click to see test code
```
QUnit.test("$.fn.on", function () {
expect(3);
var handler = function () {
equal(this.nodeName.toLowerCase(), "li", "called back with an LI");
};
var $ul = $("#qunit-fixture")
.html(
`
');
clickIt($("#three")[0]);
});
```
### What you need to know
- Instead of binding the `handler`, you’ll need to bind a `delegator` that will conditionally call the `handler`.
- Use `.data` to store the `delegator` and `handler` in an object like `{delegator, handler}`. That object should be stored in a data structure that looks like:
```
$([element]).data("events"); //-> {
// click: { li: [ {delegator, handler} ] }
// }
```
### The solution
Click to see the solution
```
on: function(eventType, selector, handler) {
// Create delegator function
var delegator = function(ev) {
var cur = ev.target;
do {
if ( $([ cur ]).is(selector) ) {
handler.call(cur, ev);
}
cur = cur.parentNode;
} while (cur && cur !== ev.currentTarget);
};
return $.each(this, function(i, element) {
// store delegators by event and selector in
// $.data
var events = $([ element ]).data("events"), eventTypeEvents;
if (!events) {
$([ element ]).data("events", events = {});
}
if (!(eventTypeEvents = events[eventType])) {
eventTypeEvents = events[eventType] = {};
}
if (!eventTypeEvents[selector]) {
eventTypeEvents[selector] = [];
}
eventTypeEvents[selector].push({
handler: handler,
delegator: delegator
});
element.addEventListener(eventType, delegator, false);
});
},
```
## Exercise: `collection.off(eventType, selector, handler)`
### The problem
[collection.off](https://api.jquery.com/off/) stops listening for a delegate listener.
Click to see test code
```
QUnit.test("$.fn.off", function () {
expect(0);
var handler = function () {
equal(this.nodeName.toLowerCase(), "li", "called back with an LI");
};
var $ul = $("#qunit-fixture")
.html(
`
`
)
.children();
$ul.on("click", "li", handler);
$ul.off("click", "li", handler);
clickIt($("#three")[0]);
});
```
### What you need to know
- You will need to find the delegate for the handler passed to `.off()` and then call `.removeEventListener`.
### The solution
Click to see the solution
```
off: function(eventType, selector, handler) {
return $.each(this, function(i, element) {
// Find the delegator object for the handler
// and remove it.
var events = $([ element ]).data("events");
if (events[eventType] && events[eventType][selector]) {
var delegates = events[eventType][selector], i = 0;
while (i < delegates.length) {
if (delegates[i].handler === handler) {
element.removeEventListener(eventType, delegates[i].delegator, false);
delegates.splice(i, 1);
} else {
i++;
}
}
}
});
}
```
## Completed solution
Click to see completed solution
```
```
###### On this page...
###### Get help
If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4)
If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion)
## Join the Bitovi Newsletter
Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason!
*By providing your email you agree to receive communications from Bitovi*
```json
{
"@context" : "http://schema.org",
"@type" : "Organization",
"address" : {
"@type" : "PostalAddress",
"addressCountry" : "United States",
"addressLocality" : "Libertyville",
"addressRegion" : "IL",
"postalCode" : "60048",
"streetAddress" : "1134 Pine Tree Lane "
},
"alternateName" : "Bitovi",
"areaServed" : {
"@type" : "GeoCircle",
"geoMidpoint" : {
"@type" : "GeoCoordinates",
"latitude" : "41.8781",
"longitude" : "87.6298"
},
"geoRadius" : "5000 km"
},
"description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company",
"email" : "contact@bitovi.com",
"image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png",
"logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg",
"mainEntityOfPage" : {
"@id" : "https://www.bitovi.com/academy/learn-dom-jquery/events-part-2.html",
"@type" : "WebPage",
"description" : "Learn about event propagation and event delegation. "
},
"naics" : "541511",
"name" : "Bitovi Web App Consulting",
"sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ],
"telephone" : "312-620-0386",
"url" : "http://bitovi.com"
}
```