孙肖宁

jQuery中的事件机制
jQuery的事件机制,指的是:jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定、事件解绑...
扫描右侧二维码阅读全文
13
2018/05

jQuery中的事件机制

jQuery的事件机制,指的是:jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定、事件解绑、事件触发。

事件绑定

  • 简单事件绑定
    click(handler) 单击事件;
    blur(handler) 失去焦点事件;
    mouseenter(handler) 鼠标进入事件;
    mouseleave(handler) 鼠标离开事件;
    dbclick(handler) 双击事件;
    change(handler) 改变事件,如:文本框值改变,下来列表值改变等;
    focus(handler) 获得焦点事件;
    keydown(handler) 键盘按下事件;
    ......
  • bind方式(1.7版本以后的jQuery版本被on取代)
    作用:给匹配到的元素直接绑定事件。
    第一个参数:事件类型
    第二个参数:事件处理程序

    $("p").bind("click mouseenter", function(e){
        //事件响应方法
    });

    优缺点:

    • 可以同时绑定多个事件,比如:bind(“mouseenter mouseleave”, function(){})
    • 缺点:要绑定事件的元素必须存在文档中。
  • delegate方式(特点:性能高,支持动态创建的元素)
    作用:给匹配到的元素绑定事件,对支持动态创建的元素有效
    第一个参数:selector,要绑定事件的元素
    第二个参数:事件类型
    第三个参数:事件处理函数

    $(".parentBox").delegate("p", "click", function(){
        //为 .parentBox下面的所有的p标签绑定事件
    });

    优势:减少事件绑定次数提高效率,支持动态创建出来的元素绑定事件

  • on方式(最现代的方式,兼容zepto(移动端类似jQuery的一个库))
    jQuery1.7版本后,jQuery用on统一了所有的事件处理的方法
    作用:给匹配的元素绑定事件,包括了上面所有绑定事件方式的优点
    语法:
    第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
    第二个参数:selector, 执行事件的后代元素
    第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用
    第四个参数:handler,事件处理函数
    $(selector).on(events[,selector][,data],handler);
    表示给$(selector)绑定事件,当必须是它的内部元素span才能执行这个事件
    $(selector).on( "click",“span”, function() {});

    • 绑定多个事件
      表示给$(selector)匹配的元素绑定单击和鼠标进入事件
      $(selector).on(“click mouseenter”, function(){});

事件解绑

  • unbind() 方式
    作用:解绑 bind方式绑定的事件
    $(selector).unbind(); //解绑所有的事件
    $(selector).unbind(“click”); //解绑指定的事件
  • undelegate() 方式
    作用:解绑delegate方式绑定的事件
    $( selector ).undelegate(); //解绑所有的delegate事件
    $( selector).undelegate( “click” ); //解绑所有的click事件
  • off解绑on方式绑定的事件
    $(selector).off();// 解绑匹配元素的所有事件;
    $(selector).off("click");// 解绑匹配元素的所有click事件;
    $(selector).off( "click", "**" ); // 解绑所有代理的click事件,元素本身的事件不会被解绑。

事件触发

  • 简单事件触发
    $(selector).click(); //触发 click事件
  • trigger方法触发事件,触发浏览器行为
    $(selector).trigger(“click”);
  • triggerHandler触发 事件响应方法,不触发浏览器行为
    比如:文本框获得焦点的默认行为 $(selector).triggerHandler(“focus”);

jQuery事件对象介绍

  • event.data传递给事件处理程序的额外数据
  • event.currentTarget等同于this,当前DOM对象
  • event.pageX鼠标相对于文档左部边缘的位置
  • event.target 触发事件源,不一定===this
  • event.stopPropagation()阻止事件冒泡
  • event.preventDefault()阻止默认行为
  • event.type 事件类型:click,dbclick…
  • event.which 鼠标的按键类型:左1 中2 右3
  • event.keyCode 键盘按键代码
Last modification:May 13th, 2018 at 02:31 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment