jQuery--事件处理

本篇文章主要讲解jQuery中进行事件处理的相关操作。

事件相关的概念

当一个页面元素上触发某个事件时，事件流如下图所示：

可以分为如下三个阶段：

• 捕获阶段: 从最外层的根元素html开始依次向下
• 到达阶段: 到达目标元素时
• 冒泡阶段: 依次向上回到根元素

DOM规范中规定，捕获阶段不会命中事件，但是实际上目前的各种浏览器对此都进行了扩展。

事件监听

当页面检测到某个事件发生时，如果要进行处理，需要绑定相应的事件处理函数。

bind方法

bind(eventType, [data], listener)方法用来绑定事件的处理函数。

$(funciton(){
  $("img").bind("click", function(){
    $("#show").append("<div>单击事件</div>")
  })
})

• eventType: 表示事件种类，用字符串表示，页面中事件种类包括blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
• listener: 表示事件的响应函数
• 当针对多种事件用相同的响应函数来处理时，多个eventType可以用空格分开

$("p").bind("mouseenter mouseleave", function(){
  $(this).toggleClass("over")
})

• 针对一些事件，jQuery还提供了专用的绑定方法，例如click等

one方法

one(eventType,[data], listener)方法表示响应函数只在事件首次触发时有效

$(function(){
  for(let i=0;i<10;i++){
    $(document.body).append($("<div>Click<br>Me!</div>"));
  }
  let iCounter = 1;
  $("div").one("click",function(){
    $(this).css({
      background: "#8f9999",
      color:"#fff"
    }).html("Clicked!<br>"+(iCounter++));
  })
})

JavaScript中事件处理

jQuery中不支持事件在捕获阶段的响应，如果在捕获阶段需要对事件进行响应，可以通过原生js的事件处理方法进行处理。
语法结构为：[object].addEventListener("event_name", fnHandler, bCapture)

• bCapture：为true表示在捕获阶段响应事件，false表示在冒泡阶段响应事件
• event_name: 表示事件类型
• fnHandler: 表示事件响应函数

事件删除

在jQuery中采用unbind()方法来删除事件。

删除所有事件

使用unbind()方法时，且不传入任何参数，表示删除该元素上所有的事件。

删除指定类型事件

unbind(eventType)方法表示，删除该元素上eventType事件的所有响应函数

删除某个事件的指定响应函数

unbind(eventType, handleFn)方法表示，删除该元素上eventType事件的handleFn响应函数

事件对象

在事件响应函数中，jQuery默认传入事件对象作为事件响应函数的形参。

$(function(){
    $("p").bind("click", function(event){
        let sPosPage = "(" + e.pageX + "," + e.pageY + ")";
        let sPosScreen = `(${e.screenX)}, ${e.screenY})`
        $("span").html(`<br>Page: ${sPosPage} <br>Screen: ${sPosScreen}`)
    })
})

通过事件对象，我们可以通过其属性获取一些事件相关的信息。

在jQuery响应函数中，return false可以同时阻止事件冒泡和事件默认行为，相当于同时调用了stopPropagation()和preventDefault()函数。

触发事件

页面中事件的触发，除了通过用户的相关操作行为触发外，还可以在代码中通过trigger(eventType)方法触发事件。

function Counter(oSpan){
    let iNum = parseInt(oSpan.text());
    oSpan.text(iNum+1);
}
$(function(){
    $("input:eq(0)").click(function(){
        Counter($("span:first"));
    });
    $("input:eq(1)").click(function(){
        Counter($("span:last"));
        $("input:eq(0)").trigger("click"); //触发别的元素的事件
    })
})

事件动态交换

hover事件的交替

hover(overFn, outFn)方法接收两个响应函数，用来处理over和out的时的事件响应

click事件的交替

clickToggle(inFun, outFn)方法接收两个响应函数，用来处理点击事件之间的交替响应

事件委托

事件委托允许将事件监听器附加到父元素上，与选择器匹配的所有后代元素都能够触发响应的监听事件，无论这些后代元素是已经存在还是在触发之后被添加。
$(selector).on(event, childrenSelector, function)

• selector表示父元素
• event表示响应的事件类型
• childrenSelector表示父元素下的子元素
• function表示响应函数

取消事件委托

使用$(selector).off(event, childSelector)方法取消selector下childSelector的event事件委托