jQuery 事件

事件

事件处理中最头疼的就是浏览器兼容问题，jQuery封装了很好的API，可以方便的进行事件处理。

在1.7之前的版本中 jQuery 处理事件有多个方法， (google 搜索: jquery live bind degelate)作用各不相同，后来统一的使用 on/off 方法。

.on( events [,selector ] [,data ], handler(eventObject) )

各个参数的意思：

1. events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如 "click", "keydown.myPlugin", 或者 ".myPlugin"
2. selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
3. data：当一个事件被触发时，要传递给事件处理函数的 event.data
4. handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行 return false 的话，那么该参数位置可以直接简写成 false
   例子：

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>

<script>
$('.box li').on('click', function(){
    console.log(1)
  var str = $(this).text()
  $('#wrap').text(str)
})

//等同于
$('.box>ul>li').click(function(){
    console.log(2)
  var str = $(this).text()
  $('#wrap').text(str)
})

//也可以这样写
$('.box li').on('click.hello', function(){
    console.log(3)
  var str = $(this).text()
  $('#wrap').text(str)
})
//命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('.box li').off('click.hello')

//可是用如下方法新增的元素是没绑定事件的
$('#btn').on('click', function(){
  var value = $('#ipt').val()
  $('.box>ul').append('<li>'+value+'</li>')
})

//我们可以用事件代理
$('.box ul').on('click', 'li', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

//上面代码相当于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
        //do something
    }
})

//绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
$('.box').on('click', {name: 'hunger'}, function(e){
    console.log(e.data)
})

.one( events [, selector ] [, data ], handler(eventObject) )

同 on，绑定事件，但只执行一次

.off( events [, selector ] [, handler ] )

移除一个事件处理函数

$('.box li').off('click')

.trigger( eventType [, extraParameters ] )

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('#foo').on('click', function() {
  console.log($(this).text())
});
$('#foo').trigger('click')

jQuery还提供了一些常见事件的快捷方式

image.png

jQuery 动画

.hide([duration ] [,easing ] [,complete ])

用于隐藏元素，没有参数的时候等同于直接设置 display 属性

$('.target').hide();
// 等同于 $('.target').css('display', 'none')


$('#book').hide(300, function() {
  alert('Animation complete.');
})


  $('#book').hide(300, 'linear', function() {
    alert('Animation complete.');
  })

.show( [duration ] [, easing ] [, complete ] )

用于显示元素，用法和hide类似

.toggle( [duration ] [, easing ] [, complete ] )

事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置

用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

渐变

.fadeIn( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素，参数含义和上面相同

$('#book').fadeIn('slow', function() {
// Animation complete
});

.fadeOut( [duration ] [, easing ] [, complete ] )

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

$('#book').fadeTo('slow', 0.5, function() {
  // Animation complete.
});

.fadeToggle( [duration ] [, easing ] [, complete ] )

通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});

滑动

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$('#book').slideDown('slow', function() {
    // Animation complete.
});

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

$('#book').slideUp('slow', function() {
    // Animation complete.
});

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display 属性值保存在 jQuery 的数据缓存中，所以 display 可以方便以后可以恢复到其初始值。

如果一个元素的 display 属性值为 inline，然后是隐藏和显示，这个元素将再次显示 inline。当一个隐藏动画后，高度值达到 0 的时候，display 样式属性被设置为 none，以确保该元素不再影响页面布局。

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
 // Animation complete.
  });
});

动画队列

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
//等价于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )

properties 是一个CSS属性和值的对象,动画将根据这组对象移动。