Javascript 和 HTML 的交互，是通过事件实现的。
事件流的三种模型：
1.事件冒泡。从内 ---> 外
2.事件捕获。从外 ---> 内
3.DOM2 的事件流。
给元素绑定事件处理程序：
- 1.HTML 內联方式
<input type="submit" name="submit" value="click" onclick="dealWith()">
缺点：
1.加载顺序问题。如果事件处理程序在 html 代码之后加载，用户可能在事件处理程序还未加载完成时，就点击按钮触发事件，存在时间差问题。
2.这样写 HTML 和 Javascript 代码过于紧密耦合，不方便维护。
- 2.通过 Javascript 绑定事件
HTML 代码
<div class="ct">
<input type="submit" name="submit" value="click" class="btn">
</div>
Javascript 代码
document.getElementsByClassName('btn')[0].onclick = function(){
console.log(this);
}
- DOM2 级事件处理程序
- 添加处理事件 addEventListener(type,listener,useCapture)
type: 表示事件名。如 'click'
listener: 表示事件发生后执行的程序。如 function(){console.log('被点击了')}
useCapture: 指定事件发生在冒泡阶段（false.默认）还是捕获阶段（true） - 删除处理事件 removeEventListener(type,listener,useCapture)
- onclick 与 addEventListener('click',listener,false) 的区别
- onclick
document.getElementsByClassName('btn')[0].onclick = function(){
console.log('a');
}/*会被覆盖，相当于函数被重写了*/
document.getElementsByClassName('btn')[0].onclick = function(){
console.log('b');
}
- addEventListener('click',listener,false)
document.getElementsByClassName('btn')[0].addEventListener('click',function(){
console.log('a');
},true);/*有效，相当于两个函数合并*/
document.getElementsByClassName('btn')[0].addEventListener('click',function(){
console.log('b');
},true);/*有效，相当于两个函数合并*/
DOM 事件对象（event 对象）的属性和方法
event.target 事件来源
event.preventDefault() 取消默认事件
event.stopPropagation() 取消事件进一步捕获或者冒泡
事件代理：把事件绑定在父元素上，通过事件来源(event.target)确定事件的发出者。
注：通过 JS 添加的元素的事件，无法触发原来绑定的。需要通过事件代理实现。
<div class="ct">
<div class="target">item 1</div>
<div class="target">item 2</div>
<div class="target">item 3</div>
</div>
<input type="submit" name="submit" value="添加" class="btn">
<script type="text/javascript">
var ct = document.getElementsByClassName('ct')[0];
ct.addEventListener('click',function(e){
console.log(e.target)
},false);
</script>
- jQuery 中的 事件绑定
- on('click',function(){})
- 事件代理 on('click',function(){})
<ul class="father">
<li class="child"></li>
</ul>
<script>
$('.father').on('click','.child',function(){});
</script>
