Jsイベントのバインディングはどうやって使いますか?
9019 ワード
まず、なぜjsイベントのバインディングを使うべきかを理解します.
私達が二つのwindow.onloadを使いたい時、役割を果たすのはいつも最後のwindow.onloadです.実は変数と同じ理屈です.もしvar a=5、a=7なら、出力枠はaを7と表示します.もちろんある人はwindow.onloadに置いてもいいと言っていますが、私達は実戦プロジェクトをする時に、みんなで分担して協力しています.すべての人は自分の担当する部分がありますが、みんなは自分のwindow.onloadを使いたいです.イベントバインディングは重要な役割を果たします!!
私達が二つのwindow.onloadを使いたい時、役割を果たすのはいつも最後のwindow.onloadです.実は変数と同じ理屈です.もしvar a=5、a=7なら、出力枠はaを7と表示します.もちろんある人はwindow.onloadに置いてもいいと言っていますが、私達は実戦プロジェクトをする時に、みんなで分担して協力しています.すべての人は自分の担当する部分がありますが、みんなは自分のwindow.onloadを使いたいです.イベントバインディングは重要な役割を果たします!!
window.onload = function() {
<span style="white-space:pre"> </span>var a = 3;
<span style="white-space:pre"> </span>var a = 6;
<span style="white-space:pre"> </span>alert(a);<span style="white-space:pre"> </span> a 6
};
window.onload = function() {
alert('a');
};
window.onload = function() {
alert('b');<span style="white-space:pre"> </span> window.onload b
};
IE
attachEvent( ， )，
detachEvent( ， )，
DOM
addEventListener( ， ， )
removeEventListener( ， ， )
IE ， ：
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn1');
//IE
//attachEvent( ， )
oBtn.attachEvent('onclick', function() {
alert('a');
});
oBtn.attachEvent('onclick', function() {
alert('b');
});
};
</script>
<input id="btn1" type="button" value=" "/>
</code></pre>
<br/>
<br/>
<p><span style="font-size:18px;"> <strong><span style="color:#ff0000;">Chrome</span></strong> </span><span style="font-size:18px;color:#ff0000;"><strong>FF</strong></span><span style="font-size:18px;"> （ ）：<br/></span></p>
<p><span style="font-size:18px;"/></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn1');
//FF、Chrome
//addEventListener( , , false)
oBtn.addEventListener('click', function() {
alert('a');
}, false);
oBtn.addEventListener('click', function() {
alert('b');
}, false);
};
</script>
<input id="btn1" type="button" value=" "/>
</code></pre>
<br/>
<br/> ？！ ta ， ！！！
<p><span style="font-size:18px;"> “ 、 、 ” ！ <strong><span style="color:#ff0000;"> </span></strong> ：</span></p>
<p><span style="font-size:18px;"/></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn1');
if(oBtn.attachEvent) {
oBtn.attachEvent('onclick', function() {
alert('a');
});
oBtn.attachEvent('onclick', function() {
alert('b');
});
}
else {
oBtn.addEventListener('click', function() {
alert('a');
}, false);
oBtn.addEventListener('click', function() {
alert('b');
}, false);
}
};
</script>
<input id="btn1" type="button" value=" "/>
</code></pre>
<br/>
<br/>
<p><span style="font-size:18px;"> ， ， ：</span></p>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<script type="text/javascript">
function myAddEvent(obj, ev, fn) {
if(obj.attachEvent) { // IE， IE
obj.attachEvent('on' + ev, fn);
}
else { // Chrome、FF
obj.addEventListener(ev, fn, false);
}
}
window.onload = function() {
var oBtn = document.getElementById('btn1');
// <span style="white-space:pre"> </span><span style="color:#ff0000;"><strong>myAddEvent()</strong></span>
myAddEvent(oBtn, 'click', function() {
alert('a');
});
myAddEvent(oBtn, 'click', function() {
alert('b');
});
};
</script>
<input id="btn1" type="button" value=" "/>
</code></pre>
<p style="font-size:18px;"><span style="font-size:18px;"><br/></span></p>
<span style="font-size:18px;"> ：</span>
<p><span style="font-size:18px;">1、 myAddEvent（）</span></p>
<p style="text-indent:0px;"><span style="font-size:18px;"><span style="text-indent:-48px;">2、 IE </span><span style="text-indent:-48px;">：</span><span style="font-family:' ';color:#3f3f3f;text-indent:-48px;"><span style="line-height:33.6758px;">attachEvent( ， )</span></span></span></p>
<p style="text-indent:0px;"><span style="font-family:' ';font-size:18px;color:#3f3f3f;text-indent:-48px;"><span style="line-height:33.6758px;">3、 Chrome、FF ：addEventListener（ ， ， ）</span></span></p>
<p style="text-indent:0px;"><span style="font-family:' ';font-size:18px;color:#3f3f3f;text-indent:-48px;"><span style="line-height:33.6758px;">【 2 3， ， ； ， if()...else...】</span></span></p>
<p style="text-indent:0px;"><span style="font-family:' ';font-size:18px;color:#3f3f3f;text-indent:-48px;"><span style="line-height:33.6758px;">4、 ok </span></span></p>
<p style="text-indent:0px;"><span style="font-family:' ';font-size:18px;color:#3f3f3f;text-indent:-48px;"><span style="line-height:33.6758px;"><br/></span></span></p>
<p><span style="font-size:18px;"><br/><br/><br/></span></p>
<p><span style="font-size:18px;"><br/><br/></span></p>
<p><strong><span/></strong></p>
<p><span style="font-size:18px;"><span/></span></p>
<p><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><br/></span></span></span></span></p>
<p><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><br/></span></span></span></span></p>
<p><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><br/></span></span></span></span></p>
<p><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><br/></span></span></span></span></p>
</div>
</div>
</div>
</div>