javascript - attachEvent はこの JavaScript を使用できません

Question

イベントリスナーにはクロス互換性IE7以上が必要です。私が使用しているシステムのため、リスナーの作成には外部 js ファイルしか使用できません。すべてのテキストエリアボックスのルールを作成して、テキストをラップするときに高さを増やして、スクロールする必要がないことを意味します(すべてのテキストが表示された状態で印刷する必要があります)。これは addEventListener を使用して正常に動作しますが、THIS を使用できないため、attachEvent を使用してこれを一般的に動作させることはできません。

<html>
<style>
input[type="text"], textarea{ width:10%;}
</style>
<script>
function gettext(){
var x=document.getElementsByTagName("textarea");
var ent; 
for(i = 0; i < x.length; i++){
if (x.item(i).addEventListener) {
    x.item(i).addEventListener("keyup", function () {ChangeDepth(this)}, false)
    x.item(i).addEventListener("mouseup", function () {ChangeDepth(this)}, false)
    x.item(i).addEventListener("change", function () {ChangeDepth(this)}, false)
 }            
 else {
   ent = document.getElementById(x.item(i).id)
   x.item(i).attachEvent ("onkeyup", function () {ChangeDepth(ent)});
   x.item(i).attachEvent ("onmouseup", function () {ChangeDepth(ent)});
   x.item(i).attachEvent ("onchange", function () {ChangeDepth(ent)});

  }
}
}

function ChangeDepth(e){
var t = e.scrollHeight +'px';
if ((e.clientHeight < e.scrollHeight)||(e.clientHeight > e.scrollHeight)){e.style.height = t ;}
}
</script>
<body onload="gettext()">
<p>(Type in the textarea box when the text wraps it will increase the height of the box)<br />
<textarea name="c" cols="" rows="1" id="c"  ></textarea>
<br />
<textarea name="f" cols="" rows="1" id="f"  ></textarea></p>
</body>
</html>

これは、IE 8 の最後の textarea フィールドでのみ機能します。最後のオブジェクトの値しかないため、これを想定しています。次に何をすべきかわからない

score 3 · Accepted Answer

http://jsfiddle.net/KAy9a/

function wireUp() {
    console.log('wiring');
    var x = document.getElementsByTagName("textarea");
    var ent;
    for (i = 0; i < x.length; i++) {
        if (x.item(i).addEventListener) {
            x.item(i).addEventListener("keyup", ChangeDepth, false)
            x.item(i).addEventListener("mouseup", ChangeDepth, false)
            x.item(i).addEventListener("change", ChangeDepth, false)
        }
        else {
            x.item(i).attachEvent("onkeyup", ChangeDepth);
            x.item(i).attachEvent("onmouseup", ChangeDepth);
            x.item(i).attachEvent("onchange", ChangeDepth);

        }
    }
}

function ChangeDepth(e) {
    // instead of passing in the element, we get the Event object
    // we can then get the event target (or srcElement) to know where the event came from    
    e = e || event;
    e = e.target || e.srcElement;

    // the code below is the same you had before:
    var t = e.scrollHeight + 'px';
    if ((e.clientHeight < e.scrollHeight) || (e.clientHeight > e.scrollHeight)) {
        e.style.height = t;
    }
}

score 2 · Accepted Answer

古い IE イベントモデル (互換モードの IE 8 を含む) を使用するブラウザーのリスナー内の要素に設定するクロスブラウザーaddEvent関数を使用できます。this例えば

function addEvent(el, evt, fn) {

  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);

  } else if (el.attachEvent) {
    el.attachEvent('on' + evt, function() {fn.call(el);});
  }
}

コードで次のことができます。

