jQuery 事件详解

  • jQuery 事件注册
  • jQuery 事件处理
  • jQuery 事件对象

语法:

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法:

1. events:一个或多个用空格分隔的事件类型,如\”click\”或\”keydown\” 。

2. selector: 元素的子元素选择器 。

3. fn:回调函数 即绑定在元素身上的侦听函数。

on() 方法优势1:

可以绑定多个事件,多个处理事件处理程序。

on() 方法优势2:

可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。

on() 方法优势3:

动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

如果有的事件只想触发一次, 可以使用 one() 来绑定事件。

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。

事件被触发,就会有事件对象的产生。

阻止默认行为:event.preventDefault() 或者 return false

阻止冒泡: event.stopPropagation()

jQuery中模拟用户操作

有时为了节省不想手动操作网页,但又想看到用户操作时的效果,可以用到jQuery提供的trigger方法。见下图代码

在不点击按钮时仍然想弹出this.value

我们只需要在后面加上.trigger(\”事件名称\”)就可以在不点击按钮的情形下看到用户点击按钮时看到的效果。这种方法的简写方法是用.事件名称代替trigger(\”事件名称\”),这种简写方法只适用于系统时间。

另外一种模拟方法是.triggerHandler,这种方法是基于.trigger的,只是增加了一些细节

他们之间的区别主要有4个:

1.trigger不会阻止默认行为,但triggerHandler会阻止默认行为

2.trigger会对所有的事件集合作用,而triggerHandler只对第一个作用

3.trigger是返回当前包含事件触发元素的jQuery对象可以连缀使用,而triggerHandler方法则返回当前事件执行的返回值,如果返回值不存在,则返回undefined

4.trigger在自定义事件中会冒泡,利于jQuery扩展于DOM的机制,但triggerHandler则不会。

posted on 2016-06-29 21:08 QiScript阅读(…) 评论(…)编辑收藏

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。