美文网首页
Head First JavaScript 之 Event

Head First JavaScript 之 Event

作者: 隐藏的记号 | 来源:发表于2017-02-17 11:26 被阅读17次

    现在,我已经回到家中,但是这不能成为我放松脚步的理由。
    这一次,我接触到的内容是event这一部分。event在学校时就已经有学过了,由jQuery里面的事件着手学起,相比之前的潦草带过,我更愿意在假期花一天的时间来好好体会其中的由上至下。

    在浏览器中,到处可见事件的触发, 比如你点击了一个按钮,导致了页面出现的一些变化,或提交了表单,鼠标移入到图片可以看到对应的清晰大图等等。这些统称为事件被触发了。

    我们也可以自己随心所欲地让HTML 中的元素得到触发事件的机会,比如一个元素<p>,我们可以给其添加上click事件,mouseover, mouseout mousemove等等常见的事件类型。

    既然我们要使某个DOM元素能够触发事件,那么我们在找到其事件的类型后,还需给出该事件被触发后应做出的处理。

    如何告诉浏览器说事件被触发后应当做些什么呢?
    答:这时我们可以将处理事件的语句封装成为一个函数,在将这个函数触发事件的target联系起来。

    var p = document.getElementsByTagName("p")[0];
    p.onclick = event1;
    function event1 () {
      alert(p);
    }
    

    我们将处理点击事件的代码 alert(p);写在了函数event1; 又将event1与DOM元素p对象关联了起来。所以整段代码 执行后的效果就是,当点击p标签后,页面会立即弹出DOM元素为p的信息。


    当我们有多个事件几乎被同时触发,相距的时间十分之短,浏览器会怎么去处理这种情况呢?密集的事件触发会累坏浏览器吗?
    答:对于这种情况,浏览器(browser)不缓不慢地将多个要处理的事件一个一个地放入队列,然后再从队列中依次对事件进行处理。

    Paste_Image.png

    That value is actually a reference to the function, and as you've seen, whether you define a function with a function declaration or a function expression, you get a reference to that function.无论是通过声明来得到一个函数还是通过计算表达式来获取一个函数,我们最终都指挥得到一个函数。

    相关文章

      网友评论

          本文标题:Head First JavaScript 之 Event

          本文链接:https://www.haomeiwen.com/subject/obtubttx.html