jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如:"当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | hover | blur | unload |
jQuery 事件方法语法
在 jQuery 中 大多数 DOM 事件都有个等效的 jQuery 方法。
页面中指定个点击事件:
下一步是定义什么时间触发事件。您可以通过个事件函数实现:
常用的 jQuery 事件方法
$(document).ready()
$(document).ready() 方法允许 在文档完全加载完后执行函数。该事件方法在jQuery 语法 章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中 当点击事件在某个 <p> 元素上触发时 隐藏当前的 <p> 元素:
dblclick()
当双击元素时 会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件 或规定当发生 dblclick 事件时运行的函数:
mouseenter()
当鼠标指针穿过元素时 会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件 或规定当发生 mouseenter 事件时运行的函数:
mouseleave()
当鼠标指针离开元素时 会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件 或规定当发生 mouseleave 事件时运行的函数:
mousedown()
当鼠标指针移动到元素上方 并按下鼠标按键时 会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件 或规定当发生 mousedown 事件时运行的函数:
mouseup()
当在元素上松开鼠标按钮时 会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件 或规定当发生 mouseup 事件时运行的函数:
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时 会触发指定的第个函数(mouseenter);当鼠标移出这个元素时 会触发指定的第二个函数(mouseleave)。
focus()
当元素获得焦点时 发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时 该元素就会获得焦点。
focus() 方法触发 focus 事件 或规定当发生 focus 事件时运行的函数:
blur()
当元素失去焦点时 发生 blur 事件。
blur() 方法触发 blur 事件 或规定当发生 blur 事件时运行的函数:
千年的回眸
事件委托遇到困难交给自己的爸爸去处理 且不管你有多少个兄弟姐妹,大家都交由爸爸去统一解决问题 只需要一个处理程序即可
事件委托 就是把子元素的事件都委托给父元素(准确说应该是祖先元素)去处理
事件绑定
每个人的事都由自己去处理,兄弟姐妹之间互不干涉
也互不帮忙,新出生的弟弟妹妹也要自己去解决自己的问题
有多少个人就有多少个处理问题的过程和结果
事件绑定 是由每个元素自己去响应事件 各自为政
事件绑定简写形式
$(".div2 button").click(function () { $(".div1").scrollTop(0); })
$('.div2 button').bind('click', function () {}) //全方式
$('.div2 button').unbind('click', function () {})//解除绑定
//事件委托 三个参数的顺序 第一个是绑定事件 第二个是标签 第三个是方法
$('ul').on('click','li', function () { alert(666); });
$('button').click(function () {
var $ele=$('<li></li>') , len=$('ul li').length;
$ele.html((len+1)+111);
$('ul').append($ele);
});//页面载入 第一种方法
$(document).ready(function () {//等整个document执行完成 执行代码
$('ul li').html(5);
});//页面载入 第二种方法
$(function () {});
文人墨客
一.keypress,keydown,keyup的区别:
二.两种常用用法举例
案例1:获取按键代码或字符的ASCII码
案例2:传递数据给事件处理函数
语法:
举例: