- 1.on() ```js //1. Event type 2.selector 3.data 4.handle $('ul').on('click', 'li', function(e){ alert($(e.target).text()); }); / / click the li element under ul to trigger the handle event
$('.demo').on({ click:function(){ console.log("click"); }, mouseenter:function(){ console.log("mouseenter"); }, mouseleave:function(){ console.log("mouseleave"); } }); / / bind multiple events for the. demo element ```
-2.one() event is triggered only once ```js //1. Event type 2.selector 3.data 4.handle $('ul').one('click', function(e){ alert($(e.target).text()); }); / / click the li element under ul to trigger the handle event ```
-3.off() unbind event ```js $('. demo').off('click ', clickTwo); / / unbind the click event clickTwo; //It is better to bind events in the front and unbound events in the back. The parameters are the same ```
-4.trigger() actively triggers events (system events and custom events) ```js $('.demo').on('click', function(e, a, b, c, d){ console.log('click', a, b, c, d); }); $('. demo').trigger('click ', [10, 20, 30, 40]); / / parameters can be passed when an event is triggered ```
- 5.hover() ```js $('demo').hover(function(){ console.log('hoverEnter'); },function(){ console.log('hoverLeave'); }); //Equivalent to binding mouseenter and mouseleave events at the same time $('.demo').on('mouseenter', function(){ console.log('enter'); }).on('mouseleave', function(){ console.log('leave'); }); ``` These are notes in markdown format Implement simple on() and trigger() functions:
myJquery.js(function () { //Create a jQuery Constructor function jQuery(selector) { return new jQuery.prototype.init(selector); } //by jQuery Prototype addition of init Property that can be used by all instances jQuery.prototype.init = function (selector) { this.length = 0; //by this add to length Property with a value of 0 //elect dom And packed into jQuery Object return //judge selector yes null and undefined and dom Objects and id and class Situation of if (selector == null) { //judge selector yes null or undefined return this; } else if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector yes class Situation of var dom = document.getElementsByClassName(selector.slice(1)); } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector yes id Situation of var dom = document.getElementById(selector.slice(1)); } if (selector instanceof Element || dom.length == undefined) { //(selector yes dom object) || (selector yes id，An object is returned. The object does not length attribute) this[0] = dom || selector; //(selector yes id) || (selector yes dom object) this.length++; } else { //selector yes class，Returns an array of classes for (var i = 0; i < dom.length; i++) { this[i] = dom[i]; this.length++; } } }; //by jQuery Prototype addition of css Property that can be used by all instances jQuery.prototype.css = function (config) { for (var i = 0; i < this.length; i++) { for (var prop in config) { this[i].style[prop] = config[prop]; } } return this; //The essence of chain call }; //by jQuery Object's prevObject Property assignment so that you can use the end()method jQuery.prototype.pushStack = function (dom) { //dom yes jQuery object if (dom.constructor != jQuery) { //dom It's native dom object dom = jQuery(dom); //Will be native dom Object wrapped into jQuery object } dom.prevObject = this; //take return dom; }; //by jQuery Prototype addition of get Property that can be used by all instances jQuery.prototype.get = function (num) { //num == null Return array //num >= 0 return this[num] //num < 0 return this[length + num] return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0)); }; //by jQuery Prototype addition of get Property that can be used by all instances jQuery.prototype.eq = function (num) { return this.pushStack(this.get(num)); //call jQuery.prototype.get()Function get to dom Object, repackaged as jQuery Object and is jQuery Object adding prevObject attribute }; //by jQuery Prototype addition of add Property that can be used by all instances jQuery.prototype.add = function (selector) { var curObj = jQuery(selector); //Currently passed add Added selector Selected jQuery object var prevObj = this; //call add()Of jQuery object var newObj = jQuery(); for (var i = 0; i < curObj.length; i++) { newObj[newObj.length++] = curObj[i]; } for (var i = 0; i < prevObj.length; i++) { newObj[newObj.length++] = prevObj[i]; } this.pushStack(newObj); //by jQuery Object adding prevObject attribute return newObj; //The jQuery Object return }; //by jQuery Prototype addition of end Property that can be used by all instances jQuery.prototype.end = function () { return this.prevObject; //Go directly back to the previous jQuery object }; //by jQuery Prototype addition of on Property that can be used by all instances jQuery.prototype.on = function (type, handle) { for (var i = 0; i < this.length; i++) { if (!this[i].cacheEvent) {//Judge every original dom Whether there are events in the object this[i].cacheEvent = {}; //For every native dom Object add binding event } if (!this[i].cacheEvent[type]) {//Determine whether each native object has type Binding event of type this[i].cacheEvent[type] = [handle];//If not, add the handler array for the event of this type } else { this[i].cacheEvent[type].push(handle);//If there is already an event of this type, it will be directly put into the array } } }; //by jQuery Prototype addition of trigger Property that can be used by all instances jQuery.prototype.trigger = function (type) { var self = this;//Will call trigger Functional jQuery Objects stored in self in var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];//Judgment call trigger()Function passed in except type Other parameters for (var i = 0; i < this.length; i++) {//Loop traversal this if (this[i].cacheEvent[type]) {//Judge each primitive dom Whether there is any in the object type Event of type this[i].cacheEvent[type].forEach(function (ele, index) {//When there are multiple events of the same type, all events should be executed in sequence ele.apply(self, params);//adopt self Call the event and pass the parameter }); } } }; //above jQuery Constructor is new One jQuery.prototype.init Object, //jQuery.prototype.init No on object jQuery.prototype On css()method //So add the following sentence to let jQuery.prototype.init Object can call jQuery.prototype On css()method jQuery.prototype.init.prototype = jQuery.prototype; //Let the outside pass through $()perhaps jQuery()call window.$ = window.jQuery = jQuery; }());
(function () { //Create a jQuery Constructor function jQuery(selector) { return new jQuery.prototype.init(selector); } //by jQuery Prototype addition of init Property that can be used by all instances jQuery.prototype.init = function (selector) { this.length = 0; //by this add to length Property with a value of 0 //elect dom And packed into jQuery Object return //judge selector yes null and undefined and dom Objects and id and class Situation of if (selector == null) { //judge selector yes null or undefined return this; } else if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector yes class Situation of var dom = document.getElementsByClassName(selector.slice(1)); } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector yes id Situation of var dom = document.getElementById(selector.slice(1)); } if (selector instanceof Element || dom.length == undefined) { //(selector yes dom object) || (selector yes id，An object is returned. The object does not length attribute) this[0] = dom || selector; //(selector yes id) || (selector yes dom object) this.length++; } else { //selector yes class，Returns an array of classes for (var i = 0; i < dom.length; i++) { this[i] = dom[i]; this.length++; } } }; //by jQuery Prototype addition of css Property that can be used by all instances jQuery.prototype.css = function (config) { for (var i = 0; i < this.length; i++) { for (var prop in config) { this[i].style[prop] = config[prop]; } } return this; //The essence of chain call }; //by jQuery Object's prevObject Property assignment so that you can use the end()method jQuery.prototype.pushStack = function (dom) { //dom yes jQuery object if (dom.constructor != jQuery) { //dom It's native dom object dom = jQuery(dom); //Will be native dom Object wrapped into jQuery object } dom.prevObject = this; //take return dom; }; //by jQuery Prototype addition of get Property that can be used by all instances jQuery.prototype.get = function (num) { //num == null Return array //num >= 0 return this[num] //num < 0 return this[length + num] return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0)); }; //by jQuery Prototype addition of get Property that can be used by all instances jQuery.prototype.eq = function (num) { return this.pushStack(this.get(num)); //call jQuery.prototype.get()Function get to dom Object, repackaged as jQuery Object and is jQuery Object adding prevObject attribute }; //by jQuery Prototype addition of add Property that can be used by all instances jQuery.prototype.add = function (selector) { var curObj = jQuery(selector); //Currently passed add Added selector Selected jQuery object var prevObj = this; //call add()Of jQuery object var newObj = jQuery(); for (var i = 0; i < curObj.length; i++) { newObj[newObj.length++] = curObj[i]; } for (var i = 0; i < prevObj.length; i++) { newObj[newObj.length++] = prevObj[i]; } this.pushStack(newObj); //by jQuery Object adding prevObject attribute return newObj; //The jQuery Object return }; //by jQuery Prototype addition of end Property that can be used by all instances jQuery.prototype.end = function () { return this.prevObject; //Go directly back to the previous jQuery object }; //by jQuery Prototype addition of on Property that can be used by all instances jQuery.prototype.on = function (type, handle) { for (var i = 0; i < this.length; i++) { if (!this[i].cacheEvent) {//Judge every original dom Whether there are events in the object this[i].cacheEvent = {}; //For every native dom Object add binding event } if (!this[i].cacheEvent[type]) {//Determine whether each native object has type Binding event of type this[i].cacheEvent[type] = [handle];//If not, add the handler array for the event of this type } else { this[i].cacheEvent[type].push(handle);//If there is already an event of this type, it will be directly put into the array } } }; //by jQuery Prototype addition of trigger Property that can be used by all instances jQuery.prototype.trigger = function (type) { var self = this;//Will call trigger Functional jQuery Objects stored in self in var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];//Judgment call trigger()Function passed in except type Other parameters for (var i = 0; i < this.length; i++) {//Loop traversal this if (this[i].cacheEvent[type]) {//Judge each primitive dom Whether there is any in the object type Event of type this[i].cacheEvent[type].forEach(function (ele, index) {//When there are multiple events of the same type, all events should be executed in sequence ele.apply(self, params);//adopt self Call the event and pass the parameter }); } } }; //above jQuery Constructor is new One jQuery.prototype.init Object, //jQuery.prototype.init No on object jQuery.prototype On css()method //So add the following sentence to let jQuery.prototype.init Object can call jQuery.prototype On css()method jQuery.prototype.init.prototype = jQuery.prototype; //Let the outside pass through $()perhaps jQuery()call window.$ = window.jQuery = jQuery; }());