자바스크립트에서는 이벤트 바인딩에 흔히 사용되는 세 가지 방법이 있습니다
첫 번째 방법
함수는 구조 레이어에 작성됩니다
매우 안타깝습니다. 페이지를 매우 혼란스럽게 만들고 동작과 구조를 분리할 수 없습니다.
<input type="button" onclick="func();">
이벤트를 바인딩하는 두 번째 방법
장점: 동작과 구조가 분리되기 시작
단점:
두 번째 바인딩 방법에서는 하나의 처리 기능만 한 번에 바인딩할 수 있습니다
즉, .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; }
이벤트를 바인딩하는 세 번째 방법
//错误写法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() } }
다음 방법은 문제가 없습니다. 하지만 DOM 트리는 두 개의 추가 변수를 추가합니다
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'}); }
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();">
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'); // IE6,7是后绑定的事件先发生 d.attachEvent('onclick',fn1); d.attachEvent('onclick',fn2); //fn2先发生 } function reme(){ var d = document.getElementById('school'); //d.deltachEvent('click',fn1);//只剩fn1 d.deltachEvent('click',fn2); }