Tab bar (addeventlistener and onclick practice, used with bind method, exponential growth to listen for events)

It is ：

I'm learning bind When the method is used , Try to optimize the previous Tab Column case appears bug, As shown in the figure ： Click once "+" newly build Tab bar , For the first time, a new Tab bar , For the second time, two new Tab The column appears . third time 4 individual . And then there was 8,16,32 Strange operation of exponential growth .

Here are two key functions

    init(){
    
        //init The initialization operation causes the related elements to bind events 
        this.updateNode();
        this.add.addEventListener('click',this.addTab)
        for(let i=0;i<this.lis.length;i++){
    
            this.lis[i].index=i;
            this.lis[i].addEventListener('click',this.toggleTab.bind(this.lis[i],this))
            this.removes[i].addEventListener('click',this.removeTab)
            this.spans[i].addEventListener('dblclick',this.editTab)
            this.sections[i].addEventListener('dblclick',this.editTab)
            // console.log(2)
            }
        }

    // 2. Add functionality 
    addTab(){
    
        console.log(1)  // Verification triggers several add events 
        let str=`<li><span> test ${
      random}</span><span class="iconfont icon-guanbi"></span></li>` 
        let sect=`<section> test ${
      random}</section>` 
        random++ 
        that.ul.insertAdjacentHTML("beforeend",str)
        that.tabscon.insertAdjacentHTML("beforeend",sect)
        that.init()
        // console.log( 1)
    }

The number of clicks has not changed ,Tab Columns have increased exponentially

Core code problem ：

Previously, by defining global variables that Pass in cosntructor Medium this, No problem . Now through bind Change the corresponding function this It points to , Omit that.
First look at the following two methods

        this.add.addEventListener('click',this.addTab.bind(this.add, this))

            this.add.onclick = this.addTab.bind(this.add, this);

(1).onclick Will be registered at the same time onclick Covered , Execution after triggering is an overridden event .
(2).addEventListener Will not be covered
(3).bind A new function will be generated

function fn(a, b, c) {
    
  return a + b + c;
}
let _fn = fn.bind(null, 10);
let  ans = _fn(20, 30); // 60

fn The function takes three arguments ,_fn Function will 10 As the default first parameter , So you only need to pass in two parameters , If you accidentally pass in three parameters , don 't worry , Only the first two .

function fn(a, b, c) {
    
  return a + b + c;
}
let _fn = fn.bind(null, 10);
let ans = _fn(20, 30, 40); // 60

What's the use ？ If some functions , The first few parameters have “ Make up one's mind ” 了 , We can use bind Returns a new function . in other words ,bind() It can make a function have preset initial parameters . These parameters （ If any ） As bind() The second parameter of follows this Back , Then they will be inserted at the beginning of the parameter list of the objective function , The parameters passed to the binding function will follow them

function list() {
    
  return Array.prototype.slice.call(arguments);
}
let list1 = list(1, 2, 3); // [1, 2, 3]
// Create a function with a preset leading argument
let leadingThirtysevenList = list.bind(undefined, 37);
let list2 = leadingThirtysevenList(); // [37]
let list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

Analyze and solve ：

If only because addEventListener Will not cover , So there will be a right “+” There are multiple listening events . Then why use global variables that collocation addEventListener There are no mistakes ？
Change the collocation method below , Add two listening functions , Test click once “+”,Tab Column addition
Collocation ：addEventListener and that （ Results added normally 1 Columns , Description repeated listening is invalid ）

    init(){
    
        //init The initialization operation causes the related elements to bind events 
        this.updateNode();
        this.add.addEventListener('click',this.addTab)
        this.add.addEventListener('click',this.addTab)  // Add two listening functions , It has no effect on 
        for(let i=0;i<this.lis.length;i++){
    
            this.lis[i].index=i;
            this.lis[i].addEventListener('click',this.toggleTab.bind(this.lis[i],this))
            this.removes[i].addEventListener('click',this.removeTab)
            this.spans[i].addEventListener('dblclick',this.editTab)
            this.sections[i].addEventListener('dblclick',this.editTab)
            // console.log(2)
            }
        }

Collocation ：addEventListener and bind（2,6,18,54 With 3 The exponential growth of ） I fuck , People are stupid

    init(){
    
        //init The initialization operation causes the related elements to bind events 
        this.updateNode();
        // Add two listening functions , It has no effect on 
        this.add.addEventListener('click',this.addTab.bind(this.add, this))
        this.add.addEventListener('click',this.addTab.bind(this.add, this)) 
        for(let i=0;i<this.lis.length;i++){
    
            this.lis[i].index=i;
            this.lis[i].addEventListener('click',this.toggleTab.bind(this.lis[i],this))
            this.removes[i].addEventListener('click',this.removeTab)
            this.spans[i].addEventListener('dblclick',this.editTab)
            this.sections[i].addEventListener('dblclick',this.editTab)
            // console.log(2)
            }
        }

Collocation ：onclick and bind

            this.add.onclick = this.addTab.bind(this.add, this);
            this.add.onclick = this.addTab.bind(this.add, this);

Collocation ：onclick and that

            this.add.onclick = this.addTab;
			this.add.onclick = this.addTab;

Add a column normally for both
The current solution is to change to the following code

  this.add.onclick = this.addTab.bind(this.add, this);

I think it's because there are two kinds of monitoring operations , about bind for ,bind Each execution results in a new function , What changes is the new function this Point to .onclick Is a function assignment , Even if the function changes , Always assign to onclick, and addEventListener Not assignment , Every time bind After that, different listening event functions are generated .