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); });