DOM、事件

dom對(duì)象的innerText和innerHTML有什么區(qū)別钓猬？

innerText：返回元素內(nèi)包含的文本內(nèi)容稍刀，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容。
innerHTML：類似innerText，但是返回的是元素的HTML結(jié)構(gòu)账月，在寫入的時(shí)候會(huì)自動(dòng)構(gòu)建DOM综膀。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    測試
  </div>
  <div id="div2">
    測試
  </div>
  <script>
    var div1=document.getElementById('div1');
    var div2=document.getElementById('div2');
  </script>
</body>
</html>

innerHTML和innerText

elem.children和elem.childNodes的區(qū)別？

elem.children：子列表元素（HTMLCollention）獲取標(biāo)簽
elem.childNodes:（NodeList）獲取所有子節(jié)點(diǎn)局齿，包括空白的所有字段

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    <p>測試</p>
  </div>
  <script>
    var div1=document.getElementById('div1');
  </script>
</body>
</html>

children和childNodes

查詢元素有幾種常見的方法剧劝？

document.getElementById()：獲得id元素
document.getElementsByClassName()：獲得class元素
document.getElementsByTagName()：返回帶有指定標(biāo)簽名的對(duì)象的集合。
document.querySelector()：返回當(dāng)前文檔中第一個(gè)匹配特定選擇器的元素
document.querySelectorAll()：返回當(dāng)前文檔中匹配一個(gè)特定選擇器的所有的元素

如何創(chuàng)建一個(gè)元素抓歼？如何給元素設(shè)置屬性讥此？

創(chuàng)建元素：

createElement()：創(chuàng)建元素節(jié)點(diǎn)
createTextNode()：創(chuàng)建文本節(jié)點(diǎn)
createDocumentFragment()：生成一個(gè)DocumentFragment對(duì)象。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    
  </div>
  <script>
    var para=document.createElement('p');
    var div=document.getElementById('div1');
    div.appendChild(para);
    var text=document.createTextNode('段落');
    para.appendChild(text);
  </script>
</body>
</html>

創(chuàng)建元素

JSbin

設(shè)置元素屬性：

getAttribute()：獲取屬性
createAttribute()：生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)谣妻，并返回它
setAttributeNode()：添加屬性節(jié)點(diǎn)
setAttribute()：設(shè)置元素屬性
removeAttitbute()：刪除屬性

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
   <a class='link' href="#">鏈接</a>
  </div>
  <script>
    var div=document.querySelector('#div1');
    console.log(div1.getAttribute('id'));
    var link=document.querySelector('.link');
    link.setAttribute('title','測試');
    link.removeAttribute('href');
  </script>
</body>
</html>

設(shè)置元素

JSbin

元素的添加萄喳、刪除？

newDiv.appendChild(newContent)：在元素末尾添加元素
newDiv .insertBefore(newContent蹋半，newDiv.firstChild)：在某個(gè)元素之前添加元素
newDiv.replaceChild(newElement, oldElement)：接收兩個(gè)元素取胎，要添加的元素和要替換的元素
parentNode.removeChild(childNode)：刪除元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="div1">
    <p class="para">段落</p>
    <p class='para'>段落2</p>
  </div>
  <script>
    var div1=document.querySelector('#div1');
    var text1=document.createTextNode("append");
    div1.appendChild(text1);
    var para=document.querySelectorAll('.para');
    var text2=document.createTextNode('insert');
    div1.insertBefore(text2,div1.children[0]);
    var text3=document.createTextNode("replace");
    para[0].replaceChild(text3,para[0].childNodes[0]);
    div1.removeChild(para[1]);
  </script>
</body>
</html>

元素的添加、刪除

JSbin

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

DOM0級(jí)事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button class="btn" onclick='console.log(1)'>點(diǎn)擊</button>
  <script>
    var btn=document.querySelector('.btn');
    btn.onclick=function(){
      console.log('DOM0');
    };
  </script>
</body>
</html>

JSbin
綁定方式：

HTML內(nèi)聯(lián)方式
JS指定事件處理程序

DOM2級(jí)事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <button class="btn">點(diǎn)擊</button>
  <script>
    var btn=document.querySelector('.btn');
    btn.addEventListener('click',function(){
      console.log('DOM2');
    });
    btn.addEventListener('click',function(){
      console.log('DOM2.2');
    });
  </script>
</body>
</html>

DOM2級(jí)事件

JSbinDOM2
addEventListener接收三個(gè)參數(shù)：