function gettext() {
  var x = document.getElementsByTagName("textarea");
  var ent;

現在の要素への参照を格納する追加の変数を宣言します。

  var el;

  for (var i = 0; i < x.length; i++) {

i宣言する必要があることに注意してください。そうしないと、上記が実行されたときにグローバル変数になり、他のコードを台無しにする可能性があります。

    el = x[i];

NodeList getElementsByTagNameを返すため、インデックスによってメンバーにアクセスできます。参照の保存は (いつの間にか) 速くなり、後で入力する手間が減ります。

    addEvent(el, 'keyup', ChangeDepth);
    addEvent(el, 'mouseup', ChangeDepth);
    addEvent(el, 'change', ChangeDepth);
 }

リスナーではになるため、要素への参照を渡す必要はなくなりましたthis。addEventListenerがリスナーのアタッチに使用された場合、渡される最初の引数はイベントオブジェクトになることに注意してください。しかし、attachEvent使用された場所は渡されないので、を使用して取得しwindow.eventます。

function ChangeDepth(e) {

  // Get a reference to the related event object
  var e = e || window.event;

  // Get a reference to the element that called the listener
  var elementThatCalledListener  = this;

  ...

}

score 1 · Accepted Answer

これはうまくいくようです - JavaScript:

function load() {
    'use strict';

    function changeHeight(){
        var elem = document.activeElement;

        var heightStr = elem.scrollHeight +'px';
        if ((elem.clientHeight < elem.scrollHeight) || (elem.clientHeight > elem.scrollHeight))
        {elem.style.height = heightStr ;}
    }

    var x = document.getElementsByTagName("textarea");
    var i;

    for (i = 0; i < x.length; i++) {
        if (x[i].addEventListener) {
            x[i].addEventListener("keyup", changeHeight)
            x[i].addEventListener("mouseup", changeHeight)
            x[i].addEventListener("change", changeHeight)
        }
        else {
            x[i].attachEvent("onkeyup", changeHeight);
            x[i].attachEvent("onmouseup", changeHeight);
            x[i].attachEvent("onchange", changeHeight);
        }
    }
}

if (window.addEventListener) {
    window.addEventListener('load', load);
} else if (window.attachEvent) {
    window.attachEvent('onload', load);
}

HTML:

<!DOCTYPE html>
<style>
    input[type="text"], textarea {
        width: 10%;
    }
</style>
<p>(Type in the textarea box when the text wraps it will increase the height of the box)<br/>
    <textarea rows='1'></textarea>
    <br/>
    <textarea rows='1'></textarea>
</p>
<script type="text/javascript" src="legacyEventIE.js"></script>
</body>
</html>

作業コードへのリンクは次のとおりです。

http://www.quirkscode.com/flat/forumPosts/legacyEventIE/legacyEventIE.html

score 0 · Accepted Answer

var add_event_column_rubrics = function(){
    var id_current_event;
    var secect_class_column_rubrics = document.querySelector('.rubric_click');

    if(secect_class_column_rubrics.addEventListener)//other
        secect_class_column_rubrics.addEventListener('click',function(e){f_secect_class_column_rubrics(e)},false);
    else{if(secect_class_column_rubrics.attachEvent)//IE
        secect_class_column_rubrics.addEventListener('onclick',f_secect_class_column_rubrics);
}

    var f_secect_class_column_rubrics = function(e){
        e=e||window.event;
        e=e.target||e.srcElement;`enter code here`
        // console.log(e);//debug
        id_current_event = e.id;
        alert(id_current_event);
    };
};

score 0 · Accepted Answer

ループ内で関数を作成することは避けてください。これは、使用される変数がカプセル化関数にクロージャースコープであり、したがってすべての「新しい」関数に共通であるため、問題を引き起こします。

言い換えると：

var i, fns = [];
for(i = 0; i < 10; i++) {
    fns.push(function () { return i; });
}

すべてが返す10(または最終的には何でもi) 10 個の関数を作成します。

fn[0](); //is 10
fn[5](); //is 10
i = 5;
fn[5](); //is 5

これを修正するにはいくつかの方法があります。1 つ目は、関数ラッパーを使用して、動的変数を引数として渡すことです。そのようです：

ent = document.getElementById(x.item(i).id)
(function (my_ent, my_i) {
    x.item(my_i).attachEvent ("onkeyup", function () {ChangeDepth(my_ent)});
    x.item(my_i).attachEvent ("onmouseup", function () {ChangeDepth(my_ent)});
    x.item(my_i).attachEvent ("onchange", function () {ChangeDepth(my_ent)});
}(ent, i));

別の、間違いなくより良い解決策 (少なくとも JSLint に怒鳴られない解決策) は、ジェネレーター関数を作成することです。

var attachEvents = function (item, ent) {
    item.attachEvent ("onkeyup", function () {ChangeDepth(ent)});
    item.attachEvent ("onmouseup", function () {ChangeDepth(ent)});
    item.attachEvent ("onchange", function () {ChangeDepth(ent)});
};

//... Inside the for loop:
    else {
        ent = document.getElementById(x.item(i).id)
        attachEvents(x.item(i), ent);
    }

これは、それほど「重く」なく、イベントハンドラの作成に関連するデータを簡単に判断できるため、より優れています (たとえば、保守が簡単です)。

しかし、それにはもっと多くの変更が必要です。だからそれはあなた次第です。

javascript - attachEvent はこの JavaScript を使用できません

5 に答える 5

Related

Reference