jQuery-事件

发表于 | 分类于 | 热度 | 字数统计 2,398

越到后面才越看出jQuery的强大，这些封装确实方便了不少，纯js实现的话真是太可怕啦…
虽然有人说jQuery已经跟不上潮流了，但是依然很多很多在用
前端更新真是……py2与py3

2333333
理论知识够了，动手能力还很弱鸡

鼠标事件

用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的

1
2
3
4
5
6
7
8
9
10
<div id="test">点击触发<div>

$("#test").click(function() {
    //this指向 div元素
});

$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 传递数据,可选参数
});

注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件

判断鼠标点击其实就是判断鼠标按下、抬起的这个过程，都有相应的方法mousedown和mouseup，他们的用法和click基本一致，其中注意的是：用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
PS:键盘也一样有keydown和keyup，还可以用KeyPress来获取输入，不过不能获取特殊按键，会有1个字符的延迟

1
2
3
$('.target1').keypress(function(e) {
	$("em").text(e.target.value)
});

还有一个使用率比较高的就是鼠标移动事件，也就是mousemove方法，用法和上面也是一致的，这个不要做太复杂的运算，因为像素点只要变化就会触发

在学JS的时候，有两个方法叫移入移出事件，就是onmouseover()与onmouseout()事件~jQuery当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与mouseout()事件，两者用法类似，使用方法还是同上

用交互操作中，经常需要知道用户操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作，感觉和mouseover没啥区别啊，但是不可能同一个事件蛋疼的写出两种调用，区别它们的关键点就是：冒泡的方式处理问题，就是说：mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

1
2
3
<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果p、div元素它们都设置了mouseover事件，p触发后会传递给div，也就是它们的mouseover事件都被触发了，而如果是mouseenter就不会
所以为了避免冒泡问题，一般会用mouseenter处理，并且一般我们使用都是成对出现的，所以jQuery还给了一个简便的方法：$(selector).hover(handlerIn, handlerOut)

还有一个事件就是聚焦事件，使用focusin方法，失去焦点就是focusout了，用法和上面一致

表单事件

鼠标事件说过focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件，它们的本质区别就是：是否支持冒泡，blur与focus是不会冒泡的
既然是表单那就应该有输入（改变），也就有相应的事件，就是change了，用法都懂，一般就是传个函数就可以了
选择事件select，这个可以传数据进去，和上面鼠标事件是一样的，只是浏览器的默认行为也会调用它

表单提交是个很重要的事件，常常在这进行校验，错误则返回false就是不提交，减轻服务器压力，使用的是submit方法，使用上也差不多，需要注意的只有：

1
2
3
$("#target").submit(11111,function(data) { //绑定提交表单触发
    //data => 1111 //传递的data数据
});

具体能触发submit事件的行为：

  • <input type="submit">
  • <input type="image">
  • <button type="submit">
  • 当某些表单元素获取焦点时，敲击Enter（回车键）

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

事件绑定

jQuery on()方法是官方推荐的绑定事件的一个方法。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。
基本用法：.on( events ,[ selector ] ,[ data ] )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#elem").on('click',function(){}) //on方式

// 多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });

// 多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

// 将数据传递到处理程序
function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
// 使用三个参数
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

on的高级用法-委托机制：.on( events ,[ selector ] ,[ data ], handler(eventObject) )

1
2
3
4
5
6
7
8
9
<div class="left">
    <p class="aaron">
        <a>目标节点</a>
    </p>
</div>

<script>
  $("div").on("click","p",fn)
</script>

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

既然有绑定也就有卸载，绑定用on卸载就是off

1
2
3
4
5
6
7
8
9
//绑定2个事件
$("elem").on("mousedown mouseup",fn)

//删除一个事件
$("elem").off("mousedown")

//删除所有事件
$("elem").off("mousedown mouseup")
$("elem").off()  //或者

事件对象

事件中会涉及到很多方法，有的方法参数中出现了Event这个词，它就是事件对象了

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素，通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。
event.type：获取事件的类型
event.pageX 和event.pageY：获取鼠标当前相对于页面的坐标，通过这2个属性，可以确定元素在当前页面的坐标值，坐标系从左上角开始的，不受滚动条的影响
event.preventDefault()方法：阻止默认行为，可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
event.stopPropagation() 方法：阻止事件冒泡
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.currentTarget : 在事件冒泡过程中的当前DOM元素，相当于this

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this 和 event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

自定义事件

原生事件比如click都是浏览器提供，并且需要和用户交互的，如果使用jQuery可以进行人为的干预，比如调用$('#elem').trigger('click'); 就可以触发绑定在该元素的click事件
此外还可以进行自定义：

1
2
3
4
$('#elem').trigger('Aaron',['参数1','参数2'])
$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义事件")
 });

自定义事件对象，是jQuery模拟原生实现的，并且可以传递参数
trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡
如果是自定义的事件对象，那么就有一个不可避免的问题：event无法完美的实现，毕竟不是原生的
自定义事件也是通过改造现有的实现的，所以使用时由于冒泡机制，可能会触发其他事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替
triggerHandler与trigger的用法是一样的，重点看不同之处：

  • triggerHandler不会触发浏览器的默认行为，.triggerHandler( “submit” )将不会调用表单上的.submit()
  • .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
  • 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
  • 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined
喜欢就请我吃包辣条吧！

评论框加载失败，无法访问 Disqus

你可能需要魔法上网~~