事件類型
事件處理函數(shù)
布爾參數(shù)闻蛀，如果是true表示在捕獲階段調(diào)用事件處理程序，如果使false則是冒泡階段處理程序您市，默認(rèn)是false觉痛。

DOM0級(jí)和DOM2級(jí)區(qū)別

同樣的事件，DOM2級(jí)可以綁定多種處理方式茵休，而DOM0級(jí)綁定多種處理方式會(huì)被覆蓋
DOM2級(jí)事件可以指定是否在捕獲階段進(jìn)行程序處理

attachEvent與addEventListener的區(qū)別薪棒？

IE瀏覽器支持attachEvent，addEventListener支持多種主流瀏覽器
參數(shù)的個(gè)數(shù)不同
對(duì)this的引用不同榕莺，在attachEvent中this的環(huán)境是window俐芯，而addEventListener中this的環(huán)境是調(diào)用的元素
第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類型（比如click钉鸯，load）吧史，而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）

解釋IE事件冒泡和DOM2事件傳播機(jī)制唠雕？

事件冒泡：從最具體的元素（事件發(fā)生的元素）接收贸营，一層層向上傳遞到不具體的節(jié)點(diǎn)。所有的瀏覽器都支持事件冒泡岩睁，IE只支持事件冒泡钞脂。
DOM2事件傳播機(jī)制：DOM2事件規(guī)定的事件流包括三個(gè)階段：首先發(fā)生的是事件捕獲，為截取的事件提供機(jī)會(huì)捕儒，然后實(shí)際目標(biāo)接收事件冰啃，最后再進(jìn)行事件冒泡。

如何阻止事件冒泡？如何阻止默認(rèn)事件阎毅？

在主流瀏覽器中只要調(diào)用stopPropagation()焚刚，而在IE瀏覽器中要用cancelBubble茵宪。阻止默認(rèn)事件主流瀏覽器中使用preventDefault()，而在IE瀏覽器中要用returnValue

function stopPropagation(e){
  var event=e||window.event;//在IE瀏覽器中 事件是window.event
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancleBubble=false;//IE瀏覽器中的阻止冒泡
  }
}
function prevenDefault(e){
  var event=e||window.event;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue=false;
  }
}

代碼

有如下代碼肘交，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容声畏。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
  </ul>
  <script>
    var ct=document.querySelector('.ct');
    ct.addEventListener('click',function(e){
      console.log(e.target.innerText);
    });
  </script>
</body>
</html>

JSbin

補(bǔ)全代碼，要求：

當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素笤闯，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在<li>前端6班</li>后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//todo ...
</script>

實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
  </ul>
  <input class="ipt-add-content" placeholder="添加內(nèi)容"/>
  <button id="btn-add-start">開頭添加</button>
  <button id="btn-add-end">結(jié)尾添加</button>
  <script>
  var ct=document.querySelector('.ct');
  var iptAdd=document.querySelector('.ipt-add-content');
  var btnAddStart=document.querySelector('#btn-add-start');
  var btnAddEnd=document.querySelector('#btn-add-end');

  btnAddStart.addEventListener('click',function(){
    if(iptAdd.value){
      var text=document.createTextNode(iptAdd.value);
      var li=document.createElement('li');
      li.appendChild(text);
      ct.insertBefore(li,ct.children[0]);
      console.log(li.innerText);
    }
  });
  btnAddEnd.addEventListener('click',function(){
    if(iptAdd.value){
      var text=document.createTextNode(iptAdd.value);
      var li=document.createElement('li');
      li.appendChild(text);
      ct.appendChild(li);
      console.log(li.innerText);
    }
  });
  ct.addEventListener('click',function(e){
    console.log(e.target.innerText);
  });
/*
  btnAddEnd.addEventListener('click', function(){
     var li = document.createElement('li');
     li.innerText = ipt.value;
     ct.appendChild(li);
  });
*/
  </script>
</body>
</html>

JSbin

補(bǔ)全代碼燃领，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片锦援。

<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>
//todo ...
</script>

