02-老马jQuery教程-jQuery事件处理

原创

老马

发布于 2017-12-27 10:46:53

6.4K0

发布于 2017-12-27 10:46:53

文章被收录于专栏：老马寒门IT 老马寒门IT老马寒门IT

1. 绑定简单事件

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值，但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

jQuery简单绑定事件的方式，可以让我绑定多个事件处理程序跟DOM2级绑定事件的方式一样.

如果需要了解DOM的教程参考地址：https://chuanke.baidu.com/v5508922-239160-1771112.html

1.1 简单绑定click事件

语法格式：click([[data],fn])
参数：
- data 可以省略，给可传入到函数fn处理。可以通过事件处理程序的事件对象的data属性获取此值。
- fn 事件处理程序。fn的内部作用域中this指向当前的DOM对象（注意不是jQuery的包装对象)
返回值： jQuery的包装对象！！！（链式编程的原理)

// 例如：
$('#btn').click(function(){});

1.2 jQuery简单绑定事件方式和DOM0级的区别

DOM0级绑定事件的方式

var btn = document.getElementById('btn');
btn.onclick = function(e) {
  console.log(1);
}
// 第二次赋值会把之前的覆盖掉。
btn.onclick = function(e) {
  console.log(2);
}

jQuery简单绑定事件的方式

var btn = $('#btn');
btn.click(function(){
  console.log(1);
});
// 多次绑定click不会覆盖。
btn.click(function(){
  console.log(2);
})

总结：DOM0级绑定事件的方式只能指定一个事件处理程序，不能指定多个。jQuery的可以绑定多次，而且相互不干扰。

上课代码：

 <input type="button" value="按钮" id="btn">
  <!-- dom绑定事件的方式 -->
  <script>
    window.onload = function() {
      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;
        });
      }
    };
  </script>

  <!-- jQuery绑定事件的方法 -->
  <script>
    $(function(){
      // 页面加载完成（dom树已经初始化好了，可以进行交互访问)
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('1234');
        console.log(this.value); // jQuery的事件处理程序中，this也执行绑定当前事件处理程序的dom对象
      });
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('12345');
      });
      $('#btn').click(function(e){ // e =jQuery.fn.event
        console.log('123456');
      });
      // jQuery绑定事件的事件方式：类似于我们的DOM2级绑定事件的方式
      // 可以绑定多个事件处理程序。而且执行顺序是按照注册顺序执行。
      // jQuery的事件处理程序中，this也执行绑定当前事件处理程序的dom对象
    });
  </script>

1.3 其他常用绑定简单事件的方法

方法名	实例	说明
blur([[data],fn])	$("p").blur();	当元素失去焦点时触发 blur 事件，这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
focus([[data],fn])	$("p").focus();	当元素获得焦点时，触发 focus 事件。
focusin([data],fn)	$("p").focusin();	当元素获得焦点时，触发 focusin 事件。当元素获得焦点时，触发 focusin 事件。
focusout([data],fn)	$("p").focusout();	当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况
change([[data],fn])	$('p').change();	当元素的值发生改变时，会发生 change 事件该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生
mousedown([[data],fn])	$("p").mousedown(fn);	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
mouseleave([[data],fn])	$("p").mouseleave(fn)	当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
resize([[data],fn])	$('p').resize(fn)	当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])	$('p').scroll(fn)	当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）
submit([[data],fn])	$("form").submit();	当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
keydown([[data],fn])	$('p').keydown(fn);	当键盘或按钮被按下时，发生 keydown 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keyup([[data],fn])	$('p').keyup(fn);	当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keypress([[data],fn])	$('p').keypress(fn);	当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
load([[data],fn])	$(window).load(fn);	当页面加载完成
unload([[data],fn])	$(window).unload(fn);	当页面卸载完成后，离开页面时。

所有的简单事件的返回值都是调用此方法的jQuery包装对象。

上课代码：

<div class="input-box">
  <input type="text" value="1">
  <input type="text" value="2">
  <input type="text" value="3">
  <input type="text" value="4">
