@lizlalala 2016-11-02T16:06:03.000000Z 字数 1800 阅读 1169

日常笔记（二）

未分类

JavaScript 和事件

划重点就是：

监听事件方法：

html内联属性
避免使用，因为与html耦合

<button onclick="alert('你点击了这个按钮');">点击这个按钮</button>

dom属性绑定
缺点：多次绑定是覆盖，非添加

element.onclick = function(event){
    alert('你点击了这个按钮');
};

事件监听函数

element.addEventListener(<event-name>, <callback>, <use-capture>);
element.removeEventListener("click",funcName,false)
//ie
element.attachEvent(<event-name>, <callback>);//event-name: on+name

use-capture设为false主要是因为ie不支持捕获阶段的事件响应。所以统一在冒泡阶段处理。

事件代理

需要注意的时，事件触发的目标总是最底层的节点。比如你点击一段文字，你以为你的事件目标节点在 div 上，但实际上触发在p,span等子节点上。

事件代理优点：
- 减少事件绑定，提升性能。
- 动态变化的 DOM 结构，仍然可以监听。
```
//原生
element.addEventListener('click', function(event) {
    // 判断是否是 a 节点
    if ( event.target.tagName == 'A' ) {
        // a 的一些交互操作
    }
}, false);
//jquery
$(parent).on("click","a",function(e){...})
```

停止冒泡
这个hin有用呀，特别是用于弹窗的交互上，如果希望点击弹窗以外的部分让弹窗消失，就需要给弹窗设置阻止冒泡

var overlay = document.querySelector('.overlay');
overlay.addEventListener('click', function(event) {
  event.stopPropagation();
});
// Remove the overlay when a 'click'
// is heard on the document (<html>) element
document.addEventListener('click', function(event) {
  overlay.parentNode.removeChild(overlay);
});

其他注意事项
- 事件回调函数的作用域问题，详见另一篇楼主的博文日常笔记的第2条this总结。
- resize事件，相关的timing function: debounce throttle immediate
  
  总结来说，throttle和debounce都是为了限制在某段时间内大量连续的触发某一事件而进行的优化函数，两者区别在于：
  - 前者只是减少触发频率，比如每隔200ms,500ms触发一次，但还是要执行多次的。如mousemove
  - 而后者是某段时间只需要执行一次，把那些同样的操作认为是一次操作的抖动部分，去抖。eg。keydown->keyup。
    后者的一个栗子就是百度首页上input框监听用户的输入，不需要用户回车才发送请求，而是间隔比如500ms才会发送一次。需要体会的是，并不是每隔500ms就发送一次，因此这边用的是debounce。还有一个栗子就是列表滚动的时候，如果交互是等用户停下来再自动加载那么是debounce,如果是在滚动的过程中一直会自动加载下面的内容，那就是throttle
    具体的例子可以看上一篇文章5.及时搜索。等有空，楼主再仔细看下下面的文章，然后po一个在线demo好了。。之前的项目中有用到，但是不太好放到codepen里面...
  - 忘了还有一个immediate..它其实就是debounce，只是把回调中要执行的操作提出来先进行了。debounce中我们可以看到，是先等啊等，等到delta 时间到了，我们才去执行比如 fetchKeywordList(),但是immediate是先执行，然后再等啊等。有点类似于while(){}和do{} while()。
    to read :

日常笔记（二）

JavaScript 和事件

内容目录