實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul class="ct">
    <li data-img="http://img3.imgtn.bdimg.com/it/u=2744235171,1121575194&fm=21&gp=0.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="http://img3.imgtn.bdimg.com/it/u=954554677,3720466482&fm=21&gp=0.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="http://img0.imgtn.bdimg.com/it/u=2657893920,4044129460&fm=21&gp=0.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
  var ct=document.querySelector('.ct');
  var imgPre=document.querySelector('.img-preview');
  var li=document.querySelectorAll('li');
  // for(var i=0;i<li.length;i++){
  //   li[i].addEventListener('mouseover',function(){
  //     var data=this.getAttribute('data-img');
  //     console.log(data);
  //     imgPre.innerHTML='<img src="' + data + '">';
  //   });
  // }
  ct.addEventListener('mouseover',function(e){
    var data=e.target.getAttribute('data-img');
    if(data){
      imgPre.innerHTML='<img src="'+data+'">';
    }
  });
</script>
</body>
</html>

JSbin

實(shí)現(xiàn)如下圖Tab切換的功能

tab切換

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    ul,li{
      list-style:none;
      margin:0;
      padding:0;
    }
    .clearfix:after{
      content:'';
      display:block;
      clear:both;
    }
    #tab{
      box-sizing:border-box;
      border:1px solid lightgray;
    }
    .nav{
      border-bottom:1px solid lightgray;
      text-align: center;

    }
    .nav li{
      float:left;
      width:33.1%;
      height:30px;
      line-height:30px;
      border-left:1px solid lightgray;
    }
    .nav .show{
      background-color:lightgray;
    }
    .content{
      height:150px;
      display:none;
    }
    #tab .show{
      display:block;
    }
  </style>
</head>
<body>
  <div id="tab">
    <ul class="nav clearfix">
      <li class='show'>tab1</li>
      <li>tab2</li>
      <li>tab3</li>
    </ul>
    <div class="content show">內(nèi)容1</div>
    <div class="content">內(nèi)容2</div>
    <div class="content">內(nèi)容3</div>
  </div>
  <script>
    var li=document.querySelectorAll('li');
    var nav=document.querySelector('.nav');
    var content=document.querySelectorAll('.content');
    nav.addEventListener('click',function(e){
      var target=e.target,
          libs=nav.children;
      for(var i=0;i<li.length;i++){
        li[i].removeAttribute('class');
      }
      target.setAttribute('class','show');
      var index=[].indexOf.call(li,target);
      var cls=content[index].getAttribute('class');
      for(i=0;i<content.length;i++){
        content[i].setAttribute('class','content');
      }
      content[index].setAttribute('class',cls+' show');
    });
  </script>
</body>

JSbin

實(shí)現(xiàn)下圖的模態(tài)框功能

模態(tài)框

實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    a{
        text-decoration: none;
        color:black;
    }
    h3{
        margin: 0px;
        padding:0px;
    }
    .clearfix:after{
        content: '';
        display: block;
        clear: both;
    }
    .modal-dialog{
        display: none;
    }
    .dialog{
        position:relative;
        top: 347px;
        left: 38%;
        width: 100%;
        height: 100%;
    }
    .header,.content,.footer{
        width:500px;
        border:1px solid lightgray;
        padding: 10px;
        background-color: white;
    }
    .footer{
        text-align: right;
    }
    .header h3{
        float: left;
    }
    .header .close{
        float: right;
    }
    .cover{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000;
        top: 0;
        left: 0;
        opacity: 0.4;
    }
  </style>
</head>
<body>
  <button class="btn-modal">點(diǎn)我</button>
  <div class="modal-dialog">
    <div class="cover"></div>
    <div class="dialog">
        <div class="header clearfix">
        <h3>我是標(biāo)題</h3>
        <a href="#" class="close">X</a>
        </div>
        <div class="content">
            <p>我是內(nèi)容1</p>
            <p>我是內(nèi)容2</p>
        </div>
        <div class="footer">
            <a href="#" class="btn-cancle">取消</a>
            <a href="#" class="btn">確定</a>
        </div>
    </div>
  </div>
  <script>
    var btnModal=document.querySelector('.btn-modal');
    var modalDialog=document.querySelector('.modal-dialog');
    var dialog=document.querySelector('.dialog');
    btnModal.addEventListener('click',function(e){
        modalDialog.style.display='block';
        e.stopPropagation();
    })
    document.body.addEventListener('click',function(){
        modalDialog.style.display='none';
    })
    dialog.addEventListener('click',function(e){
        e.stopPropagation();
        if (e.target.getAttribute('class')==='close'||e.target.getAttribute('class')==='btn-cancle') {
            modalDialog.style.display='none';
        }
    })
  </script>
</body>
</html>

JSbin

