【12-16】事件对象

一、事件对象的属性

1、键盘事件：    只有window,document,表单元素可以触发

    keydown   按键按下

    keypress   按键按住

    keyup(触发一次)   按键弹起

2、键盘事件的事件对象的属性

事件对象包含一系列的信息:

    1、事件源头  

    2、事件类型

    3、按下哪个键(ev.keyCode:返回数字，每个键对应不同的数字，回车键对应13)

    4、是否按下Ctrl键

        (ev.ctrlKey:返回true代表按了Ctrl,返回false代表没有按Ctrl)

        (ev.altKey:返回true代表按了Alt,返回false代表没有按Alt)

---

二、元素的各种大小和位置

  1. 获取元素的大小

        1.1 元素的可视宽（不包含边框） odiv.clientWidth

        1.1 元素的占位宽（包含边框） odiv.offsetWidth

  2. 获取浏览器窗口的宽度

        1.1 window.innerWidth(包含滚动条)

        1.2 document.body.clientWidth(不包含滚动条)

  3. 元素.offsetLeft:

获取距离它最最近的具有定位的父级元素的左偏移量，父级没有定位，会相对于body来获取

        【注意】元素（绝对定位的）

  4.元素.offsetTop:

获取距离它最最近的具有定位的父级元素的上偏移量，父级没有定位，会相对于body来获取

        【注意】元素（绝对定位的）

---

三、事件流(事件传播)：描述页面接收事件顺序

事件发生时，会在元素节点之间传播的顺序

1、网景公司：

   事件捕获==>事件发生时，从最不具体元素，依次向下传播到最具体的元素（由外向内传播）

2、微软公司：

   事件冒泡==>事件发生时，从具体元素，依次向上传播到最不具体的元素（由内向外传播）

3、W3C规定：事件传播有3个阶段

    3-1捕获阶段(由外向内)

    3-2目标阶段(具体点击的是谁  ev.target)

    3-3冒泡阶段(由内向外)

    【注】DOM2级可以支持捕获，DOM0级不支持捕获写法

        事件源.addEventListener('事件类型',事件处理函数,布尔值true/false)

    【注】true代表事件捕获，false代表事件冒泡(不写默认值false)

---

四、this和target

 1、ev.target:获取点击的具体元素

 2、ev.srcElement:获取点击的具体元素IE写法

 3、this指的是绑定事件的那个元素   

---

 

五、事件委托

给每一个li添加点击事件

    1、获取li

    2、遍历li

    3、给给一个li添加点击事件

    缺点：每一个li身上都有一个onclick，占用系统内存，资源消耗大

 事件委托可以解决这个问题

        1、把绑定事件委托父元素来处理

        2、利用的是冒泡元素

    优点：资源消耗少，降低内存占用，新增元素也会获得父元素的事件