jQuery事件

事件

在页面加载后执行任务

时机选择

• 原生window.onload:完全下载完页面全部元素时触发
• $(document).ready()注册的事件，DOM就绪时触发，不用等文件下载完（没下载完时，图像宽高这样的属性不一定能访问）。
• 加载样式与执行代码： 将<link rel="stylesheet">标签和<style>标签放在<script>标签之前。确保JavaScript代码执行之前已经应用了样式。

基于一个页面执行多个脚本

• 函数引用 window.onload = doStuff;（只是函数标识）
• 函数调用 doStaff();（函数会立即执行）
• window.onload = doStuff; window.onload = doOtherStaff;第二个会覆盖第一个函数。
• $(document).ready(),不会覆盖，每次调用会向内部的行为队列添加一个新函数。页面加载完后这些函数会依次执行。

.ready()的简写形式

• $(document).ready(function(){//代码}) （推荐，语义更清楚）
• <=>
• $(function(){//代码})

处理简单的事件

简单的样式转换器

$(document).ready(function(){
    $('#switcher-large').on('click',function(){
        $('body').addClass('large');
    });
});

多次调用.on()即可为同一个事件追加更多行为。

利用事件处理程序的上下文

• 使用$(this)可以简化代码

$('#switcher button').on('click',function(){
    $('#swithcher button').removeClass('selected');
    $(this).addClass('selected');
   })

• removeClass()不加参数时默认移除所有类。
• this访问DOM元素属性：this.id.split('-')[1];

简写的事件

• .on('click',...) =>.click(...)
• 类似的blur,keydown,scroll等标准DOM事件。

显示和隐藏高级特性

.hidden{
    display: none;
}

toggleClass()能够根据相应的类是否存在来添加或者删除类。

$(document).ready(function(){
    $('#switcher h3').click(function(){
      $('#switcher button').toggleClass('hidden);
    });
});

事件传播

CSS规范加入了一个名叫:hover的伪类选择符，可以在鼠标悬停时，影响元素外观。 jQuery的.hover方法，可以在鼠标进入和离开元素时，通过js改变元素的样式(或者其他任意操作)。

.hover {
    curser： pointer;
    background-color: #afa;
}

$(document).ready(function({
   $('#switcher h3').hover(function(){
       $(this).addClass('hover');    //->鼠标指针进
   },function(){
       $(this).removeClass('hover'); //->鼠标指针出
   }); 
});
);

使用.hover()也意味着可以避免js中的事件传播导致的问题。

事件的旅行

• 事件捕获：事件从外层元素到具体元素。
• 事件冒泡：事件从具体元素到上层元素。
• DOM标准规定同时使用两种策略：首先事件从一般到具体逐层捕获，然后再通过冒泡返回DOM树的顶层。
• jQuery始终在模型的冒泡阶段注册事件处理程序，因此总是可以假定最具体的元素先获得响应。

事件冒泡的副作用

• mouseover和mouseout事件，最外层元素注册该事件，当离开（进入）里层元素时，会触发事件。
• mouseenter和mouseleave事件无论单独绑定还是在.hover()方法中组合绑定，都可以避免这些冒泡问题。
• 在其他情况下，需要从空间和时间上限制某个事件。

通过事件对象改变事件的旅程

//会发生事件冒泡的代码，当点击switcher div内部的按钮时也会触发事件
$(document).ready(function(){
   $('#switcher') .click(function(){
       $('#switcher button').toggleClass('hidden');
   });
});

事件对象和事件目标

//不会发生事件冒泡的代码，使用了事件对象event（不是必须命名成event可以是其他）
//event.target
$(document).ready(function(){
   $('#switcher') .click(function(event){ //->这里使用了事件对象
       if(event.target == this){          //->这里使用了事件目标
       $('#switcher button').toggleClass('hidden');
       }
   });
});

停止事件传播

//stopPropagation()
$(document).ready(function(){
   $('#switcher') .click(function(event){
       $('#switcher button').toggleClass('hidden');
   });
});
$(document).ready(function(){
   //按钮相关的操作
   $('#switcher-default').addClass('selected');
   var bodyClass = this.id.split(-)[1];
   $('body').removeClass().addClass(bodyClass);
   $(this).addClass('selected');
   
   event.stopPropagation();   //->这里取消掉了div内按钮的冒泡
});

阻止默认操作

.preventDefault()

• 事件传播和默认操作是相互独立的两套机制，如果想要同时停止这两种机制，可以在事件处理程序中返回false 等同于 同时使用.preventDefault()和.stopPropagation()

事件委托

利用冒泡的一项技术，通过在祖先元素上绑定事件，利用事件冒泡，在点击子元素时，事件会到达这个祖先元素。

$(document).ready(function(){
    $('#switcher').click(function(){
     if($(event.target).is('button')){ //.is()接收一个选择符表达式，如果当前对象至少一个匹配选择符，返回true
         var bodyClass = event.target.id.split('-')[1];
         $('body').removeClass().addClass('selected');
         $(event.target).addClass('selected');
         event.stopPropagation(); //这里不会阻止切换发生 event为switcher事件的内置对象，阻止冒泡只能阻止向其祖先元素冒泡。
     }  
    });
})

//改进 
$('#switcher').click(function(){
if($(event.target).is('button')){
    ...
}
else{
    $('#switchet button').toggleClass('hidden');
}
});

使用内置的事件委托功能

$('#switcher').on('click','button',function(){
    //...
})

• 第二个参数是选择符表达式，当event.target和选择符表达式匹配时，执行事件处理程序。
• .delegate() 和 .undelegate()

移除事件处理程序

$('#switcher').off('click')

为事件处理程序添加命名空间

//使.off()调用更有针对性，可以使用事件命名空间
$('#switcher').on('click.collapse',function(){//...})
$('#switcher').off('click.collapse');

附加的命名空间后缀.collapse对于事件处理系统而言，是不可见的。

重新绑定事件

$(document).ready(function() {
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
$('#switcher button').click(function() {
$('#switcher').off('click', toggleSwitcher);
if (this.id == 'switcher-default') {
$('#switcher').on('click', toggleSwitcher);
}
});
});

.one()只触发一次，随后立即解除绑定。

模仿用户操作

用户未操作时触发

.trigger()

$(document).ready(function() {
$('#switcher').trigger('click');
});

.click()

$(document).ready(function() {
$('#switcher').click();
});

响应键盘事件

$(document).ready(function() {
var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
};
$(document).keyup(function(event) {
var key = String.fromCharCode(event.which);
if (key in triggers) {
$('#switcher-' + triggers[key]).click();
}
});
});