JavaScript事件简述

Posted y丶卿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript事件简述相关的知识,希望对你有一定的参考价值。

事件简述

  技术一般水平有限,有什么错的地方,望大家指正。

  事件是我们平时经常使用,这次就来了解一下事件。首先我们要明确几个概念,javascript是单线程,浏览器是多线程的,并不是所有的事件处理函数都是异步的。

  前两个我们都知道,这里我们主要介绍第三个。事件处理函数可以在将来执行,只要满足触发条件就会执行事件处理函数。我们经常看到的一个场景,在循环中为一组元素绑定事件,弹出它在这组元素中的索引:

<button>button1</button><button>button2</button><button>button3</button>
$(function(){
    var btns = $("button");
    for(var i=0,il=btns.length;i<il;i++){
        $(btns[i]).click(function(){
            console.log(i);
        })
    }
})

  上面的代码我们在点击的时候每一个都是打印3,并不能实现我们预期的目的,这是因为我们点击的时候i的值已经变成3,而事件处理函数的行为是打印i浏览器此时就会去查询i,然后找到i=3所以点击每一个按钮都会打印3,要实现我们预期的目的就需要用到闭包:

$(function(){
    var btns = $("button");
    for(var i=0,il=btns.length;i<il;i++){
        ;(function(i){
            $(btns[i]).click(function(){
                console.log(i);
            })
        }(i))
    }
})

  虽然每一个点击事件的处理函数仍然是打印i但是此时浏览器去查找i的时候会优先找到作为参数的i,而此时的i就是当前循环的i的值。  

  普通的事件是同步执行的,看下面的一段代码:

$(function(){
    var btn = $("#button");
    btn.on("click",function(){
        var span = $("<span class=‘span‘>这是点击按钮创建的元素</span>");
        $("body").append(span);
        $(this).off("click");
    })
    btn.trigger("click");
    $(".span").css("color","red");
})

  开始我一直以为$(".span").css("color","red")会先于点击事件的处理函数之前执行,后来发现自己是错的,trigger("click")触发之后就会去执行创建DOM的语句,之后才会执行改变颜色的语句。

异步的事件处理函数

  什么是异步呢?我们知道JavaScript是单线程的语言,而浏览器是它的执行环境(非Node.js),而浏览器是有多个线程来处理不同的工作的。我们的JS代码在编译完成之后,开始从上往下执行,如果执行到像setTimeout之类的这种异步函数就会把它的处理函数放在浏览器的消息队列中,当JS代码执行完之后,会通知消息队列,查看有没有需要执行的代码,如果有就执行。

  有一些事件处理函数是异步的包括window.onload或者JQ中的$(function(){})都是异步的,AJAX肯定是异步的这个是毋庸置疑的。

window.onload = function(){
    console.log("onload")
}
function handler(){
    console.log("handler");
}
handler();
//先打印handler 后打印onload

  setTimeout和setInterval也是异步的:

setTimeout(function(){
    console.log("setTimeout");
},0)
function handler(){
    console.log("handler");
}
handler();
//先打印handler 后打印setTimeout

 

以上是关于JavaScript事件简述的主要内容,如果未能解决你的问题,请参考以下文章

javascript简述

JavaScript事件简述

简述JavaScript函数节流

Reactreact概述组件事件

简述HTML、JavaScript、CSS、PHP技术在Web开发中的作用

VSCode自定义代码片段12——JavaScript的Promise对象