jquery 提供了许多的事件处理函数, 下面对其总结一下, 梳理一下知识点, 便于记忆和使用.
一, 鼠标事件
1. click(): 鼠标单击事件
- $div = $("div")
- $div.click(data,function (event) { // 点击盒子变蓝
- $(this).CSS({
- "background": "blue",
- });
- console.log(event);
- })
- $div = $("div") $div.click(data,function (event) { // 点击盒子变蓝 $(this).css({ "background": "blue", }); console.log(event); })
参数 function: 匿名函数有且只有一个默认的参数 event,event 输出事件相关的信息; 不允许有其他的参数, 可以不写.
参数 data: 有时候需要传递额外的数据给函数, data 可以是一个数组, 不需要可以省略.
扩展:
//event 参数可以获取事件的各种属性, 有几个常用
event.target: 获取触发事件的元素
- $div.click(function (event) {
- $(event.target).css({
- "background": "blue",
- });
- })
event.data: 获取事件传入的参数数据.
event.pageX: 获取鼠标光标点击距离文档左边 left 的距离;
event.pageY: 获取鼠标光标点击距离文档上边 top 的距离;
event.offsetX: 获取鼠标光标点击距离元素左边 left 的距离;
event.offssetY: 获取鼠标光标点击距离元素上边 top 的距离;
event.screenX: 获取鼠标光标点击距离屏幕 left 的距离;
event.screenY: 获取鼠标光标点击距离屏幕 top 的距离;
扩展 2: 外层加个 function 函数表示, 只有 dom 结构树全部加载完之后, 再执行 jquery 代码, 这样代码可以放在开头了
- <body>
- <script>
- $(function () {
- $div.click(data,function (event) { // 点击盒子变蓝
- $(this).css({
- "background": "blue",
- });
- console.log(event);
- })
- })
- </script>
- <div>1111</div>
- </body>
2. dblclick(): 鼠标双击事件
- $div = $("div")
- $div.dblclick()(function (event) { // 双击盒子变蓝
- $(this).css({
- "background": "blue",
- });
- })
参数和 click 的用法完全一样, event 同样可以获取众多的属性.
3. 鼠标进入和离开(进入子元素也触发)
mouseover(): 进入
mouseout(): 离开
- $div = $("div")
- $div.mouseover(function (event) {
- $(this).css({
- "background": "blue",
- });
- })
- $div.mouseout(function (event) {
- $(this).css({
- "background": "blue",
- });
- })
参数同上, 绑定后鼠标进入元素的子元素会再次触发.
4. 鼠标进入和离开(进入子元素不触发)
mouseenter() 鼠标进入
mouseleave() 鼠标离开
- $div = $("div")
- $div.mouseenter(function (event) {
- $(this).css({
- "background": "blue",
- });
- })
- $div.mouseleave(function (event) {
- $(this).css({
- "background": "blue",
- });
- })
参数同上, 绑定后鼠标进入和离开子元素不会再次触发.
5. hover(): 同时为 mouseenter 和 mouseleave 事件指定处理函数
- $div = $("div")
- // 鼠标进入和移出事件
- $div.hover(function (event) {
- $div.css({
- "background": "blue",
- })
- },function (event) {
- $div.css({
- "background": "red",
- });
- })
hover 可以同时加入两个 function, 第一个是鼠标进入触发, 第二个是移出触发.
前面不可以添加 data 参数, 否则报错.
6. 鼠标按下和松开
mouseup() 松开鼠标
mousedown() 按下鼠标
- $div = $("div")
- $div.mousedown(function (event) {
- $(this).css({
- "background": "blue",
- });
- console.log(event);
- })
- $div.mouseup(function (event) {
- $(this).css({
- "background": "blue",
- });
- console.log(event);
- })
参数同 click, 和点击事件 click 不同的是, click 在鼠标点击 (包括按下和松开) 后才触发事件, 这里是按下或松开就会触发.
7. mousemove() 鼠标在元素内部移动
同法和参数同上.
二, 键盘事件
*keypress(): 按下键盘(指的是按下)
- $(window).keypress([20],function (event) {
- $div.css({
- "background": "blue",
- });
- console.log(event.which);
- })
参数: 同鼠标事件, 第一个参数传递数据, function 默认参数 event 值按下键盘事件.
键盘事件需要绑定可获得焦点的元素, 如: input,body,html, 一般绑定窗口: window.
如果需要具体判断按下了那个按键, 使用 event.which, 返回键盘字母的 ascii 码.
注意: 如果按下不放开, 事件会连续触发.
* 按下和松开
keydown() 按下键盘
keyup() 松开键盘
- $(window).keydown([20],function (event) {
- $div.css({
- "background": "blue",
- });
- console.log(event);
- })
- $(window).keyup([20],function (event) {
- $div.css({
- "background": "blue",
- });
- console.log(event);
- })
参数同上.
keydown 和 keypress 方法区别在于, keypress 事件不会触发所有的按键, 比如 ALT,CTRL,SHIFT,ESC 等.
三, 焦点事件
* 元素获取和失去焦点
blur() 元素失去焦点
focus() 元素获得焦点
$put = $("input");
$put.focus(): 元素自动获取焦点
- $put.focus(function (event) {
- console.log(event);
- $div.css({
- "background": "blue",
- })
- })// 获取焦点后触发事件
- $put.blur(function (event) {
- console.log(event);
- $div.css({
- "background": "blue",
- })
- })// 失去焦点后触发事件
参数同 click;
焦点事件一般使用在 input 标签上, 其他的标签一般得不到焦点.
四, 表单事件
* submit(): 用户递交表单
- $(".form").submit(function (event) {
- alert("提交事件");
- console.log(event);
- // 阻止系统默认事件
- event.defaultPrevented();
- return false;
- })
submit 事件绑定在 form 表单上, 点击提交按钮时触发该事件, 可以对系统默认的提交进行拦截.
event.defaultPrevented();// 阻止系统提交数据
五, 其他事件
* ready():DOM 加载完成后执行
这个事件用来防止 js 报错, 每次引入 js 都要使用, 不在赘述.
* resize(): 浏览器窗口的大小发生改变触发事件
- $(window).resize(function () {
- console.log($(window).width());
- })
参数同 click, 这个事件需要绑定在 window 上才会生效, 用于监控窗口的变化.
* scroll(): 滚动条的位置发生变化
* change(): 表单元素的值发生变化
- $put.change(function () {
- $div.css({
- "background": "blue",
- });
- })
当表单元素如单选框, 多选框, 文本框等值发生变化时触发.
* unload() : 用户离开页面
- $(document).unload(function () {
- $div.css({
- "background": "blue",
- });
- console.log("likai");
- })
六, 通用的绑定事件和解绑方法
* bind(): 绑定
- $(function(){
- $('div').bind('mouseover click', function(event) {
- alert($(this).html());
- });
- });
参数: 第一个参数为需要绑定的事件的名字, 可以绑定多个事件, 之间用空格隔开; 第二个参数是处理函数.
* unbind(): 解绑
- $(function(){
- $('#div1').bind('mouseover click', function(event) {
- // $(this).unbind(); 解绑所有事件
$(this).unbind('mouseover'); 解绑指定事件
});
});
参数同 bind.
* on(): 绑定和委托都可用的方法
- $("div").on(event,childSelector,data,function);
- // 四个参数
- $(function(){
- $('div').on('mouseover click', function(event) {
- $(this).css({
- "background": "blue",
- });
- });
- });
参数:
event, 需要绑定的事件, 多个事件用空格隔开;
function: 事件的处理方法.
childSelector: 选择需要委托的元素, 用于委托事件.
data: 额外的传参.
* off(): 解绑
- $(function(){
- $('#div1').on('mouseover click', function(event) {
- // $(this).off(); 解绑所有事件
$(this).off('mouseover'); 解绑指定事件
});
});
* one(): 绑定一次自动解绑
如果需要触发事件一次后就自动失效, 比如: 按钮点击一次后 就失效使用这个方法.
- $(function(){
- $('div').one('mouseover click', function(event) {
- $(this).css({
- "background": "blue",
- });
- });
- });
注意: 当一次性绑定多个事件时, 多个事件相互是独立的, 即如果有一个事件被触发, 那么这个事件解绑, 对另外没有被触发的事件没有影响.
七, 自定义和主动触发事件
说明: 对于系统没有提供的事件, 可以自己定义并主动触发.
- $div.bind("abc",function () {
- $(this).css({
- "background": "blue",
- });
- })
- $div.trigger("abc");
trigger(): 触发事件的方法; 这种方式类似协程.
八, 事件的两大特征运用:
1. 事件的冒泡:
定义: 一个元素标签如 div, 在上面触发某种事件, 如单击; 如果 div 上没有定义单击事件或者定义了单击事件, 但返回值不是 false, 即没有阻止冒泡; 那么事件会向父级传递, 每一个定义了单击事件的父级都会被触发事件, 直到到达 document 或 window.
注意: 冒泡是事件的固有属性(自定义不适用), 适合所有的系统事件.
作用: 允许多个事件被击中到父级处理, 减少绑定次数, 提高性能.
- $(function(){
- var $box1 = $('.father');
- var $box2 = $('.son');
- var $box3 = $('.grandson');
- $box1.click(function() {
- alert('father');
- });
- $box2.click(function() {
- alert('son');
- });
- $box3.click(function(event) {
- alert('grandson');
- // event.stopPropagation(); 阻止冒泡
- });
- $(document).click(function(event) {
- alert('grandfather');
- });
- })
- ......
- <div class="father">
- <div class="son">
- <div class="grandson"></div>
- </div>
- </div>
说明: 上面代码界面, 单击 "grandson" 的 div, 所有事件都会被触发;
如果要阻止事件冒泡, 使用 stopPropagation();
扩展: 合并阻止操作
- event.stopPropagation();// 阻止冒泡
- event.preventDefault();// 阻止默认行为
- // 合并写法:
- return false;
实际开发中, 一般把阻止冒泡和阻止默认行为合并起来写.
2. 事件委托
定义:
利用冒泡原理, 将要处理相同事件的子元素的事件委托给父级, 从而极大减少事件绑定的次数, 提高性能.
委托事件:
- delegate():
- $(function(){
- $list = $('list');
- $list.delegate('li', 'click', function(event) {
- $(this).css({background:'red'});
- });
- })// 给列表下面的每个 li 元素的事件委托给 list 列表.
参数: 第一个参数是需要委托的元素, 采用 css 选择器的写法, 默认从一级子元素开始; 第二个参数时要委托的事件, 可以是多个, 之间用空格隔开, 第三个参数是处理函数.
event 指触发事件的那个对象.
- on():
- $(function(){
- $list = $('list');
- $list.on('click', 'li', function(event) {
- $(this).css({background:'red'});
- });
- })// 给列表下面的每个 li 元素的事件委托给 list 列表.
参数:
第一个是需要委托的事件, 多个用空格隔开;
第二个是需要委托事件的子元素;
第三个是触发处理函数.
one(): 委托触发一次自动取消委托
- $(function(){
- $('div').one('click',"li" function(event) {
- $(this).css({
- "background": "blue",
- });
- });
- });
说明: 参数用法和 on 事件一样.
取消委托
- undelegate():
- $list.undelegate();// 选择器找到委托对象取消委托
使用 undelegate()方法取消委托, 所有的子元素的委托都将被取消.
- off():
- $list.off("click","li");
总结:
每一个事件相当于一个协程, 异步操作;
所有的事件并列处理, 事件不要嵌套事件, 否则会出现重复绑定.
可以进行事件委托尽量使用委托, 减少系统资源消耗.
补充实例:
动态给 ul 添加 li 标签的时候, li 标签原来已经绑定了 click 事件, 但新添加的标签 click 不起作用, 那么需要委托绑定 delegate()
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <input class="btn" type="button" value="添加">
- <ul>
- <li>11</li>
- <li>22</li>
- <li>33</li>
- </ul>
- <script src="jquery.js"></script>
- <script>
- $(function () {
- $(".btn").click(function () {
- $("ul").append("<li>88</li>")
- });
- $("li").click(function () {
- alert('123')
- })
- });
- </script>
- </body>
- </html>
原来的代码可以弹出, 新增的 li 标签不能弹出 123
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <input class="btn" type="button" value="添加">
- <ul>
- <li>11</li>
- <li>22</li>
- <li>33</li>
- </ul>
- <script src="jquery.js"></script>
- <script>
- $(function () {
- $(".btn").click(function () {
- $("ul").append("<li>88</li>")
- });
- $("ul").delegate('li','click',function () { // 将所有的 li 标签委托绑定给 ul
- alert('123')
- })
- });
- </script>
- </body>
- </html>
将 li 标签委托绑定给 li
来源: http://www.bubuko.com/infodetail-2629473.html