首页 > 代码库 > jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）

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

2024-09-21 21:58:27   222人阅读

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="http://www.mamicode.com/Go" />
</form>
$("#target").submit(function() { //绑定提交表单触发
    //this指向 from元素
});

 
方法三：$ele.submit( [eventData ], handler(eventObject) )
 
使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题
 
<form id="target" action="destination.html">
  <input type="submit" value="http://www.mamicode.com/Go" />
</form>
$("#target").submit(11111,function(data) { //绑定提交表单触发
    //data =http://www.mamicode.com/> 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
 
 
 
 
 
 
 
 
 
 
 
 
 

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


联系
我们