1.浏览器事件
1.1 resize（）函数
方法描述：为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。
需求描述：当浏览器窗口的尺寸改变时，控制台输出“浏览器尺寸改变了”
$(window).resize(function () { console.log('浏览器尺寸改变了'); });
1.2 scroll()
方法描述：为 JavaScript 的 “scroll” 事件绑定一个处理函数，或者触发元素上的该事件。
需求描述：当浏览器窗口的滚动条滚动时，控制台输出“浏览器滚动条改变了”
body { height: 2000px; }
$(window).scroll(function () { console.log('浏览器滚动条改变了'); });
2.事件绑定
2.1 on()
方法描述：在选定的元素上绑定一个或多个事件处理函数。
需求描述：为按钮添加单击事件，当按钮单击的时候，向控制台输出“按钮被单击了”
$('button').on('click',function () { console.log('按钮被单击了'); });
2.2 off()
方法描述： 移除一个事件处理函数。
需求描述：为按钮添加单击事件，然后再解绑，这时候你在点击按钮看看是不是不会输出信息了
$('button').on('click',function () { console.log('按钮被单击了'); });
$('button').off('click');
3.事件委托
3.1 delegate()
方法描述：设置事件委托。
需求描述：为ul下的所有li添加单击事件，要求将该单击事件委托给ul，当单击li时，所对应的li背景变为红色
<ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul>
$('ul').delegate('li', 'click', function () { this.style.background = 'red'; });
3.2 undelegate()
方法描述：移除事件委托。
需求描述：要求移除上一节中设置的事件委托，然后在分别点击li进行验证是否移除事件委托
<ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul>
// 设置事件委托 $('ul').delegate('li', 'click', function () { this.style.background = 'red'; }); // 移除事件委托 $('ul').undelegate('click');
4.表单事件
4.1 focus()
方法描述：当失去焦点时触发所绑定的函数。
需求描述：当文本框获取焦点时，设置其背景为红色
<input type="text">
$(':text').focus(function () { $(this).css('background', 'red'); });
4.2 blur()
方法描述：当获取焦点时触发所绑定的函数。
需求描述：当文本框获取焦点时，设置其背景为红色，当文本框失去焦点时，设置其背景为绿色
<input type="text">
$(':text').focus(function () { $(this).css('background', 'red'); }); $(':text').blur(function () { $(this).css('background', 'green'); });
4.3 change()
方法描述：当内容改变时触发所绑定的函数。
需求描述：当文本框内容改变时，就向控制台输出当前文本框的内容
<input type="text">
$(':text').change(function () { console.log($(this).val()); });
需求描述：当选择框的内容改变时，就向控制台输出当前选中项的内容
<select> <option>河北</option> <option>河南</option> <option>上海</option> <option>北京</option> <option>广东</option> </select>
$('select').change(function () { console.log($(this).val()); });
4.4 select()
方法描述：当内容选择时触发所绑定的函数。
需求描述：当文本框的内容被选择时，就向控制台输出当前文本框的内容
<input type="text" value="123456">
$('input').select(function () { console.log($(this).val()); });
4.5 submit()
方法描述：当表单提交时触发所绑定的函数。
需求描述：当表单提交的时候，弹出对话框“表单提交了”
<form action="#"> <input type="submit"> </form>
$('form').submit(function () { alert('表单提交了'); });
5.鼠标事件
5.1click()
方法描述：当鼠标单击时调用所绑定的函数。
需求描述：为按钮绑定一个单击函数，然后点击按钮，在控制台输出“按钮被单击了”
$('button').click(function () { console.log('按钮被单击了'); });
5.2 dblclick()
方法描述：当鼠标双击时调用所绑定的函数。
需求描述：为按钮绑定一个双击函数，然后双击按钮，在控制台输出“按钮被单击了”
$('button').dblclick(function () { console.log('按钮被双击了'); });
5.3 mousedown()
方法描述：当鼠标左键按下的时候调用所绑定的函数。
需求描述：当鼠标左键按下的时候，控制台输出“鼠标左键按下”
$('button').mousedown(function () { console.log('鼠标左键按下'); });
5.4 mouseup()
方法描述：当鼠标左键松开的时候调用所绑定的函数。
需求描述：当鼠标左键松开的时候，控制台输出“鼠标左键松开”
5.5 mousemove()
方法描述：当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。
需求描述：鼠标在div内移动，获取当前鼠标相对div的位置坐标
$('.outer').mousemove(function (event) { console.log(event.offsetX, event.offsetY); });
6.键盘事件
6.1 keydown()
方法描述：当键盘按键按下的时候调用绑定的函数。
需求描述：当键盘按键按下的时候，输出当前的按键
$(':text').keydown(function (event) { console.log(event.key); });
6.2 keyup()
方法描述：当键盘按键松开的时候调用绑定的函数。
需求描述：当键盘按键松开的时候，输出当前的按键
$(':text').keyup(function (event) { console.log(event.key); });
