ホームページ > 記事 > ウェブフロントエンド > JavaScript でイベントをバインドし、バインドを削除する 3 つの方法
JavaScript では、イベントをバインドするのに一般的に使用される 3 つの方法があります
最初の方法
関数は構造レイヤーに記述されます
これは非常に悪く、ページが非常にわかりにくくなり、動作と構造を理解できません分離
<input type="button" onclick="func();">
イベントをバインドする 2 番目の方法
利点: 動作と構造が分離され始める
短所:
2 番目のバインド方法では、一度に 1 つの処理関数のみをバインドできます
つまり、 .onclick = fn1; onclick = fn2 最後の効果は onclick = fn2 です
<select name="xueli" > <option value="">请选择学历</option> <option value="大学" >大学</option> <option value="中学">中学</option> <option value="初中">初中</option> <option value="小学">小学</option> </select> <form action=""> <p>Email:<input type="text" name="email"> 姓名:<input type="text" name="ming" > </p> </form>
document.getElementsByTagName('select')[0].onclick= function (){ alert('嘻嘻'); } document.getElementsByName('email')[0].onblur=function (){ alert('哈哈哈'); }
window.onload = function(){ var d = document.getElementById('school'); function fn1(){ alert('hello'); } function fn2(){ alert('world'); } d.onclick = fn1;//赋值操作 最终显示fn2 d.onclick = fn2; }
イベントをバインドする 3 番目の方法
以下書き方は問題ありませんが、DOMツリーに変数が2つ追加されます//错误写法1 window.onload = function(){ var d = document.getElementById('school'); function fn1(){//this此时指向window this.style.background = 'blue'; } function fn2(){//this此时指向window this.style.background = 'red'; } //写一个匿名函数 //最终的出现错误 d.onclick = function (){ fn1(); fn2(); //fn1 fn2是属性window的 实际上是这样 window.fn1() window.fn2() } }onclickを使用しなくなりました
window.onload = function(){ var d = document.getElementById('school'); d.fn1 = function (){//fn1是d的属性 最终this此时指向DOM对象 this.style.background = 'blue'; } d.fn2 = function (){//this此时指向DOM对象 this.style.background = 'red'; } //匿名函数 调用上面两个函数 d.onclick = function (){ this.fn1(); this.fn2(); } }バインディングを削除すると匿名関数が使えなくなります その際に匿名関数が生成され消滅します
window.onload = function(){ var d = document.getElementById('school'); //达到了一次绑定两个函数 d.addEventListener('click',function () {alert('blue');this.style.background ='blue'}); d.addEventListener('click',function () {alert('red');this.style.background ='red'}); }IE でイベントをバインドする 3 番目の方法
var fn1 = function () {alert('blue');this.style.background ='blue'}; var fn2 = function () {alert('red');this.style.background ='red'}; function adde(){ var d = document.getElementById('school'); d.addEventListener('click',fn1); d.addEventListener('click',fn2); } function reme(){ var d = document.getElementById('school'); //d.removeEventListener('click',fn1);//只剩fn1 d.removeEventListener('click',fn2); }
<div id="school"> </div> <input type="button" value="加事件" onclick="adde();"> <input type="button" value="减事件" onclick="reme();">