zoukankan      html  css  js  c++  java
  • js 事件监听

    最近在看zepto的源码在看的过程中,对于js事件监听一直云里雾里的,打算整理成文。


    首先拿 key events and characters练习。

    html

    <div>
        <input type="text" id="textBox"/>
        <p></p>
    </div>
    

    javascript

        function init() {
            var inputElement = document.getElementById('textBox'),
                    pElement = document.getElementsByTagName('p')[0];
            inputElement.addEventListener('keydown', function () {
                pElement.textContent = inputElement.value.length;
            });
        }
    
        window.addEventListener('load', init, false)
    
    

    效果
    http://codepen.io/Yunkou/full/KtdwC/

    在整个过程中(没有涉及到IE兼容),其实addEventListener三个参数中,前两个好理解,那么问题来了 false 做如何理解呢?

    第二话 addEventListenerの第三个参数

    element.addEventListener(event, function, useCapture)

    这个useCapture到底是个什么货。

    第一个参数是需要绑定的事件,第二个参数是触发事件后要执行的函数。而第三个参数默认值是false,表示在事件冒泡的阶段调用事件处理函数,如果参数为true,则表示在事件捕获阶段调用处理函数。举个栗子

    那问题来了,到底啥是 时间冒泡和事件捕获?对于js小雏来说实在太难理解了。解惑js事件机制哪家强当然是 小胡子哥 [解惑]JavaScript事件机制
    其实这篇也不错 但是稍微有点难度。

  • 相关阅读:
    shell cut
    查询表名
    RandomAccessFile
    eclipse 背景颜色
    JAVA 获取分行符
    date time insert
    shell date time
    python
    gdg shell
    shell入门之变量测试
  • 原文地址:https://www.cnblogs.com/yunkou/p/4070467.html
Copyright © 2011-2022 走看看