事件

概念

事件：文档或浏览器窗口中发生的一些特定的交互瞬间。

用户 -> 操作 html 元素 -> 产生一个事件 -> 事件主动的调用设定的方法函数

事件源；产生事件的地方
事件的类型：点击 键盘输入
事件记录：记录好 信息
事件的处理程序：函数

注册

注册：把以后会发生的事情，提前报备一下

• html 的属性：
  属性名：on+属性的名字 onclick

属性值：
直接在 html 设定

<script>
var num = 0;
function add() {
    console.log("点击"+ ++num);
}
</script>
<div id="div1" onclick="add()">div1</div>

通过 js 的元素对象来设定

<div id="div1">div1</div>
<script>
var num = 0;
function add() {
    console.log("点击   "+ ++num);
}
var div1 = document.getElementById("div1");
div1.onclick = add;
div1.onclick = null; // 删除事件
</script>

通过系统调用的方法设定

<div id="div1">div1</div>
<script>
var num = 0;
var num2 = 0;
function add() {
    console.log("addEventListener   "+ ++num);
}
function add2() {
    console.log("addEventListener2   "+ --num2);
}
var div1 = document.getElementById("div1");
div1.onclick = add;
div1.onclick = null;
// div1.addEventListener(事件类型click, 函数add, 事件的处理方式 布尔值 默认 false);
div1.addEventListener("click", add);
div1.addEventListener("click", add2); // 可以绑定多个事件
div1.removeEventListener("click", add); // 删除
</script> 

事件函数和事件对象

事件发生的时候 -> 操作

<div id="div1">div1</div>
<input type="text" name="a" id="input1">
<a href="http:www.baidu.com" target="_blank" id="a1">百度</a>
<script>
var div1 = document.getElementById("div1");
div1.addEventListener("click", add);
// 事件对象 event: 提供来事件的详细信息
// 具体发生事件的元素，鼠标的位置，点击的状态 键盘的按键 
function add(event) {
    console.log("事件函数");
    console.log(event);
    // 事件的默认操作
    // 取消默认操作
    event.preventDefault();
    // return false; 针对 a1.onclick = add; 
}
/* screenX screenY cilentX clientY */
var input1 = document.getElementById("input1");
input1.addEventListener("keydown", add);
var a1 = document.getElementById("a1");
a1.addEventListener("click", add);
</script>

事件流

多个标签 互相嵌套
事件的传播：在默认情况下，点击页面的一个标签，处在传播 路径上的标签都会监听到对应的事件

事件流：对应标签接收到事件的顺序

捕获阶段：从起始点-》目标位置
冒泡阶段：目标点-》起始位置

addEventListener("click", head1Click, false); // 阻止捕获阶段
event.stopPropagation(); // 阻止冒泡阶段

事件代理