js跟jq的事件绑定以及解绑

事件绑定

基本的事件绑定

      var btn = document.getElementById('btn');
      // dom 0 级绑定事件的方式
      // 事件处理程序只能绑定一个，绑定多个事件处理程序后面的会覆盖前面的。
      btn.onclick = function() {
        console.log('1234');
        // this === 绑定事件的dom对象
      };
      // dom2级绑定事件的方式
      // 可以绑定多个事件处理程序，多个事件处理程序的执行顺序不能保证。
      if(btn.addEventListener) {
        btn.addEventListener('click', function(e) {
          console.log('1234');
        }, false);
      } else {
        // 兼容ie8及以下浏览器。
        btn.attachEvent('onclick', function() {
          var e = window.event;
        });
      }
      //jQuery绑定事件方法
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('123456');
      });

其他事件绑定

      var $inputArray = $('.input-box input');
      // jQuery构造函数传入选择器，返回的是一个jQuery的包装对象
      // 大部分的api都是在jQuery包装对象上
      // console.dir($inputArray);
      //★focus()方法
      $inputArray.focus(function(e) {
        console.log(this.value); // this 就是当前的input标签
      });

      // ★change()方法，简单绑定事件，接受两个参数的情况
      $inputArray.change('12334', function(e) {
        console.dir(e); // jQuery封装的事件对象。
        console.log(e.data);
      });

      // 事件方法被调用，但没有传递参数
      // 代码触发此事件，并模拟当前事件对应的操作。
      $inputArray[2].focus(); // 触发focuse事件，模拟获取焦点的操作。

On 替代bind方法/解绑用unbind

      // on 替代 bind绑定事件的方式。
      $('#btn').on('click', function(e) {
        console.log(123);
      });

on代替live动态创建元素绑定事件的方法/解绑用die

      var domP = document.createElement('p');
      //innerHTML(ie8)  textContent(firefox) 
      //Chrome支持前两者
      domP.innerHTML = "1234";         
      $(domP).on('click', function(e) {
        console.log($(this).text());
      })

On 替代delegate(委托事件)方法/解绑用undelegate

      // On 替代delegate方法
      $('.list').on('click', 'li', function(e) {
        console.log( $(this).html() );
      });

动态创建标签并绑定到树上

//js方法
      var domP = document.createElement('p');
      domP.innerHTML = "1234";
      // 给页面中的body添加p标签
      document.body.appendChild(domP);                        
//jq方法
      var $domP = $('<p class=" a1">122222</p>');
      // 给页面中的body添加$domP标签      
      $("body").append($domP);            

解绑事件 .off()

      // 解绑命名空间事件
      // event.name 给事件命名，方便解绑制定名的
      $("#btnOffNameSpace").on('click', function(e) {
      // 解绑了命名空间的事件，
      // 其他命名空间的事件或者没有命名空间的事件不受影响。
     $('.list li').off('click.demo');
      });