0121イベント

タイトル1:DOM 0イベントとDOM 2レベルはイベントリスニングの使い方にどのような違いがありますか?
DOM 0イベントリスニング方式:

インライン方式、CSSインライン様式に対して

イベントハンドラの具体的な実装は、ページの他の場所で

を定義する.

DOM 2イベントリスニング方式:addEventListener()、パラメータリスト:

イベントタイプ

イベント処理方法

ブールパラメータ、trueがキャプチャフェーズでイベントハンドラを呼び出すことを示す場合、falseであればイベントバブルフェーズで

を処理する.
使用例:

    var btnClick = document.getElementById('btnClick');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);

DOM 0とDOM 2イベントリスニングの違い:DOM 2はイベントに複数のプロセッサを追加できます
タイトル2:attachEventとaddEventListenerの違いは?

パラメータの数が異なる:attachEventは2つのパラメータ(イベント名とメソッド)を受信し、addEventListenerは3つのパラメータ(イベントタイプ、メソッド、ブール値)

を受信する.

の第1のパラメータの意味は異なる:addEventListenerの第1のパラメータはイベントタイプ(例えばclickload)であり、attachEventの第1のパラメータはイベント処理関数名(onclickonload)

を示す.

イベントハンドラの役割ドメインは異なります:addEventListenerの役割ドメインは要素そのものであり、thisはトリガ要素を指し、attachEventイベントハンドラはグローバル変数内で実行され、thisはwindowであるため、さっきの例は要素id

ではなくundefinedを返します.

一つのイベントに複数のイベントハンドラを追加する場合、実行順序が異なる:addEventListener追加は追加順序で実行され、attachEvent追加複数のイベントハンドラを追加する場合は順序が不規則(追加方法が少ない場合は追加順序の逆順序で実行されることが多いが、追加が多ければ不規則になる)

.
題目3:IE事件の泡立ちとDOM 2事件の伝播のメカニズムを解釈しますか?
IEイベントバブル:DOM 2イベント伝播:イベント開始時に最も具体的な要素によって受信され、その後、より具体的でない要素に段階的に伝播する
DOM 2イベント伝播メカニズム:イベント開始時に最大、非具体的な要素によって受信され、その後、小さな具体的な要素に段階的に伝達され、逆方向に伝達される
問題4:どのように事件の泡を阻止しますか?デフォルトのイベントをブロックするにはどうすればいいですか?
イベントの発泡を阻止するには、次の手順に従います.

標準イベントモデル:

stopPropagation()

IEイベントモデル:

cancelBubble   false，   true         

デフォルトのイベントをブロックするには、次の手順に従います.

標準イベントモデル:

preventDefault()

IEイベントモデル:

returnValue   true，  false          

タイトル5:各要素liをクリックすると、コンソールにその要素のテキスト内容を表示するコードがあります.互換性を考慮しない

    
   
    
   
    
  6 


//todo ...

コード:

    var list = document.querySelectorAll('.ct>li');
    for (var i = 0; i < list.length; i++){
        list[i].addEventListener('click', function(e){
            console.log(e.target.innerText);
        });
    }

テーマ6:補完コード、要求:
ボタンの先頭をクリックして追加すると、

要素の前に新しい要素が追加され、内容はユーザーが入力した非空文字列である.最後に追加をクリックすると、最後のli要素の後にユーザが入力した空でない文字列が追加される.各要素liをクリックすると、コンソールにその要素のテキスト内容が表示されます.

    
   
    
   
    
   


    
    

//    

コード:

    var parent = document.querySelector('.ct');
    var sAdd = document.querySelector('#btn-add-start');
    var eAdd = document.querySelector('#btn-add-end');
    var content = document.querySelector('.ipt-add-content');

    parent.addEventListener('click', function(e){
        console.log(e.target.innerText);
    })

    sAdd.addEventListener('click', function(e){
            var add = document.createElement("li");
            //var newContent = document.createTextNode(content.value);
            //add.appendChild(newContent);
            add.innerText = content.value;
            parent.insertBefore(add, parent.firstChild);
    });

    eAdd.addEventListener('click', function(e){
        var add = document.createElement("li");
        var newContent = document.createTextNode(content.value);
        add.appendChild(newContent);
        parent.appendChild(add);
    });

テーマ7:補完コード、要求:マウスがli要素の上に置くと、img-previewに現在のli要素のdata-img対応の画像が表示されます.

    
        1
    
        2
    
        3



//    

代码：

var overImg = document.querySelector('.ct');
var showImg = document.querySelector('.img-preview');

overImg.addEventListener('mouseover', function(e){
    var checkImg = document.querySelector('.img-preview img');
    if (!checkImg){
        var imgDiv = document.createElement('img');
        var ctDiv = document.querySelector('.img-preview');
        imgDiv.setAttribute('src', e.target.getAttribute('data-img'));
        ctDiv.appendChild(imgDiv);
    }
    else{
        imgDiv = checkImg;
        imgDiv.setAttribute('src', e.target.getAttribute('data-img'));
    }
    //showImg.innerHTML = '![](' + e.target.getAttribute('data-img') + ')'
})