为什么都是点击事件，原生的onclick和jquery的on、原生addEventListener效果会不一样

[DavidWongSssss]

先上波代码

<script type="text/javascript"> 
	var showNum = document.getElementById("num");
	var btn = document.getElementById("btn");
	function add(num){
		this.num = num;
		this.c();
	}
	add.prototype.c = function(){
		this.update();
//		this.upEvent();
	}
	add.prototype.update = function(){
		this.plus();
		this.upEvent();
	}
	add.prototype.plus = function(){
		showNum.innerHTML = ++this.num;
	}
	add.prototype.upEvent = function(){
		var that = this;
//		$("#btn").on("click",function(){
//			that.update();
//		})
//		btn.addEventListener("click",function(){
//			that.update();
//		})
		btn.onclick = function(){
			that.update();
		}
	}
	var nadd = new add(0);
</script>

前两个的输出都是会递增上去的
第三个输出正常
为什么前两个是无法达到点击+1的效果呢？
请求各位大神给本小noob科普一下jquery的on跟addaddEventListener跟原生的onclick事件有什么不同吗

[天际的海浪]

你在事件中调用update() ，在update()又再次调用upEvent()重复绑定事件。 jquery的on与addEventListener是附加式的绑定事件，可以对同一个事件同时绑定多个事件处理函数， $("#btn").on()或btn.addEventListener()执行几次就会同时绑定几个事件处理函数。 而用原生的onclick绑定事件其实是赋值操作，onclick中只能保留一个值，再次对onclick赋值会覆盖上次的值。

[bhbhxy]

on和addEventListener一样，可以重复给元素绑定事件，即如果你写了两行这样的代码：

btn.addEventListener('click',function(){
    console.log('这是第一次执行')
});
btn.addEventListener('click',function(){
    console.log('这是第二次执行')
});

那么它都会执行，这属于DOM2规范， 而最原始的onclick属于DOM1规范，如果声明多次，只会被最后一个覆盖。 你的代码在初始化时就执行了this.c()，绑定了一次事件，在点击过程中又执行了一次update，相当于又绑定了一次，于是就翻倍了