热门关键字:
jquery > jquery教程 > jquery教程 > jQuery基础(三)—事件篇笔记

jQuery基础(三)—事件篇笔记

339
作者:管理员
发布时间:2021/1/18 19:09:52
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3219
jQuery
事件:


点击:
click方法用于监听用户单击操作,click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发
$ele.click()
$ele.click( handler(eventObject) )
$ele.click( [eventData ], handler(eventObject) )
dbclick方法用于监听用户双击操作,dbclick又是由2个click叠加而来的
在同一元素上同时绑定 click 和 dbclick 事件是不可取的。各个浏览器事件触发的顺序是不同的
鼠标:
mousedown的快捷方法可以监听用户鼠标按下的操作
$ele.mousedown()
$ele.mousedown( handler(eventObject) )
$ele.mousedown( [eventData ], handler(eventObject) )
用event 对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3
mouseup快捷方法可以监听用户鼠标弹起的操作
mousemove的快捷方法可以监听用户移动的的操作
$ele.mousemove()
$ele.mousemove( handler(eventObject) )
$ele.mousemove( [eventData ], handler(eventObject) )
mouseover鼠标移入
$ele.mouseover()
$ele.mouseover( handler(eventObject) )
$ele.mouseover( [eventData ], handler(eventObject) )
mouseout鼠标移出
mouseenter与mouseleave用户操作鼠标是否有移到元素内部或是元素外部
事件冒泡的问题,子元素触发了mouseover,他会一直往上找父元素上的mouseover事件,如果父元素有mouseover事件就会被触发
mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发
hover用来给元素做一个简单的切换效果
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数
焦点:
focusin用户在点击聚焦的时候捕获
$ele.focusin()
$ele.focusin( handler )
$ele.focusin( [eventData ], handler )
focusout用户在点击失去焦的时候触发:
$ele.focusout()
$ele.focusout( handler )
$ele.focusout( [eventData ], handler )
同样用于处理表单焦点的事件还有blur与focus事件:
当它包含的元素input触发了focus事件时,它就产生了focusin()事件
focus()在元素本身产生,focusin()在元素包含的元素中产生
改变:
<input>元素,<textarea>和<select>元素的值都是可以发生改变的,开发者可以通过change事件去监听这些改变的动作
input元素监听value值的变化,当有改变时,失去焦点后触发change事件。对于单选按钮和复选框,当用户用鼠标做出选择时,该事件立即触发
select元素对于下拉选择框,当用户用鼠标作出选择时,该事件立即触发
textarea元素多行文本输入框,当有改变时,失去焦点后触发change事件
select事件只能用于<input>元素与<textarea>元素
.select()
$ele.select( handler(eventObject) )
$ele.select( [eventData ], handler(eventObject) )
提交表单
通过在元素上绑定submit事件,开发者可以监听到用户的提交表单的的行为
form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为,调用事件对象 e.preventDefault() 来处理, jQuery中用 return false
$ele.submit()
$ele.submit( handler(eventObject) )
$ele.submit( [eventData ], handler(eventObject) )
键盘:
keydown与keyup方法来监听键盘按下与松手
$elem.keydown( handler(eventObject) )
$elem.keydown( [eventData ], handler(eventObject) )
$elem.keydown()
keydown是在键盘按下就会触发,keyup是在键盘松手就会触发
keydown/keyup事件只是发送到具有焦点的元素上,不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的
keydown每次获取的内容都是之前输入的,当前输入的获取不到
keypress事件只能捕获单个字符,不能捕获组合键,无法响应系统功能键(如delete,backspace),不区分小键盘和主键盘的数字字符
事件:


on()的多事件绑定:
.on( events ,[ selector ] ,[ data ] )
.on( events ,[ selector ] ,[ data ], handler(eventObject) ) 利用了on的另一个事件机制委托的机制
卸载事件off()
$(“elem”).off()
$(“elem”).off(“mousedown”)
$(“elem”).off(“mousedown mouseup”)
事件对象:事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁


$(elem).on("click",function(event){
   event //事件对象
})


event.target
event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素
事件对象的属性和方法:


event.type:获取事件的类型
event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标
event.preventDefault() 方法:阻止默认行为,用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
event.stopPropagation() 方法:阻止事件冒泡
event.which:获取在鼠标单击时,单击的是鼠标的哪个键
event.currentTarget : 在事件冒泡过程中的当前DOM元素
trigger事件:


根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
$(’#elem’).trigger(‘click’);
trigger触发浏览器事件与自定义事件区别
自定义事件对象,是jQuery模拟原生实现的;
自定义事件可以传递参数
trigger事件还有一个特性:会在DOM树上冒泡
triggerHandler事件:


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






如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:html
友荐云推荐