最后編輯于：2017.12.04 02:22:16

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末猛蔽，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子灵寺，更是在濱河造成了極大的恐慌曼库，老刑警劉巖，帶你破解...
沈念sama閱讀 206,126評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件略板，死亡現(xiàn)場離奇詭異毁枯，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)叮称，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,254評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門种玛，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人瓤檐，你說我怎么就攤上這事赂韵。” “怎么了挠蛉？”我有些...
開封第一講書人閱讀 152,445評(píng)論 0贊 341
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵祭示，是天一觀的道長。經(jīng)常有香客問我谴古，道長绍移，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 55,185評(píng)論 1贊 278
?港島之戀（遺憾婚禮）
正文為了忘掉前任讥电，我火速辦了婚禮蹂窖，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘恩敌。我一直安慰自己瞬测，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 64,178評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著月趟，像睡著了一般灯蝴。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上孝宗，一...
開封第一講書人閱讀 48,970評(píng)論 1贊 284
城市分裂傳說
那天穷躁，我揣著相機(jī)與錄音，去河邊找鬼因妇。笑死问潭，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的婚被。我是一名探鬼主播狡忙，決...
沈念sama閱讀 38,276評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼址芯！你這毒婦竟也來了灾茁？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 36,927評(píng)論 0贊 259
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤谷炸，失蹤者是張志新（化名）和其女友劉穎北专，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體旬陡，經(jīng)...
沈念sama閱讀 43,400評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡逗余，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,883評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了季惩。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片录粱。...
茶點(diǎn)故事閱讀 37,997評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖画拾，靈堂內(nèi)的尸體忽然破棺而出啥繁，到底是詐尸還是另有隱情，我是刑警寧澤青抛，帶...
沈念sama閱讀 33,646評(píng)論 4贊 322
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布旗闽，位于F島的核電站，受9級(jí)特大地震影響蜜另，放射性物質(zhì)發(fā)生泄漏适室。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,213評(píng)論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一举瑰、第九天我趴在偏房一處隱蔽的房頂上張望捣辆。院中可真熱鬧，春花似錦此迅、人聲如沸汽畴。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,204評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽忍些。三九已至鲁猩，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間罢坝，已是汗流浹背廓握。一陣腳步聲響...
開封第一講書人閱讀 31,423評(píng)論 1贊 260
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嘁酿，地道東北人隙券。一個(gè)月前我還...
沈念sama閱讀 45,423評(píng)論 2贊 352
代替公主和親
正文我出身青樓，卻偏偏與公主長得像痹仙，于是被迫代替她去往敵國和親是尔。傳聞我的和親對(duì)象是個(gè)殘疾皇子殉了，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,722評(píng)論 2贊 345

DOM格粪、事件

DOM、事件

dom對(duì)象的innerText和innerHTML有什么區(qū)別钓猬？

elem.children和elem.childNodes的區(qū)別？

查詢元素有幾種常見的方法剧劝？

如何創(chuàng)建一個(gè)元素抓歼？如何給元素設(shè)置屬性讥此？

元素的添加萄喳、刪除？

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

attachEvent與addEventListener的區(qū)別薪棒？

解釋IE事件冒泡和DOM2事件傳播機(jī)制唠雕？

如何阻止事件冒泡？如何阻止默認(rèn)事件阎毅？

代碼

有如下代碼肘交，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容声畏。不考慮兼容

補(bǔ)全代碼，要求：

補(bǔ)全代碼燃领，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片锦援。

實(shí)現(xiàn)如下圖Tab切換的功能

實(shí)現(xiàn)下圖的模態(tài)框功能

推薦閱讀更多精彩內(nèi)容

DOM、事件

dom對(duì)象的innerText和innerHTML有什么區(qū)別钓猬？

elem.children和elem.childNodes的區(qū)別？

查詢元素有幾種常見的方法剧劝？

如何創(chuàng)建一個(gè)元素抓歼？如何給元素設(shè)置屬性讥此？

元素的添加萄喳、刪除？

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

attachEvent與addEventListener的區(qū)別薪棒？

解釋IE事件冒泡和DOM2事件傳播機(jī)制唠雕？

如何阻止事件冒泡？ 如何阻止默認(rèn)事件阎毅？

代碼

有如下代碼肘交，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容声畏。不考慮兼容

補(bǔ)全代碼，要求：

補(bǔ)全代碼燃领，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片锦援。

實(shí)現(xiàn)如下圖Tab切換的功能

實(shí)現(xiàn)下圖的模態(tài)框功能

推薦閱讀更多精彩內(nèi)容

如何阻止事件冒泡？如何阻止默認(rèn)事件阎毅？