</div>
<script>
  $(function(){
    var $inputArray = $('.input-box input');
    // jQuery构造函数传入选择器，返回的是一个jQuery的包装对象
    // 大部分的api都是在jQuery包装对象上
    // console.dir($inputArray);
    $inputArray.focus(function(e) {
      console.log(this.value); // this 就是当前的input标签
    });

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

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

1.4 触发这些简单事件

1.4.1 直接调用jQuery包装对象的简单绑定事件方法

$('#btn').click(); // 触发点击事件
$('#btn').dbclick(); // 触发双击事件
$('#btn').focus(); // 触发获取焦点事件
$('#btn').blur(); // 触发失去焦点事件
$('#btn').submit(); // 触发失去焦点事件

1.4.2 trigger触发事件

包装对象的trigger(type,[data])方法，可以帮助开发人员通过代码触发事件的执行，跟正常触发一样，会进行事件冒泡。

参数：
- type 触发的事件类型
- data 给事件处理程序的事件对象的额外参数，数组类型
返回值：依然是jQuery的包装对象
实例：

//提交第一个表单，但不用submit()
$("form:first").trigger("submit")

//给一个事件传递参数
$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

1.4.3 触发事件处理程序执行

触发事件处理程序执行函数：triggerHandler(type, [data])

参数：
- type:要触发的事件类型
- data:传递给事件处理函数的附加参数
说明这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别：
- 第一，他不会触发浏览器默认事件。
- 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
- 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
实例

$("input").triggerHandler("focus");

上课代码：

 <div>
    <input type="button" value="按钮" id="btn">
  </div>
  <script>
    $(function(){
      // 绑定事件
      $('#btn').click(function(e, a, b) {
        console.log(e, a, b);
      });

      $('div').click(function(e) {
        console.log('div is cliced');
      });

      // 触发事件。
      // $('#btn').click(); // 第一种触发点击事件的方式
      // 第二种触发点击事件,下面这种触发事件，可以触发任何事件，包括自定义事件。
      // $("#btn").trigger('click', ['1234', '3333']);

      // 触发事件处理程序执行，不触发事件本身
      $('#btn').triggerHandler('click', [2, 5]);
    });
  </script>

案例：省市选择

 <select name="pro" id="proSel"></select>
  <select name="city" id="citySel"></select>
  
  <script>
    // 第一步： 初始化好所有的省信息
     // 模拟从ajax获取的数据
    var data = [{
        name: "北京",
        cities: ["西城", "东城", "崇文", "宣武", "朝阳", "海淀", "丰台", "石景山", "门头沟", "房山", "通州", "顺义", "大兴", "昌平", "平谷", "怀柔",
          "密云", "延庆"
        ]
      },
      {
        name: "天津",
        cities: ["青羊", "河东", "河西", "南开", "河北", "红桥", "塘沽", "汉沽", "大港", "东丽", "西青", "北辰", "津南", "武清", "宝坻", "静海", "宁河",
          "蓟县", "开发区"
        ]
      },
      {
        name: "河北",
        cities: ["石家庄", "秦皇岛", "廊坊", "保定", "邯郸", "唐山", "邢台", "衡水", "张家口", "承德", "沧州", "衡水"]
      },
      {
        name: "山西",
        cities: ["太原", "大同", "长治", "晋中", "阳泉", "朔州", "运城", "临汾"]
      }
    ];

    $(function() {
      // 初始化省的数据
      initProSel();
    });

    // 省的下拉列表的初始化
    function initProSel() {
      var strHTMLArray = [];
      for(var i = 0; i < data.length; i++) {
        var proName = data[i].name;
        // <option value="北京">北京</option>
        strHTMLArray.push('<option value="'+ proName +'">' + proName +'</option>')
      }

      // 把拼接好的 标签放到  省的select下面
      // jQuery的html方法已经对ie8的 select设置innerHTML的bug做了相关处理。可以直接用。
      $("#proSel").html(strHTMLArray.join(''));

      // 给省的select标签绑定change事件
      $('#proSel').change(function() {
        // 当省选择完之后，要加载城市的信息到citySel
        // 拿到当前选择的省的名字
        // console.log($('#proSel').val());
        var proName = $('#proSel').val(); 
        for(var j = 0; j < data.length; j++) {
          if(data[j].name == proName) {
            var cities = data[j].cities;
            initCityes(cities);
          }
        }
      });

      // 触发省chagne的事件处理程序
      $('#proSel').triggerHandler('change');
    }

    // 初始化城市的信息
    function initCityes(cities) {
      var strHTMLArray = [];
      for(var i = 0; i < cities.length; i++) {
        // var cityName = cities[i];
        strHTMLArray.push('<option value="' + cities[i] + '">'+ cities[i] + '</option>')
      }

      $('#citySel').html(strHTMLArray.join(''));
    }
  </script>

2. 高级绑定事件方法

2.1 bind绑定事件的方式

语法：bind(type,[data],fn)，这个也是包装对象的方法。含义：为每个匹配元素的特定事件绑定事件处理函数。在绑定事件之前，一定要确保页面中的DOM元素已经就绪。如果没有就绪或者后面动态添加的DOM元素则不会动态更新事件处理程序。

参数：

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数

实例：

$("form").bind("submit", function() {
  return false; // 取消默认操作。
})

// 同时绑定多个事件
$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

//同时绑定多个事件类型/处理程序
$("button").bind({
  click: function(){
    $("p").slideToggle();
  },
  mouseover: function(){
    $("body").css("background-color","red");
  },
  mouseout: function(){
    $("body").css("background-color","#FFFFFF");
  }
});

上课代码：

<input type="button" value="按钮" id="btn">
  <input type="button" value="按钮" id="btn2">
  <script>
    $(function() {
      // jQuery 简单绑定事件
      // $('#btn').click(function(e) {
      // });

      // 第一种：绑定事件的方式 ****
      // jQuery高级绑定事件的方式
      $('#btn').bind('click', function(e) {
        console.log(this.value, e);
      });

      // 第一个参数： 事件类型，String
      // 第二个参数： 给事件处理程序的参数的data属性传递数据
      // 第三个参数： 事件处理程序的回调函数。
      // jQuery 的bind方法，传递三个参数
      $('#btn').bind('focus', '2222', function(e) {
        console.log(e.data);
      });

      // bind方法可以对同一个事件绑定多个事件处理程序。执行顺序就是绑定事件的顺序。
      $('#btn').bind('focus', '3333', function(e) {
        console.log(e.data);
      });

      // 第二种； 同时绑定多个事件
      // $('#btn2').bind('click focus', function(e) {
      //   console.log(e.type);
      // });

      // 第三种： 绑定一个事件对象， 最好不要用。
      $('#btn2').bind({
        click: function(e) {
          console.log('click');
        },
        mousedown: function(e) {
          console.log(e.type);
        }
      });
    });
  </script>

2.2 绑定事件只执行一次的事件处理程序

语法：$dom.one(type,[data],fn)

说明：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false.

参数：

type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:将要传递给事件处理函数的数据映射
fn:每当事件触发时执行的函数。

实例：

// 当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
  alert( $(this).text() );
});

2.3 动态元素的绑定

语法： $dom.live(type, [data], fn)

说明：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

参数:

type:一个或多个事件类型，由空格分隔多个事件。
data:传递给事件处理函数的附加参数
fn:要从每个匹配元素的事件中反绑定的事件处理函数

实例:

// 先绑定事件
$('.clickme').live('click', function() {
  alert("Live handler called."); 
});
// 然后再添加一个新元素：
$('body').append('<div class="clickme">Another target</div>');

2.4 事件委托绑定

语法： $dom.delegate(selector,[type],[data],fn)

说明：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）在选择元素上绑定一个或多个事件的事件处理函数。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

参数:

selector:选择器字符串，用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data:传递到函数的额外数据
fn:当事件发生时运行的函数

实例:

<!-- HTML 代码 -->
<div style="background-color:red">
  <p>这是一个段落。</p>
  <button>请点击这里</button>
</div>

// jQuery 代码:
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

以后推荐大家使用on的方式

上课代码：

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    $(function() {
      // 事件委托绑定的方式，第一个参数，是过滤子元素。
      // 第二个参数：事件类型
      // 第三个参数： 事件处理程序
      $('.list').delegate('li', 'click', function(e) {
        // dom
        // console.log(this.innerHTML); // innerText(ie), textContent(ff)
        //jq
        console.log($(this).text());
      });

      // jQuery:  click(简单绑定事件) 
      // bind : 普通绑定事件方法
      // one : 事件只执行一次。
      // live ： 对 动态创建的dom元素绑定事件。
      // delegate : 事件委托绑定事件。
    });
  </script>

2.5 大一统的on绑定事件方法

语法： $dom.on(events,[selector],[data],fn)

说明：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。

参数:

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

实例:

// �bind绑定事件
$("p").on("click", function(){
  alert( $(this).text() );
});

// 事件委托
$('div').on('click', 'p', function(e){
  console.log(this.innerHTML);
})

以后推荐大家使用on的方式

上课代码：

