JQuery使用（二）（事件）

<ul style="list-style:none">    <li class="item1" id="one">坐<em>飞机</em></li>    <li class="item2" id="two">坦克</li>    <li class="item3" id="three">汽车</li>    <li class="item4" id="four">摩的</li>    <li class="item5" id="five">火车</li></ul> 

以下所有示例均以上述html为例。

.on()，该方法会为选取结果中的每一个元素添加事件监听器。

事件方法，例如：

var $listItems=$('li');$listItems.on('mouseover click',function(){      $listItems.children('em').remove();      $(this).append('<em class="priority">'+this.id+'</em>');});$listItems.on('mouseout',function(){      $(this).children('em').remove();});

对所有的li元素进行mouseover和click事件监听，触发事件时删除’em’元素，在触发事件的元素后天就’em’元素和id。并对所有元素进行mouseout事件监听，触发时删除’em’元素。

事件对象，例如：

$('li').on('click',function(e){      $('li em').remove();      var date = new Date();      date.setTime(e.timeStamp);      var clicked = date.toDateString();      $(this).append('the event is '+e.target.id);});

对li元素进行click事件监听，触发时删除’em’元素，并且将事件对象e传递进去，e代表事件发生的对象，e.target是获取事件发生的元素，e.target.id就是事件元素的id。

事件处理时过滤元素、传递数据，例如：

$('ul').on(     'click mouseover', //设置事件     ':not(#three)',  //过滤id为three的元素，该元素不触发事件     {status:'ok','name':'joker','password':'123'},//传递数据     function(e){          $('#five').html('content is :'+e.target.textContent+' & name is :'+e.data.name+' & password is :'+e.data.password);     });

.on()方法比之前的多了两个参数，一个是过滤，一个是传递的数据。用法代码中有，应该很好理解，不废话了。