• JavaScript 有一个非常重要的功能,就是事件驱动。当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发。

  • 为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。我们称它为简写事件

方法名 触发条件 描述
click(fn) 鼠标 触发每一个匹配元素的 click(单击)事件
dblclick(fn) 鼠标 触发每一个匹配元素的 dblclick(双击)事件
mousedown(fn) 鼠标 触发每一个匹配元素的 mousedown(点击后)事件
mouseup(fn) 鼠标 触发每一个匹配元素的 mouseup(点击弹起)事件
mouseover(fn) 鼠标 触发每一个匹配元素的 mouseover(鼠标移入)事件
mouseout(fn) 鼠标 触发每一个匹配元素的 mouseout(鼠标移出)事件
mousemove(fn) 鼠标 触发每一个匹配元素的 mousemove (鼠标移动)事件
mouseenter(fn) 鼠标 触发每一个匹配元素的 mouseenter (鼠标穿过)事件
mouseleave(fn) 鼠标 触发每一个匹配元素的 mouseleave (鼠标穿出)事件
keydown(fn) 键盘 触发每一个匹配元素的 keydown (键盘按下)事件
keyup(fn) 键盘 触发每一个匹配元素的 keyup (键盘按下弹起)事件
resize(fn) 文档 触发每一个匹配元素的 resize (文档改变大小)事件
scroll(fn) 文档 触发每一个匹配元素的 scroll (滚动条拖动)事件
focus(fn) 表单 触发每一个匹配元素的 focus (焦点激活)事件
blur(fn) 表单 触发每一个匹配元素的 blur (焦点丢失)事件
focusin(fn) 表单 触发每一个匹配元素的 focusin (焦点激活)事件
select(fn) 表单 触发每一个匹配元素的 select (文本选定)事件
change(fn) 表单 触发每一个匹配元素的 change (值改变)事件
submit(fn) 表单 触发每一个匹配元素的 submit (表单提交)事件
  • 对于原生事件对象，由于浏览器的差异，开发者总是需要做兼容性的处理；为了解决这个问题，jquery封装了自己的事件对象，解决了原生事件对象的兼容性问题，还另外提供了很多新的属性和方法。
  • jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消
  • jQuery 提供了一个事件对象的方法:event. preventDefault()；这个方法用来阻止默认行为

  • bind()方法无法动态绑定尚未存在的元素

  • 之后又出现 .live()（jQuery1.4.3 版本中废弃了）、.delegate()（jQuery1.7 版本中被整合替代） 等方法（目前如果使用 底层用的都是on）

  • 之前绑定事件的方法有三个。由于这三个的共存可能会造成一定的混乱, 为此 jQuery1.7 以后推出了 .on() 方法彻底摒弃前面三个。
    • events: 事件类型 。
    • selector: 触发事件的选择器元素的后代
    • data: 当一个事件被触发时要传递 event.data 给事件处理函数。
    • fn: 该事件被触发时执行的函数。
  • on还可以多个事件绑定同一个函数、多个事件绑定不同函数
  • 之前解除绑定事件的方法有三个。由于这三个的共存可能会造成一定的混乱, 为此 jQuery1.7 以后推出了 .off() 方法彻底摒弃前面三个。
    • events: 事件类型 。
    • selector: 一个最初传递到 .on() 事件处理程序附加的选择器
    • fn: 该事件被触发时执行的函数。
  • 不管是 .bind() 还是 .on() ,绑定事件后都不是自动移除事件,需要通过 .unbind()和 .off() 来手工移除。jQuery 提供了 .one() 方法,绑定元素执行完毕后自动移除事件,方法仅触发一次的事件。
    • type: 添加到元素的一个或多个事件。
    • data: 将要传递给事件处理函数的数据映射
    • fn**:** 每当事件触发时执行的函数。

  • jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法

  • jQuery.extend()为扩展jQuery类本身.为类添加新的方法

    // 为jQuery类添加类方法，可以理解为添加静态方法。
jQuery.extend({
    min: function(a, b) {
        return a < b ? a : b;
    },
    max: function(a, b) {
        return a > b ? a : b;
    }
});
jQuery.min(2, 3); //  2 
jQuery.max(4, 5); //  5

  • jQuery.fn.extend(object);给jQuery对象添加方法。jQuery.fn = jQuery.prototype。

    //就是为jQuery类添加“成员函数”。jQuery类的实例才可以调用这个“成员函数”。
$.fn.extend({
    alertWhileClick: function() {
        $(this).click(function() {
            alert($(this).val());
        });
    }
});
//$("#input1")是jQuery的实例，调用这个扩展方法
$("#input1").alertWhileClick();

  • 插件名推荐使用 jquery.[插件名].js ,以免和其他 js 或者其他库相冲突;

  • 局部对象附加 jquery.fn 对象上,全局函数附加在 jquery 上;

  • 插件内部 this 指向是当前的局部对象;

  • 可以通过 this.each 来遍历所有元素;

  • 所有的方法或插件,必须用分号结尾,避免出现问题;

  • 插件应该返回的是 jQuery 对象,以保证可链式连缀;

  • 避免插件内部使用 $ ,如果要使用,请传递 jQuery 进去。

  • $.noConflict();主动交出$的控制权
  • var NB = $.noConflict()交出控制权，但是我们还可以给他设置新的替代符号
版权声明：本文为z-bky原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/z-bky/p/17050904.html