<input type="button" value="按钮" id="btn">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <script>
    $(function() {
      // on 替代 bind绑定事件的方式。
      $('#btn').on('click', function(e) {
        console.log(123);
      });

      // on 替代 live 动态创建元素绑定事件的方法
      // dom动态创建
      // var domP = document.createElement('p');
      // domP.innerHTML = "1234";
      // $(domP).on('click', function(e) {
      //   console.log($(this).text());
      // })
      // document.body.appendChild(domP);
      // jQuery 动态创建dom标签,
      var $p = $('<p>123445667</p>');

      // 给动态标签绑定事件
      $p.on('click', function(e) {
        console.log($(this).text());
      });

      // 给页面中的body添加$p标签
      $("body").append($p);

      // jQuery构造函数的用法复习
      // 1、接受一个回调函数，作为：document ready事件
      // 2、可以接受一个字符串作为 选择器进行选择页面中元素，返回jQuery包装对象。
      // 3、可以接受一个dom对象，将dom对象转换 jQuery包装对象
      // 4、可以接受一个html标签字符串，创建成jQuery包装对象


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

手风琴案例

<ul class="ac">
    <li class="ac-item on">
      <div class="ac-item-hd">头部1</div>
      <div class="ac-item-bd">内容1</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">头部2</div>
      <div class="ac-item-bd">内容2</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">头部3</div>
      <div class="ac-item-bd">内容3</div>
    </li>
    <li class="ac-item">
      <div class="ac-item-hd">头部4</div>
      <div class="ac-item-bd">内容4</div>
    </li>
  </ul>
  <script src="./lib/jquery-1.12.4.js"></script>
  <script>
    $(function() {
      $('.ac-item-hd').on('click', function(e) {
        // addClass 添加样式类
        $(this).parent().addClass('on');
        // removeClass是移除样式类
        $(this).parent().siblings('li').removeClass('on');// 隐式迭代。
      });
    });
  </script>

2.6 解绑事件

2.6.1 解绑bind绑定事件。

语法：$dom.unbind(type,[fn])

如果没有参数，则删除所有绑定的事件。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

实例：

// 解绑所有事件
$("p").unbind()

// 将段落的click事件取消绑定
$("p").unbind( "click" )

// 删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () {
  // 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

$("p").unbind("click", foo); // ... 再也不会被触发 foo

2.6.2 解绑live的事件（die)

语法： $dom.die(type, [fn])

元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)

参数说明：

如果不带参数，则所有绑定的live事件都会被移除。
如果提供了type参数，那么会移除对应的live事件。
如果也指定了第二个参数function,则只移出指定的事件处理函数。

实例：

function aClick() {
    $("div").show().fadeOut("slow");
}
$("#unbind").click(function () {
    $("#theone").die("click", aClick)
});

2.6.3 解绑delegate绑定的事件（undelegate）

语法： undelegate([selector,[type],fn])

删除由 delegate() 方法添加的一个或多个事件处理程序。

参数说明：

selector:需要删除事件处理程序的选择器。
type:需要删除处理函数的一个或多个事件类型。由空格分隔多个事件值。必须是有效的事件。
fn:要删除的具体事件处理函数。

实例：

// 从p元素删除由 delegate() 方法添加的所有事件处理器：
$("p").undelegate();
// 从p元素删除由 delegate() 方法添加的所有click事件处理器：
$("p").undelegate( "click" )

// 从form元素删除由 delegate() 方法添加的".whatever"命名空间：
var foo = function () {
  //.....
};
//用delegate() 方法给click事件增加".whatever"命名空间
$("form").delegate(":button", "click.whatever", foo);
$("form").delegate("input[type='text']", "keypress.whatever", foo);

2.6.4 解绑on的事件 (off)

语法：off(events,[selector],[fn])

如果一个简单的事件名称，比如提供"click"，所有这种类型的事件（包括直接和委派）从jQuery设置的元素上删除。

要删除特定的委派事件处理程序，提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件，使用特殊值 "**" 。

处理程序也可以删除handler参数指定名称的函数。

实例：

// 解绑所有的on的事件
$("p").off()
// 解绑所有的p的委托click事件，所有子元素都被取消绑定
$("p").off( "click", "**" )

// 解绑具体的某个事件处理程序
var foo = function () {
  // code to handle some kind of event
};

$("body").on("click", "p", foo);
// ... foo will no longer be called.
$("body").off("click", "p", foo);

上课代码:

