孙肖宁

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