js基础之事件绑定

nidaye 发布于2019-08-26 11:38 / 1388人阅读

摘要：所以还是有空就回顾回顾基础的知识，今天，就来看看事件绑定的问题吧。在一个点击事件内部嵌套点击事件，外点击事件执行几次，就会给内部的事件冤元素绑定几次点击事件，因此使用不当就会造成内部事件多次执行的问题。

js基础

1.写的代码越多，按理说基础应该是更加扎实，但是最近不知道怎么回事，总是犯不该犯的错误。所以还是有空就回顾回顾基础的知识，今天，就来看看js事件绑定的问题吧。
2.绑定事件的嵌套问题，是最容易出错的。
3.在一个点击事件内部嵌套点击事件，外点击事件执行几次，就会给内部的事件冤元素绑定几次点击事件，因此使用不当就会造成内部事件多次执行的问题。不说了，上代码。

$("div.div1").click(function() {
    alert("123");
    fon()
})

function fon() {
    $("div.div2").click(function() {
        alert("456");
    })
}

以上的写法会造成点击div1多少次，就会在第一次点击div2的时候弹出多少遍456,因此，为避免这种错误，正确的做法是在绑定点击事件之前先解绑事件，看代码。

$("div.div1").click(function() {
    alert("123");
    fon()
})

function fon() {
    $("div.div2").unbind("click")
    $("div.div2").click(function() {
        alert("456");
    })
}

当然，这种做法运行代码是没什么问题的，不过不建议这种写法，最好的最优的写法不应该是嵌套事件，就乖乖地编程不好吗？？？

$("div.div1").click(function() {
    alert("123");
})
$("div.div2").click(function() {
    alert("456");
})

GPU云服务器云服务器 js绑定事件基础 js绑定事件 js去除绑定事件 js实现事件绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107274.html

原生js之DOM事件相关

摘要：而由于级标准中并没有定义事件相关的内容，所以事件级别只包括级，级和级三种。此属性返回当前事件所绑定的对象。自定义事件可以绑定到任意元素上，此处选择只是为了演示方便。前端学习的东西有很多，现代前端开发，前端工程化的东西要懂，基础的原生js也要懂，毕竟，框架都是有生命周期的，更替非常快，然而却有这么一个框架，它是最轻量的前端框架，每个浏览器都内置，它叫vanilla.js。好吧，其实va...

learning 2019-08-22 13:51 评论0 收藏0
Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

maybe_009 2019-08-30 15:55 评论0 收藏0
Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

2bdenny 2019-08-02 14:11 评论0 收藏0
Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

LMou 2019-08-26 13:31 评论0 收藏0