Create your own Event Tracker system
//
// 1. create an `EventTracker` object
// • it should accept a name when constructed
// 2. extend the `EventTracker` prototype with:
// • an `on` method
// • a `notify` method
// • a `trigger` method
//
var EventTracker = function (name) {
this.name = name;
this._events = [];
this._notify = []
};
//事件,返回方法
EventTracker.prototype.on = function (event, callback) {
if (this._events[event] == undefined) {
this._events[event] = [];
}
this._events[event].push(callback);
};
//参数:EventTracker对象,事件
EventTracker.prototype.notify = function (otherObj, event) {
if (this._notify[event] == undefined) {
this._notify[event] = [];
}
this._notify[event].push(otherObj);
};
//参数:事件,方法返回的信息
EventTracker.prototype.trigger = function (event, data) {
var listCallBacks = this._events[event] || 0;
var listNotifys = this._notify[event] || 0;
var i;
for (i = 0; i < listCallBacks.length; i++) {
listCallBacks[i].call(this, data);
console.log("call back "+ this.name);
console.log("call back[] "+ listCallBacks[i]);
}
for (i = 0; i < listNotifys.length; i++) {
listNotifys[i].trigger(event, data);
console.log("call back2 "+ event);
console.log("call back[]2 "+ listNotifys[i].name);
console.log("call back2 "+ data);
}
};
// EXAMPLE:
//创建两个事件
var nephewParties = new EventTracker('nephews');
var richard = new EventTracker('Richard');
//事件触发后调用的方法
function purchase(item) {
console.log('purchasing ' + item);
}
function celebrate() {
console.log(this.name + ' says birthday parties are awesome!');
}
//事件mainEvent注册调用方法
nephewParties.on('mainEvent', purchase);
richard.on('mainEvent', celebrate);
//事件对象添加事件
nephewParties.notify(richard, 'mainEvent');
//触发事件,执行每个注册对象的方法并返回信息
nephewParties.trigger('mainEvent', 'ice cream');
Template system
// EXAMPLE:
// in the example below `*(` is my default opening delimiter and `)*` is the default closing delimiter
// var string = "Hi, my name is Richard. And I *( emotion )* this *( thing )*!";
// var logResult = template( string );
// logResult( 'love', 'ice cream', 2 ); // logs the message "Hi, my name is Richard. And I love this ice cream!", twice
//
//
// var string = "Is <<! thing !>> healthy to <<! action !>>?";
// var logResult = template( string, {open: '<<!', close: '!>>'} );
// logResult( 'ice cream', 'consume', 7 ); // logs the message "Is ice cream healthy to consume?", seven times
var template = function(str, delims) {
// Fill this in
var dftdelims = {
open : '*(',
close : ')*',
};
var warpInQuotes = function (text) {
return "'" + text + "'";
}
for (var key in delims) {
if (delims.hasOwnProperty(key)) {
if (delims[key] != undefined)
dftdelims[key] = delims[key];
}
}
var templateString = [];
var i = 1;
var closingDelimLoc = 0;
var funcArgs = [];
var theVar, remaining;
var segments = str.split(dftdelims.open);
var indexSegments = segments.length;
templateString.push(warpInQuotes(segments[0]));
while (i < indexSegments) {
closingDelimLoc = segments[i].indexOf(dftdelims.close);
theVar = segments[i].slice(0, closingDelimLoc);
funcArgs.push(theVar);
templateString.push(theVar);
remaining = segments[i].slice(closingDelimLoc + dftdelims.close.length);
templateString.push(warpInQuotes(remaining));
i++;
}
templateString = 'while(times--){ console.log(' + templateString.join('+') + ')}';
return new Function( funcArgs.join(','), 'times', templateString);
/*ƒ anonymous( emotion , thing ,times
) {
while(times--){ console.log('Hi, my name is Richard. And I '+ emotion +' this '+ thing +'!')}
}
*/
}
//addEventListener 方法是 DOM API 的极为重要的组成部分。该方法使你能够监听浏览器的事件系统
document.addEventListener( 'keydown', function ( eventObject ) {
if (eventObject.keyCode == 27) {
alert('esc has been input');
}
});
Example Markup
Checkbox <input type="checkbox" id="checkbox"/><label for="checkbox">Checkbox</label>
<input type="button" onclick="simulateClick();" value="Simulate click"/>
<input type="button" onclick="addHandler();" value="Add a click handler that calls preventDefault"/>
<input type="button" onclick="removeHandler();" value="Remove the click handler that calls preventDefault"/>
Scripts used
function preventDef(event) {
event.preventDefault();
}
function addHandler() {
document.getElementById("checkbox").addEventListener("click",
preventDef, false);
}
function removeHandler() {
document.getElementById("checkbox").removeEventListener("click",
preventDef, false);
}
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("checkbox");
var canceled = !cb.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
alert("canceled");
} else {
// None of the handlers called preventDefault
alert("not canceled");
}
}
根据学习视频写的js code, 帮助熟悉JavaScript。
UdaCity, 需要先在优达网站申请一个帐号