jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

Posted 2020-09-18 BeginWeb—熊一乐

1.jQuery鼠标事件之click与dbclick事件

 

方法一：$ele.click()（不带参数）

 

<div id="test">点击触发<div>
$("ele").click(function(){
    alert(‘触发指定事件‘)
})
$("#test").click(function(){
    $("ele").click() //手动指定触发事件

});

 

方法二：$ele.click( handler(eventObject) )（带参数）

 

<div id="test">点击触发<div>
$("#test").click(function() {

    //this指向 div元素

});

 

方法三：$ele.click( [eventData ], handler(eventObject) )（可以带一个数据参数）

 

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

 

<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 传递数据
});

 

 

dblclick()的用法和click()的用法是类似的，可以参考以上click()的用法。

 

dbclick与click事件不同的是：

 

 

- click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发（PS:mousedown和mouseup下一节会讲到）

 

dblclick事件触发需要以下几点：

 

dblclick又是由2个click叠加而来的，所以dblclick事件只有在满足以下条件的情况下才能被触发

 

- 鼠标指针在元素里面时点击。

- 鼠标指针在元素里面时释放。

- 鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。

- 鼠标指针在元素里面时再次释放。

 

注意：在同一元素上同时绑定 click 和 dblclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dblclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度

 

2.jQuery鼠标事件之mousedown与mouseup事件

 

因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。两种方法用法类似

 

• 方法一：$ele.mousedown()

 

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少

 

<div id="test">点击触发<div>
$("ele").mousedown(function(){
    alert(‘触发指定事件‘)
})
$("#test").mousedown(function(){
    $("ele").mousedown()  //手动指定触发事件
});

 

• 方法二：$ele.mousedown( handler(eventObject) )

 

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

 

这样可以针对事件的反馈做很多操作了

 

<div id="test">点击触发<div>
$("#test").mousedown(function() {
    //this指向 div元素
});

 

• 方法三：$ele.mousedown( [eventData ], handler(eventObject) )

 

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

 

<div id="test">点击触发<div>
$("#test").mousedown(11111,function(e) {
    //this指向 div元素
    //e.date  => 11111 传递数据

});

 

 

mousedown事件触发需要以下几点：

 

- mousedown强调是按下触发

- 如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件

- 任何鼠标按钮被按下时都能触发mousedown事件

- 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

 

mouseup事件触发需要以下几点：

 

- mouseup强调是松手触发，与mousedown是相反的

- mouseup与mousedown组合起来就是click事件

- 如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件

- 任何鼠标按钮松手时都能触发mouseup事件

- 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

 

 

3.jQuery鼠标事件之mousemove事件

 

Query提供了一个mousemove的快捷方法可以监听用户移动的的操作

 

方法一：$ele.mousemove()（不带参）

方法二：$ele.mousemove( handler(eventObject) )（带参数）

方法三：$ele.mousemove( [eventData ], handler(eventObject) )(带一个数据参数)

 

mousemove事件触发需要以下几点：

 

- mousemove事件是当鼠标指针移动时触发的，即使是一个像素

- 如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

 

4.jQuery鼠标事件之mouseover与mouseout事件

 

事件来监听用户的移入移出操作，mouseover()与mouseout()事件，两者用法类似，

 

方法一：$ele.mouseover()

方法二：$ele.mouseover( handler(eventObject) )

方法三：$ele.mouseover( [eventData ], handler(eventObject) )

 

5.jQuery鼠标事件之mouseenter与mouseleave事件

 

操作鼠标是否有移到元素内部或是元素外部，因此jQuery提供了一个mouseenter和mouseleave的快捷方法可以监听用户移动到内部的操作

 

mouseenter事件和mouseover的区别

 

关键点就是：冒泡的方式处理问题

 

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

 

- p元素响应事件

- div元素响应事件

 

这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

 

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

 

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

 

6.jQuery鼠标事件之hover事件

 

对于这样的简单逻辑jQuery直接提供了一个hover方法，可以便捷处理

 

只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

 

$(selector).hover(handlerIn, handlerOut)

 

- handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

- handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

 

  $("p").hover(

        function() {

            $(this).css("background", ‘red‘);

        },

        function() {

            $(this).css("background", ‘#bbffaa‘);

        }

    );

 

7.jQuery鼠标事件之focusin事件

 

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件

 

同样的带参数和不带参以及数据参数

 

8.jQuery鼠标事件之focusout事件

 

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件

 

9.jQuery表单事件之blur与focus事件

 

div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。

 

focus()在元素本身产生，focusin()在元素包含的元素中产生

 

blur与focusout也亦是如此

 

10.jQuery表单事件之change事件

 

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

 

input元素

 

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

 

select元素

 

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

 

textarea元素

 

多行文本输入框，当有改变时，失去焦点后触发change事件

 

11.jQuery表单事件之select事件

 

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

 

select事件只能用于<input>元素与<textarea>元素

同样三个方法有参数和没有以及数据参数

 

12.jQuery表单事件之submit事件

 

方法一：$ele.submit()

 

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

 

<div id="test">点击触发<div>
$("ele").submit(function(){
    alert(‘触发指定事件‘)
})
$("#text").click(function(){
    $("ele").submit()  //指定触发事件

});

 

方法二：$ele.submit( handler(eventObject) )

 

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

 

这样可以针对事件的反馈做很多操作了

 

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(function() { //绑定提交表单触发
    //this指向 from元素
});

 

方法三：$ele.submit( [eventData ], handler(eventObject) )

 

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

 

<form id="target" action="destination.html">
  <input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //绑定提交表单触发
    //data => 1111 //传递的data数据
});

 

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

 

- <input type="submit">

- <input type="image">

- <button type="submit">

- 当某些表单元素获取焦点时，敲击Enter（回车键）

 

上述这些操作下，都可以截获submit事件。

 

这里需要特别注意：

 

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

 

jQuery处理如下：

 

$("#target").submit(function(data) {
  return false; //阻止默认行为，提交表单
});

 

13.jQuery键盘事件之keydown()与keyup()事件

 

keydown事件：

 

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法

 

//直接绑定事件
$elem.keydown( handler(eventObject) )
//传递参数
$elem.keydown( [eventData ], handler(eventObject) )
//手动触发已绑定的事件
$elem.keydown()

 

keyup事件：

 

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的

 

 

注意：

 

- keydown是在键盘按下就会触发

- keyup是在键盘松手就会触发

- 理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

 

14.jQuery键盘事件之keypress()事件

 

keypress事件与keydown和keyup的主要区别

 

- 只能捕获单个字符，不能捕获组合键

- 无法响应系统功能键（如delete，backspace）

- 不区分小键盘和主键盘的数字字符

 

总而言之，

 

KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

 

15.on()的多事件绑定

 

基本用法：.on( events ,[ selector ] ,[ data ] )

 

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

 

$("#elem").click(function(){})  //快捷方式
$("#elem").on(‘click‘,function(){}) //on方式

 

最大的不同点就是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 );

 

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

 

16.on()的高级用法

 

针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。这些方法的底层实现部分 还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的

 

委托机制

 

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

 

 //给body绑定一个click事件

    //没有直接a元素绑定点击事件

    //通过委托机制，点击a元素的时候，事件触发

    $(‘body‘).on(‘click‘, ‘a‘, function(e) {

       alert(e.target.textContent)

    })

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

 

17.卸载事件off()方法

 

- 通过.on()绑定的事件处理程序

- 通过off() 方法移除该绑定

 

绑定2个事件

 

$("elem").on("mousedown mouseup",fn)

 

删除一个事件

 

$("elem").off("mousedown")

 

删除所有事件

 

$("elem").off("mousedown mouseup")

 

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

 

$("elem").off()

 

18.jQuery事件对象的作用

 

ul有N个子元素li(这里只写了3个)，如果我要响应每一个li的事件，那么常规的方法就是需要给所有的li都单独绑定一个事件监听，这样写法很符合逻辑，但是同时有显得繁琐

 

因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的"事件委托"

 

回到上面的问题，既然事件对象是跟当前触发元素息息相关的，所以我们就能从里面相关的信息，从事件对象中找到 event.target

 

event.target

 

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托

 

简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

 

 //多事件绑定一

        $("ul").on(‘click‘,function(e){

           alert(‘触发的元素是内容是: ‘ + e.target.textContent)

        })

 

效果

- 点击：触发一

- 点击：触发二

- 点击：触发三

- 点击：触发四

 

19.jQuery事件对象的属性和方法

 

• event.type：获取事件的类型

 

触发元素的事件类型

 

• event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

 

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

 

• event.preventDefault() 方法：阻止默认行为

 

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

 

• event.stopPropagation() 方法：阻止事件冒泡

 

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

 

• event.which：获取在鼠标单击时，单击的是鼠标的哪个键

 

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

 

• event.currentTarget : 在事件冒泡过程中的当前DOM元素

 

冒泡前的当前触发事件的DOM对象, 等同于this.

 

• this和event.target的区别：

 

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

 

• .this和event.target都是dom对象

 

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

 

20.jQuery自定义事件之trigger事件

 

众所周知类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。

所以我们可以这样：

 

$(‘#elem‘).trigger(‘click‘);

 

在绑定on的事件元素上，通过trigger方法就可以调用到alert了，挺简单！

 

再来看看.trigger是什么？

 

简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

 

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

 

$(‘#elem‘).on(‘Aaron‘, function(event,arg1,arg2) {
    alert("自触自定义时间")
});
$(‘#elem‘).trigger(‘Aaron‘,[‘参数1‘,‘参数2‘])

 

trigger触发浏览器事件与自定义事件区别？

 

- 自定义事件对象，是jQuery模拟原生实现的

- 自定义事件可以传递参数

 

 

 

21.jQuery自定义事件之triggerHandler事件

 

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

 

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

 

triggerHandler与trigger的用法是一样的，重点看不同之处：

 

- triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()

- .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素

- 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理

- 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined