DOM-事件 | 捕获 | 冒泡 | 兼容 |

My Work...

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM 0 级事件是基于元素内联属性或DOM元素命名的元素的概念，例：
<pre>
<input type="button" onclick="clickMe();" />
</pre><pre>
input.onclick = function() { ... };
</pre>

• 通过这种方式绑定的事件，是元素的属性，当再一次给同一个节点元素绑定另外一个属性方法的时候，前一个属性的方法将会被覆盖,也就是只能指定一次,其次此时事件处理程序是在元素的作用域里中运行，所以此时this指向的是元素本身。

• DOM 0是在标准DOM定义之前内置到浏览器中的专用命令。它们都被标准- DOM所取代，但仍然在浏览器中工作，只是为了支持早期Netscape浏览器编写的脚本。
  <pre>
  var btn = document.getElementById('id'); btn.addEventListener('click',function() { //do sth }) //通过这种方式指定的事件处理程序能更灵活，最明显的区别就是能够同时绑定多个不同的事件处理程序，并且不相干涉。
  </pre>

• DOM级别2，有了一个更加标准化的方法来管理事件，增加了一个监听器，可使用addEventListener，removeEventListener （所有DOM节点都包含这2种方法）

---

attachEvent与addEventListener的区别？

• IE并不支持addEventListener方法，而是实现了类似的方法
• attachEvent

• attachEvent是IE的事件处理程序，当使用node.attachEvent('on'+type,handler)时，要在事件类型前面加上on,其次IE的事件处理程序只能触发在冒泡阶段,还有就是当我们使用IE的事件处理程序添加事件时，其处理的先后顺序是后添加的先执行，并且当处理程序的作用域是window即this指向的是window.

---

解释IE事件冒泡和DOM2事件传播机制？

• IE事件的传播机制只有冒泡阶段，即从目标元素向父元素传播一直传播到window停止，当传播的过程中如果监听到了相同的事件类型酒会一并触发，即从最具体的元素开始触发，一直到最外层的元素.
• DOM2事件传播机制包括事件的，从window开始 -> 捕获阶段 －> 到达目标元素 -> 冒泡阶段 -> 再到达最外层的 window，并且在addEventListener(type,function(){},true(为捕获阶段)/false(默认为冒泡阶段触发))。

---

如何阻止事件冒泡？ 如何阻止默认事件？

• 阻止事件冒泡
• stopPropagation（停止传播）
  <pre>
  document.body.addEventListener('click',function(){ console.log('Body') }) document.querySelector('.container').addEventListener('click',function(){ console.log('Container') }) document.querySelector('.box').addEventListener('click',function(){ console.log('Box') }) document.querySelector('button').addEventListener('click',function(e){ e.stopPropagation() //冒泡会被阻止 console.log('Button') })
  </pre>
• 阻止默认事件
• preventDefault
  form表单、a链接 都是有默认事件，点击链接会默认跳转到
  该功能：可监听到提交，先阻止提交，验证是否符合条件
  符合，即继续下一步
  <pre>
  document.querySelector('button').addEventListener('click',function(e){ e.preventDefault() console.log('Button') })
  </pre>

<pre>a链接标签添加：href="javascript:void(0)"</pre>

---

有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<pre>
<ul class="ct"> <li>这里是</li> <li>饥人谷</li> <li>前端6班</li> </ul> <script> //todo ... </script>
</pre><pre>
var storage = document.querySelector('.ct') //找到目标的父容器. storage.addEventListener('click',function(e){ console.log(e.target.innerText)//获取目标事件的文本内容（innerHTML） })
</pre>

---

补全代码，要求：

• 当点击按钮开头添加时在<i>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
• 当点击每一个元素li时控制台展示该元素的文本内容。
  <pre>
  <ul class="ct"> <li>这里是</li> <li>饥人谷</li> <li>任务班</li> </ul> <input class="ipt-add-content" placeholder="添加内容"/> <button id="btn-add-start">开头添加</button> <button id="btn-add-end">结尾添加</button> <script> //你的代码 </script>
  </pre><pre>
  var ct = document.querySelector('.ct') //这是ul容器 var startBtn = document.querySelector('#btn-add-start') //前按钮 var endBtn = document.querySelector('#btn-add-end') //后按钮 var content = document.querySelector('.ipt-add-content')//input startBtn.addEventListener('click',function(){ if ( !(/^\s+$/.test(content.value)) && content.value != "") {//不是以0开头和结尾&值不等于空 var newLi= document.createElement('li') //创建新的Li元素 newLi.innerText = content.value //input值赋予 ct.insertBefore(newLi, ct.firstChild); //添加到ct首子元素 } else { console.log('内容为空'); } }) endBtn.addEventListener('click', function() { if ( !(/^\s+$/.test(content.value)) && content.value != "") { var newLi = document.createElement('li') newLi.innerText = content.value ct.appendChild(newLi) } else { console.log('内容为空') } }) document.getElementsByTagName('ul')[0].addEventListener('click', function(e) { console.log(e.target) })
  </pre>

---

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<pre>
<ul class="ct"> <li data-img="1.png">鼠标放置查看图片1</li> <li data-img="2.png">鼠标放置查看图片2</li> <li data-img="3.png">鼠标放置查看图片3</li> </ul> <div class="img-preview"></div> <script> //你的代码 </script>
</pre><pre>
<style> .ct { margin: auto; max-width: 200px; } .img-preview { margin: auto; max-width:300px; max-height:300px; } img { display:none; width: 100%; } .show { display:block; } </style> <script> var img = document.createElement('img') var img_ct = document.querySelector('.img-preview') img_ct.appendChild(img) // img_ct.appendChild(img) var ul = document.querySelector('ul') ul.addEventListener('mouseover', function(e) { var att = e.target.getAttribute('data-img')//获取到data-img的值 img.setAttribute('src',att) // img.classList.add('show') }) ul.addEventListener('mouseout', function(e) { img.classList.remove('show') }) </script>
</pre>

---

Addevent Compatible IE

<pre>
function addEvent(node, type, handler) { if (!node) return false; if (node.addEventListener) { node.addEventListener(type, handler, false); return true; } else if (node.attachEvent) { node['e' + type + handler] = handler; node[type + handler] = function() { node['e' + type + handler](window.event); }; node.attachEvent('on' + type, node[type + handler]); return true; } return false; } 在取消事件处理程序的时候 function removeEvent(node, type, handler) { if (!node) return false; if (node.removeEventListener) { node.removeEventListener(type, handler, false); return true; } else if (node.detachEvent) { node.detachEvent('on' + type, node[type + handler]); node[type + handler] = null; } return false; } //event arguments for IE function getEvent(e) { return e || window.event; } function getTarget(e) { return e.target || e.scrElement; } function preventDefault(e) { if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; }
</pre>

---

End.. Watch Out !!

1. var insertedNode = parentNode.insertBefore(newNode, referenceNode);
2. let attribute = element.getAttribute(attributeName);
3. element.setAttribute(name, value);
4. const elementClasses = elementNodeReference.classList;
5. Uncaught SyntaxError: Unexpected token -

---