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

DavidWongSssss 2018-02-19 10:37:21
先上波代码

<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事件有什么不同吗
...全文
445 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
bhbhxy 2018-02-19
  • 打赏
  • 举报
回复
on和addEventListener一样,可以重复给元素绑定事件,即如果你写了两行这样的代码:
btn.addEventListener('click',function(){
    console.log('这是第一次执行')
});
btn.addEventListener('click',function(){
    console.log('这是第二次执行')
});
那么它都会执行,这属于DOM2规范, 而最原始的onclick属于DOM1规范,如果声明多次,只会被最后一个覆盖。 你的代码在初始化时就执行了this.c(),绑定了一次事件,在点击过程中又执行了一次update,相当于又绑定了一次,于是就翻倍了
天际的海浪 2018-02-19
  • 打赏
  • 举报
回复
你在事件中调用update() ,在update()又再次调用upEvent()重复绑定事件。 jquery的on与addEventListener是附加式的绑定事件,可以对同一个事件同时绑定多个事件处理函数, $("#btn").on()或btn.addEventListener()执行几次就会同时绑定几个事件处理函数。 而用原生的onclick绑定事件其实是赋值操作,onclick中只能保留一个值,再次对onclick赋值会覆盖上次的值。

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