My Work...

DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？

DOM 0 級事件是基于元素內(nèi)聯(lián)屬性或DOM元素命名的元素的概念，例：
<pre>
<input type="button" onclick="clickMe();" />
</pre><pre>
input.onclick = function() { ... };
</pre>

• 通過這種方式綁定的事件，是元素的屬性，當(dāng)再一次給同一個節(jié)點元素綁定另外一個屬性方法的時候，前一個屬性的方法將會被覆蓋,也就是只能指定一次,其次此時事件處理程序是在元素的作用域里中運行，所以此時this指向的是元素本身。

• DOM 0是在標準DOM定義之前內(nèi)置到瀏覽器中的專用命令。它們都被標準- DOM所取代，但仍然在瀏覽器中工作，只是為了支持早期Netscape瀏覽器編寫的腳本。
  <pre>
  var btn = document.getElementById('id'); btn.addEventListener('click',function() { //do sth }) //通過這種方式指定的事件處理程序能更靈活，最明顯的區(qū)別就是能夠同時綁定多個不同的事件處理程序，并且不相干涉。
  </pre>

• DOM級別2，有了一個更加標準化的方法來管理事件，增加了一個監(jiān)聽器，可使用addEventListener，removeEventListener （所有DOM節(jié)點都包含這2種方法）

attachEvent與addEventListener的區(qū)別？

• IE并不支持addEventListener方法，而是實現(xiàn)了類似的方法
• attachEvent

• attachEvent是IE的事件處理程序，當(dāng)使用node.attachEvent('on'+type,handler)時，要在事件類型前面加上on,其次IE的事件處理程序只能觸發(fā)在冒泡階段,還有就是當(dāng)我們使用IE的事件處理程序添加事件時，其處理的先后順序是后添加的先執(zhí)行，并且當(dāng)處理程序的作用域是window即this指向的是window.

解釋IE事件冒泡和DOM2事件傳播機制？

• IE事件的傳播機制只有冒泡階段，即從目標元素向父元素傳播一直傳播到window停止，當(dāng)傳播的過程中如果監(jiān)聽到了相同的事件類型酒會一并觸發(fā)，即從最具體的元素開始觸發(fā)，一直到最外層的元素.
• DOM2事件傳播機制包括事件的，從window開始 -> 捕獲階段 －> 到達目標元素 -> 冒泡階段 -> 再到達最外層的 window，并且在addEventListener(type,function(){},true(為捕獲階段)/false(默認為冒泡階段觸發(fā)))。

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

• 阻止事件冒泡
• 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鏈接 都是有默認事件，點擊鏈接會默認跳轉(zhuǎn)到
  該功能：可監(jiān)聽到提交，先阻止提交，驗證是否符合條件
  符合，即繼續(xù)下一步
  <pre>
  document.querySelector('button').addEventListener('click',function(e){ e.preventDefault() console.log('Button') })
  </pre>

<pre>a鏈接標簽添加：href="javascript:void(0)"</pre>

有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容

<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)//獲取目標事件的文本內(nèi)容（innerHTML） })
</pre>

補全代碼，要求：

• 當(dāng)點擊按鈕開頭添加時在<i>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
• 當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。
  <pre>
  <ul class="ct"> <li>這里是</li> <li>饑人谷</li> <li>任務(wù)班</li> </ul> <input class="ipt-add-content" placeholder="添加內(nèi)容"/> <button id="btn-add-start">開頭添加</button> <button id="btn-add-end">結(jié)尾添加</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開頭和結(jié)尾&值不等于空 var newLi= document.createElement('li') //創(chuàng)建新的Li元素 newLi.innerText = content.value //input值賦予 ct.insertBefore(newLi, ct.firstChild); //添加到ct首子元素 } else { console.log('內(nèi)容為空'); } }) 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('內(nèi)容為空') } }) document.getElementsByTagName('ul')[0].addEventListener('click', function(e) { console.log(e.target) })
  </pre>

補全代碼，要求：當(dāng)鼠標放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

<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 -