JavaScript_jquery에서 jQuery를 사용하여 이벤트를 바인딩하는 여러 가지 방법 요약

개발 과정에서 DOM 요소에 일부 이벤트를 추가해야 하는 경우가 많습니다.

먼저 멋진 버튼을 작성하세요

//引入JQuery
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<span id="tips"></span>
<input type="button" id="btn1" value="OK1" onclick="alert('hello btn1');">
<input type="button" id="btn2" value="OK2" click-type="listener">
<input type="button" id="btn3" value="OK3" click-type="listener">
<input type="button" id="btn4" value="OK4">
<input type="button" id="btn5" value="OK5">
<div id="btn-list">
<input type="button" id="btn6" value="OK6">
<input type="button" id="btn7" value="OK7">
</div>

효과는 다음과 같습니다.

1. btn1에서 직접 onclick을 사용합니다. 이 방법은 간단하고 대략적입니다. 장점은 버튼이 클릭 이벤트에 바인딩되어 있음을 명확하게 알 수 있다는 것입니다. 요소).onclick

이 방법의 단점은 요소가 하나의 인라인 이벤트만 지정할 수 있다는 것입니다. 이 코드를 추가하면 onclick="alert('hello btn1');"이 덮어쓰기됩니다.

(function(){
  var _btn1 = document.getElementById('btn1'),
    _tips = document.getElementById('tips');
    _btn1.onclick=function(){
      _tips.innerHTML='hello world~';
    };
     
})();

2. 이벤트를 여러 요소에 바인딩하려면 기본 JS를 사용하세요. IE 9 이전 버전에서는 addEventListener 대신 attachmentEvent를 사용해야 합니다

(function(){
  var _btns=document.querySelectorAll("[click-type=listener]"), i = 0, len = _btns.length;
     for (i; i < len; ++i) {
      var _btn=_btns[i];
      _btn.addEventListener("click", function (evt) {
        var target = evt.target
        alert('hello '+target.id);
      });
    }
 
})();

3. 두 번째 방법은 더 간단한 로직과 더 높은 품질을 제공하지만 더 많은 코드가 필요하고 IE의 호환성을 고려해야 합니다. 우리 프로젝트는 일반적으로 JQuery를 사용하므로 다음과 같이 작성할 수 있습니다.

$("#btn4").click(function(){
  alert("hello btn4");
});
 
$("#btn5").on("click",function(){
  alert("hello btn5");
});

위에 사용된 on 및 바인딩 방법은 동일한 효과를 갖습니다.

4. 하나 이상의 이벤트를 여러 요소에 바인딩하려면 on을 사용하세요.

$("#btn-list").on("click","input",function(evt){
  alert("hello "+ evt.target.id);
});

이것은 내 개발에서 가장 일반적으로 사용되는 방법입니다. 여기에는 장점이 있습니다.

/*动态添加几个button*/
(function(){
  for(var i=8;i<10;i++){
    $("#btn-list").append("<input type='button' id='btn"+i+"' value='OK"+i+"'>");
  }
})();

이런 방식으로 요소를 동적으로 추가할 때 클릭 이벤트가 자동으로 추가될 수 있습니다. 예를 들어 우리는 종종 AJAX를 사용하여 일부 데이터를 로드하고 이를 페이지에 동적으로 추가하므로 훨씬 간단합니다.

또한 네이티브 JS를 사용하여 이벤트 위임을 구현하는 것이 상대적으로 간단합니다.

<ul id='list'>
  <li>css</li>
  <li>js</li>
  <li>html</li>
</ul>

(function(){
  var a=document.getElementById('list');
    a.addEventListener('click',function(e){
    var b = e.target; 
    alert(b.innerHTML);
  },false);
})();