d3事件(四)：事件响应是同步的

不同于异步执行的任务队列，事件响应是同步的，只要事件被触发，事件响应的相关代码会立即替换到主线程中进行执行，只有事件响应的代码执行完成后，主线程的代码才会接着执行。

实例的Dom结构如下：

<div class="container">
</div>
<!-- 用于确认事件确认测试 -->
<a href="#" class="btn btn-primary" id="btnSure">确认</a>

实例的事件注册代码如下：

d3.select('.container').selectAll('button')
    //    绑定数据，必须是数组
    .data([{
        username : 'yiifaa',
        sex      : 1
    }, {
        username : 'yiifee',
        sex      : 0
    }])
    //    获取到更新的集合
    .enter()
    .append('button')
    .text(function(d) {
        return d.username;
    })
    //    事件注册函数的参数为绑定的数据
    .on('click.hello', function(d) {
        //   进行名称的处理
        alert('Hello,' + d.username);
    })

确认事件触发是同步的代码如下：

d3.select("#btnSure").on('click', function() {
    //  触发事件
    d3.selectAll('button').dispatch('hello', {
        detail : {
            suffix : '!'
        }
    });
    // 测试输出
    alert("after");
})

执行上面的代码，我们发现，总是会先输出完“Hello,yiifaa”字样后，才会再输出“after”.改为更容易理解的代码如下：

<input type="text" id="username"/>
<a href="#" class="btn btn-primary" id="btnSure">确认</a>
<script type="text/javascript">
//  注册获得焦点事件
document.getElementById('username').addEventListener('focus', function() {
    alert('focus');
});
document.getElementById('btnSure').addEventListener('click', function() {
    document.getElementById('username').focus();
    alert('after');
});
</script>

执行上面的代码后，我们发现，依旧是先输出“focus”后才会再输出“after”，再次证明事件响应是同步的。