DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別椎瘟？
DOM 0 級(jí)事件是基于元素內(nèi)聯(lián)屬性或DOM元素命名的元素的概念，例：
<pre>
<input type="button" onclick="clickMe();" />
</pre><pre>
input.onclick = function() { ... };
</pre>
- 通過(guò)這種方式綁定的事件，是元素的屬性预鬓，當(dāng)再一次給同一個(gè)節(jié)點(diǎn)元素綁定另外一個(gè)屬性方法的時(shí)候，前一個(gè)屬性的方法將會(huì)被覆蓋,也就是只能指定一次,其次此時(shí)事件處理程序是在元素的作用域里中運(yùn)行，所以此時(shí)this指向的是元素本身奢方。
- DOM 0是在標(biāo)準(zhǔn)DOM定義之前內(nèi)置到瀏覽器中的專(zhuān)用命令。它們都被標(biāo)準(zhǔn)- DOM所取代爸舒，但仍然在瀏覽器中工作蟋字，只是為了支持早期Netscape瀏覽器編寫(xiě)的腳本。
<pre>
var btn = document.getElementById('id'); btn.addEventListener('click',function() { //do sth }) //通過(guò)這種方式指定的事件處理程序能更靈活碳抄，最明顯的區(qū)別就是能夠同時(shí)綁定多個(gè)不同的事件處理程序愉老，并且不相干涉。
</pre>
- DOM級(jí)別2剖效，有了一個(gè)更加標(biāo)準(zhǔn)化的方法來(lái)管理事件嫉入，增加了一個(gè)監(jiān)聽(tīng)器，可使用addEventListener璧尸，removeEventListener （所有DOM節(jié)點(diǎn)都包含這2種方法）
attachEvent與addEventListener的區(qū)別咒林？
- IE并不支持addEventListener方法，而是實(shí)現(xiàn)了類(lèi)似的方法
- attachEvent
- attachEvent是IE的事件處理程序爷光，當(dāng)使用node.attachEvent('on'+type,handler)時(shí)垫竞，要在事件類(lèi)型前面加上on,其次IE的事件處理程序只能觸發(fā)在冒泡階段,還有就是當(dāng)我們使用IE的事件處理程序添加事件時(shí)，其處理的先后順序是后添加的先執(zhí)行，并且當(dāng)處理程序的作用域是window即this指向的是window.
解釋IE事件冒泡和DOM2事件傳播機(jī)制欢瞪？
- IE事件的傳播機(jī)制只有冒泡階段活烙，即從目標(biāo)元素向父元素傳播一直傳播到window停止，當(dāng)傳播的過(guò)程中如果監(jiān)聽(tīng)到了相同的事件類(lèi)型酒會(huì)一并觸發(fā)遣鼓，即從最具體的元素開(kāi)始觸發(fā)啸盏，一直到最外層的元素.
- DOM2事件傳播機(jī)制包括事件的，從window開(kāi)始 -> 捕獲階段 －> 到達(dá)目標(biāo)元素 -> 冒泡階段 -> 再到達(dá)最外層的 window骑祟，并且在addEventListener(type,function(){},true(為捕獲階段)/false(默認(rèn)為冒泡階段觸發(fā)))回懦。
如何阻止事件冒泡？ 如何阻止默認(rèn)事件次企？
- 阻止事件冒泡
- 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() //冒泡會(huì)被阻止 console.log('Button') })
</pre> - 阻止默認(rèn)事件
- preventDefault
form表單怯晕、a鏈接 都是有默認(rèn)事件，點(diǎn)擊鏈接會(huì)默認(rèn)跳轉(zhuǎn)到
該功能：可監(jiān)聽(tīng)到提交缸棵，先阻止提交舟茶，驗(yàn)證是否符合條件
符合，即繼續(xù)下一步
<pre>
document.querySelector('button').addEventListener('click',function(e){ e.preventDefault() console.log('Button') })
</pre>
<pre>a鏈接標(biāo)簽添加：href="javascript:void(0)"</pre>
有如下代碼蛉谜，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容稚晚。不考慮兼容
<pre>
<ul class="ct"> <li>這里是</li> <li>饑人谷</li> <li>前端6班</li> </ul> <script> //todo ... </script>
</pre><pre>
var storage = document.querySelector('.ct') //找到目標(biāo)的父容器. storage.addEventListener('click',function(e){ console.log(e.target.innerText)//獲取目標(biāo)事件的文本內(nèi)容（innerHTML） })
</pre>
補(bǔ)全代碼，要求：
- 當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在
<i>這里是</li>元素前添加一個(gè)新元素型诚，內(nèi)容為用戶輸入的非空字符串客燕；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶輸入的非空字符串. - 當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(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">開(kāi)頭添加</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開(kāi)頭和結(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>
補(bǔ)全代碼狰贯，要求：當(dāng)鼠標(biāo)放置在li元素上也搓，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片。
<pre>
<ul class="ct"> <li data-img="1.png">鼠標(biāo)放置查看圖片1</li> <li data-img="2.png">鼠標(biāo)放置查看圖片2</li> <li data-img="3.png">鼠標(biāo)放置查看圖片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; } 在取消事件處理程序的時(shí)候 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 !!
- var insertedNode = parentNode.insertBefore(newNode, referenceNode);
- let attribute = element.getAttribute(attributeName);
- element.setAttribute(name, value);
- const elementClasses = elementNodeReference.classList;
- Uncaught SyntaxError: Unexpected token -
