【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

下载本文档

ID 200254
格式 docx
大小 545.09 KB
约37页
收藏
点赞(0)
海报
举报

/ 37

下载本文档

文本预览下载提示常见问题

【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）这篇博客有点长，如果你是高手请您读一读，能对其中的一些误点提出来，以免我误人子弟，并且帮助我提高如果你是javascript菜鸟，建议您好好读一读，真的理解下来会有不一样的收获在下才疏学浅，文中难免会有不同程度的错误，请您指正留言PS：事件阶段一节请看最新博客，之前理解有误基础我们的网页之所以丰富多彩并具有交互功能，是因为我们的javascript脚本语言，而javascript与HTML之间的交互又是通过事件机制实现的所以，事件是javascript一大核心，深入了解事件机制在我们遇到较困难问题时候十分有帮助所谓事件，就是网页发生的一些瞬间（比如点击、滑动），在这些瞬间我们使用事件监听器（回调函数）去订阅事件，在事件发生时候我们的回调函数就会触发观察者模式的javascript事件机制的基石，这种异步事件编程模型，就是用户产生特定的操作，浏览器就会产生特定的事件，我们若是订阅了事件，回调就会触发好了，我们下面就来研究下javascript事件机制的几个关键点。事件捕获/冒泡网页上的布局很复杂，我们对页面的单一操作有可能产生预计以外的影响：比如我点击一个span，我可能就想点击一个span，试试上他是先点击document，然后点击事件传递到span的，而且并不会在span停下，span有子元素就会继续往下，最后会依次回传至document，我们这里偷一张图：我们这里偷了一张图，这张图很好的说明了事件的传播方式事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）这里我们进入dom事件流，这里我们详细看看javascript事件的传递方式DOM事件流DOM2级事件规定事件包括三个阶段：①事件捕获阶段②处于目标阶段③事件冒泡阶段这里说起来不太明显，我们来一个例子吧：http://sandbox.runjs.cn/show/l31ucooa1<htmlxmlns="http://www.w3.org/1999/xhtml">2<head>3<title></title>4<styletype="text/css">5#p{width:300px;height:300px;padding:10px;border:1pxsolidblack;}6#c{width:100px;height:100px;border:1pxsolidred;}7</style>8</head>9<body>10<divid="p">11parent12<divid="c">13child14</div>15</div>16<scripttype="text/javascript">17varp=document.getElementById('p'),18c=document.getElementById('c');19c.addEventListener('click',function(){20alert('子节点捕获')21},true);2223c.addEventListener('click',function(){24alert('子节点冒泡')25},false);26</script>27</body>28</html>这个代码比较简单，我们主要点击child即可，这里要证明的就是点击事件是先捕获再冒泡，所以我们这里来一个复杂点的关系：http://sandbox.runjs.cn/show/ij4rih6x1<htmlxmlns="http://www.w3.org/1999/xhtml">2<head>3<title></title>4<styletype="text/css">5#p{width:300px;height:300px;padding:10px;border:1pxsolidblack;}6#c{width:100px;height:100px;border:1pxsolidred;}7</style>8</head>9<body>10<divid="p">11parent12<divid="c">13child14</div>15</div>16<scripttype="text/javascript">17varp=document.getElementById('p'),18c=document.getElementById('c');19c.addEventListener('click',function(){20alert('子节点捕获')21},true);2223c.addEventListener('click',function(){24alert('子节点冒泡')25},false);2627p.addEventListener('click',function(){28alert('父节点捕获')29},true);3031p.addEventListener('click',function(){32alert('父节点冒泡')33},false);34</script>35</body>36</html>现在这个家伙就比较实在了，不注意就容易晕的，我们来稍微理一理：①点击parent，事件首先在document上然后parent捕获到事件，处于目标阶段然后event.target也等于parent，所以触发捕获事件由于target与currentTarget相等了，所以认为到底了，开始冒泡，执行冒泡事件②点击child情况有所不同，事件由document传向parent执行事件，然后传向child最后开始冒...

1、当您付费下载文档后，您只拥有了使用权限，并不意味着购买了版权，文档只能用于自身使用，不得用于其他商业用途（如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利）。
2、本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供参考，付费前请自行鉴别。
3、如文档内容存在侵犯商业秘密、侵犯著作权等，请点击“举报”。