JS---DOM---요소 바인딩 이벤트 도입, 요소에 여러 코드 바인딩, 호환 코드

1. 요소 바인딩 이벤트의 도입:

src로 여러 개를 직접 연결하여 마지막 하나만 실현합니다 (프로그램머2.js)

<input type="button" value="  " id="btn"/>
<script src="common.js">script>
<script src="programmer1.js">script>
<script src="programmer2.js">script>
<script>


  my$("btn").onclick=function () {
    console.log("     ");
  };
script>

 

2. 요소에 여러 이벤트 바인딩

요소에 대한 이벤트 바인딩(DOM): 하나지만 호환되지 않기 때문에 두 가지가 있습니다.
1. 대상.addeventListener(이벤트 유형, 이벤트 처리 함수,false); ----->구글 및 파이어폭스 지원, IE8 지원 안 함
2. 대상.attach Event ("on 있는 이벤트 유형", 이벤트 처리 함수) -----> 구글 지원 안 함, 불여우 지원 안 함, IE8 지원
 
 
 
 

2.1 대상.addeventListener(이벤트 유형, 이벤트 처리 함수,false); ----->구글 및 파이어폭스 지원, IE8 지원 안 함

 
사례: 버튼 바인딩 클릭 이벤트

매개 변수1: 이벤트의 유형 - 이벤트의 이름, on

이 없습니다

매개 변수2: 이벤트 처리 함수---함수(명명 함수, 익명 함수)

매개 변수 3: 볼 유형, 현재false

쓰기

    //               --
    my$("btn").addEventListener("click", function () {
      console.log("     ");
    }, false);
    my$("btn").addEventListener("click", function () {
      console.log("     ");
    }, false);
    my$("btn").addEventListener("click", function () {
      console.log("     ");
    }, false);
    my$("btn").addEventListener("click", function () {
      console.log("     ");
    }, false);

 

2.2 대상.attach Event ("on 있는 이벤트 유형", 이벤트 처리 함수) -----> 구글 지원 안 함, 불여우 지원 안 함, IE8 지원

매개 변수1: 이벤트 유형 - 이벤트 이름, on

매개 변수2: 이벤트 처리 함수---함수(명명 함수, 익명 함수)

    my$("btn").attachEvent("onclick", function () {
      console.log("     1");
    });

    my$("btn").attachEvent("onclick", function () {
      console.log("     2");
    });

    my$("btn").attachEvent("onclick", function () {
      console.log("     3");
    });

 

3. 원소 귀속 이벤트를 위한 호환 코드

  
  







  <span style="color: #008000;">//</span><span style="color: #008000;">     .       ,      ,     ,      </span>
  <span style="color: #0000ff;">function</span><span style="color: #000000;"> addEventListener(element,type,fn) {
    </span><span style="color: #008000;">//</span><span style="color: #008000;">             </span>
    <span style="color: #0000ff;">if</span><span style="color: #000000;">(element.addEventListener){
      element.addEventListener(type,fn,</span><span style="color: #0000ff;">false</span><span style="color: #000000;">);
    }</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span><span style="color: #000000;">(element.attachEvent){
      element.attachEvent(</span>"on"+<span style="color: #000000;">type,fn);
    }</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
      element[</span>"on"+type]=<span style="color: #000000;">fn;
    }
  }

  addEventListener(my$(</span>"btn"),"click",<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
    console.log(</span>" 1"<span style="color: #000000;">);
  });
  addEventListener(my$(</span>"btn"),"click",<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
    console.log(</span>" 2"<span style="color: #000000;">);
  });
  addEventListener(my$(</span>"btn"),"click",<span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
    console.log(</span>" 3"<span style="color: #000000;">);
  });


</span>