jQuery implements simple on() and trigger() methods

#jQuery events

- 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:
(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;
}());
myJquery.js
Call the on() and trigger() functions:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
    <script src="./myJquery.js"></script>
    <script>
        $('.demo').on('click', function (a, b, c) {
            console.log("click1" + a + b + c);
        });
        $('.demo').on('click', function (a) {
            console.log("click2" + a);
        });
        $('.demo').trigger('click', 1, 2, 3);
    </script>
</body>

</html>
index.html

Effect display:

 

 

Tags: Javascript JQuery Attribute

Posted on Mon, 11 May 2020 11:28:00 -0400 by xplore