为了账号安全,请及时绑定邮箱和手机立即绑定
  • jQuery鼠标事件:

    • click与dbclick事件://ele代表元素,handler代表回调方法

    1)click方法一:$ele.click()

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

    <div id="test">点击触发<div>

    $("ele").click(function(){

        alert('触发指定事件');

    })

    $("#test").click(function(){

         $("ele").click();  //手动指定触发事件 

    });

    2)click方法二:$ele.click( handler(eventObject) )

    绑定$ele元素,每次$ele元素触发点击操作会执行回调 handler函数,这样可以针对事件的反馈做很多操作了,方法中的this是指向了绑定事件的元素

    <div id="test">点击触发<div>

    $("#test").click(function() {

        //this指向 div元素

    });

    3)click方法三:$ele.click( [eventData ], handler(eventObject) )

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

    <div id="test">点击触发<div>

    $("#test").click("提示信息",function(e) {

        //this指向 div元素

        //e.data  => 提示信息 -> 传递数据

    });


    • click事件触发需要以下几点:

    1)click事件其实是由mousedown与mouseup 2个动作构成

    2)点击的动作只有在松手后才触发


    • dblclick事件触发需要以下几点:

    1)dblclick又是由2个click叠加而来的

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

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

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

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

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


    • mousedown与mouseup事件:

    1)方法一:$ele.mousedown()

    2)方法二:$ele.mousedown( handler(eventObject) )

    3)方法三:$ele.mousedown( [eventData ], handler(eventObject) )


    • mousedown事件触发需要以下几点:

    1)mousedown强调是按下触发

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

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

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


    • mouseup事件触发需要以下几点:

    1)mouseup强调是松手触发,与mousedown是相反的

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

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

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

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


    • click与mousedown的区别:

    click事件其实是由mousedown于mouseup 2个动作构成,所以点击的动作只有在松手后才触发


    • mousemove事件:

    1)方法一:$ele.mousemove()

    2)方法二:$ele.mousemove( handler(eventObject) )

    3)方法三:$ele.mousemove( [eventData ], handler(eventObject) )


    • mousemove事件触发需要以下几点:

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

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


    • mouseover(移入)与mouseout(移出)事件://mouseover 事件要考虑到事件冒泡,也就是父级元素也有绑定mouseover事件的话,那么事件触发的同时也会触发父级元素的事件

    1)方法一:$ele.mouseover()

    2)方法二:$ele.mouseover( handler(eventObject) )

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


    • mouseenter与mouseleave事件://mouseenter 事件不需要考虑到事件冒泡

    1)方法一:$ele.mouseenter()

    2)方法二:$ele.mouseenter( handler(eventObject) )

    3)方法三:$ele.mouseenter( [eventData ], handler(eventObject) )


    • hover事件://selector代表选择器

    $(selector).hover(handlerIn, handlerOut)

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

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


    • focusin和focusout事件://元素获得焦点和元素失去焦点

    1)方法一:$ele.focusin()

    2)方法二:$ele.focusin( handler(eventObject) )

    3)方法三:$ele.focusin( [eventData ], handler(eventObject) )

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

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

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

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

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

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


    查看全部
  • trigger触发浏览器事件与自定义事件区别?

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

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


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

    查看全部
  • event.type:获取事件的类型

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

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

    我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

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

    event.which:获取在鼠标单击时,单击的是鼠标的哪个键

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

    this和event.target的区别:

    .this和event.target都是dom对象

    查看全部
  • event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素



    查看全部
  • 根据on绑定事件的一些特性,off方法也可以通过相应的传递组合的事件名,名字空间,选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时,只有与这些参数完全匹配的事件处理函数才会被移除

    查看全部
  • keypress事件与keydown和keyup的主要区别

    • 只能捕获单个字符,不能捕获组合键

    • 无法响应系统功能键(如delete,backspace)

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


    查看全部
  • eydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本,得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本

    当浏览器捕获键盘输入时,还提供了一个keypress的响应,这个跟keydown是非常相似,这里使用请参考keydown这一节,具体说说不同点

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

    • 只能捕获单个字符,不能捕获组合键

    • 无法响应系统功能键(如delete,backspace)

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

    总而言之,

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


    查看全部
  • 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
    这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
    select事件只能用于<input>元素与<textarea>元素


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

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

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

    $(selector).hover(handlerIn, handlerOut)
    • handlerIn(eventObject):当鼠标指针进入元素时触发执行的事件函数

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


    查看全部
  • mouseenter事件只会在绑定它的元素上被调用,而不会在后代节点上被触发


    查看全部
  • 用交互操作中,经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件,jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作

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

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

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


    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的基础语法 2、jQuery事件处理

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!