事件代理/委托

一、事件机制

事件绑定和事件代理（委托）
事件绑定：
1.HTML事件处理程序：缺点：强耦合
2.DOM事件级别：DOM0（无法同时绑定多个事件处理程序）、DOM2、DOM3（可以同时处理多个事件）

事件代理/委托：事件委托利用了事件冒泡，只定制一个事件处理程序，就可以管理某一类型的所有事件。

事件委托vs普通绑定
①普通事件绑定无法对新增节点进行处理。
②事件委托是利用事件冒泡机制，将事件委托给父元素进行处理
③事件委托高效

二、事件委托知识点

1. 事件对象event

   Event对象- - -对事件的具体描述，event.type事件类型、event.target事件源
   兼容问题- - -主流浏览器方式：event
   IE方式- - -window.event
   固定写法：var event=event||window.event；

2. 事件源/事件对象的目标节点target
   兼容：主流浏览器- - -event.target
   兼容：IE浏览器- - -event.srcElement
   固定写法：var target=event.target||event.srcElement

3. 字符串操作
   大写：toUpperCase()、小写：toLowerCase()

4. 添加节点的三部曲：
   ①创建元素节点- - -document.createElement(TagName);
   ②添加文本节点- - -newNode.innerText();
   ③插入parentNode.appendChild(newNode);

三、事件委托3部曲

1. 给父元素绑定事件
2. 监听子元素的冒泡事件（获取event对象）
3. 找到是哪个子元素的事件（获取target事件源）
   拓展：判断之所以要加判断，是因为存在注释节点（空格、换行、注释）

if(target.nodeName.toLowerCase==" "){}

四、事件委托注意

onmouseover和onmouseleave区别？
onmouseover(onmouseout)事件支持冒泡；onmouseenter(onmouseleave)事件不支持冒泡

五、拓展（省略号）

1. 常规用法：

text-overflow:ellipsis /*超出文本省略号*/
white-space:nowrap /*分行-不让其换行*/
overflow:hidden;/*溢出隐藏*/

2. 伪元素法（有局限，不推荐使用）