事件流
事件流：页面中接收事件的顺序；
IE的事件流是冒泡流，其他的浏览器是捕获流，如下图；
DOM事件流
DOM 事件流同时支持这两种事件流，并且规定DOM任何事件流都包含三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段；
注册事件
之前注册事件的方法或多或少都会存在一些问题，现在通常是使用AddEventlistener()来注册事件/监听事件，与之对应的还有removeEventListener()来删除事件;
所有DOM节点都有这两个方法，并且他们都是接收3个参数（事件类型，事件处理，boolean）,第三个参数如果是在冒泡阶段处理是false,反之true；
建议将事件处理程序添加到事件冒泡阶段，这样可以最大限度的兼容各种浏览器；
1 var btn=document.getElementById("btn1");
2 btn.addEventListener("click",function(){alert("hello")},false);
关于事件这里差不多了没多少东西；
委托事件
一开始我以为js中的委托事件跟.net中的delegate(委托)是一个概念，其实不是这样，js中的委托事件其实是利用事件冒泡到父节点，通过父节点来监听事件，在通过事件对象来判断是那个元素，然后相应的处理；
event 事件对象：在触发DOM上任何事件都会产生这个event对象，这个对象包含了所有与事件相关的信息（很强大的一个对象具体的可以自己查相关资料）；
委托实例
这里的委托还是挺容易理解的，就是委托别人来帮你做事情，根据我前面说的原理，翻译从HTML应该是这样的：本来是该你这个节点上该做的事情，现在委托了父节点来做；
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><ul id="ul"> <li>a</li> <li>b</li> <li>c</li></ul></body><script>
window.onload = function(){ var oUl = document.getElementById("ul"); oUl.addEventListener("mouseover",mouseoverDemo,false); oUl.addEventListener("mouseout",mouseoutDemo,false);
function mouseoverDemo(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; //兼容IE if(target.nodeName.toLowerCase() == "li"){ target.style.background = "red"; } } function mouseoutDemo(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == "li"){ target.style.background = ""; } } }
</script></html>
委托事件优点
1、相比之前遍历每一个li在绑定一个事件感觉爽了很多；
2、很明显没有了for 性能肯定是有提升；
3、动态的添加新的元素还是会有之前的事件（因为不管怎么样还是要冒泡到父元素的嘛）；
内容很少都是些基础；
时间： 2024-10-09 09:38:16