<input type="button" value="解绑事件" id="btn">
  <input type="button" value="解绑命名空间事件" id="btnOffNameSpace">
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

  <script>
    $(function() {
      $('.list li').on('click', function(e) {
        console.log(this.innerHTML);
      });

      // 事件类型后面加 .demo 表示当前事件所属 demo命名空间
      $('.list li').on('click.demo', function(e) {
        console.log("==",this.innerHTML, "==");
      });

      $('.list li').on('click.demo', function(e) {
        console.log("===",this.innerHTML, "===");
      });


      $('#btn').on('click', function(e) {
        // 解绑on的click事件
        // $('.list li').off('click');

        // 解绑所有的事件
        // $('.list li').off();
      });

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

3. 事件对象

在DOM学习的时候我们很痛的一点就是早期的ie版本的浏览器和最新标准的浏览器的事件对象的获取及事件对象的属性直接都有些兼容问题。

事件对象获取兼容。

IE678：window.event
标准浏览器直接从事件处理程序的参数中获得事件对象e
e = e || window.event;

在jQuery的事件处理程序中，可以直接获取事件对象，所有浏览器都兼容。

3.1 事件对象的属性介绍

event.type 获取到事件的类型
event.target 获取到触发事件的元素。jQuery对其封装后，避免了各个浏览器不同标准的差异。
event.currentTarget 在事件冒泡阶段中的当前DOM元素
event.delegateTarget 此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件，事件处理程序附加在正在处理的元素的祖先上。
event.data 当前执行的处理程序被绑定的时候传递的参数。
event.pageX和event.pageY该方法的作用是获取光标相对于页面的x坐标和y坐标。
event.result 这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined
event.which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。值是unicode编码。
originalEvent dom的原始event对象。

3.2 事件对象的方法介绍

event.preventDefault()

阻止默认事件行为的触发。

event.stopPropagation()

防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

4. 自定义事件

jQuery对象的的on方法不仅仅能绑定DOM中已经定义的事件，而且还可以注册和触发非标准事件也就是自定义的事件。

绑定自定义事件：

var $btn = $('#btn');
// 绑定自定义事件myevent
$btn.on('myevent', function(e, a, b, c){
  console.log(e.type, a, b, c);
});

// 触发自定义事件，并给自定义事件传递参数
$btn.trigger('myevent', [1, 2, 3]);
// =>myevent 1 2 3

5. 事件命名空间

如果一个dom标签上添加的事件非常多的时候，有时候需要进行对这些事件做一些分类和统一处理。那么对绑定的事件分类就需要用到事件的命名空间。

$(function () {
  // 给按钮绑定多个jQuery的事件
  // 给按钮绑定点击事件，后面的.和demo就是命名空间
  $('#btn').on('click.demo', function (e) {
    console.log('click.demo');
  });

  // 绑定点击事件不带命名空间
  $('#btn').on('click', function (e) {
    console.log('click');
  });

  // 绑定blur事件带demo命名空间
  $('#btn').on('blur.demo', function (e) {
    console.log('blur.demo');
  });

  // $('#btn').off('.demo'); // 解绑所有的demo命名空间的事件  click.demo 和blur.demo
  // $('#btn').trigger('click');  // 触发所有的click事件，包括所有的命名空间的
  // $('#btn').trigger('click.demo');  // 只触发click.demo命名空间的事件
});

6. 合成事件

6.1 合成鼠标进入和离开的hover方法

jQuery为鼠标进入和离开提供了一个简便的绑定事件的方法hover(enter, leave)。hover方法接受两个参数，第一个参数是鼠标进入的事件处理程序，第二个是鼠标离开的事件处理程序。

用法:

$(function(){
  $('tr').hover(function(e){
    $(this).css('backgroundColor', '#ccc');
  },function(e){
    $(this).css('backgroundColor', '#fff');
  });
})

显示和隐藏学校信息案例：

 <div class="box">
    <div class="left"></div>
    <div class="aside"></div>
  </div>
  <script>
    $(function() {
      $('.box').hover(function(e) {
        // 鼠标移入， 让asiide标签显示
        $('.aside').css('display', 'block');
      }, function(e) {
        // 鼠标移出
        $('.aside').css('display', 'none');
      });
    });
  </script>

联系老马

本文章是老马jQuery视频的讲义和上课的代码。具体观看视频地址：https://qtxh.ke.qq.com/#tuin=1eb4a0

老马qq： 515154084 老马微信：请扫码

微信：Flydragon_malun

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

jquery

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

jquery