zoukankan      html  css  js  c++  java
  • jQuery事件总结

    jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作。

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

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

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

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

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

    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

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

    mousemove事件是当鼠标指针移动时触发的,即使是一个像素
    如果处理器做任何重大的处理,或者如果该事件存在多个处理函数,这可能造成浏览器的严重的性能问题

    jQuery当中同样提供了这样的事件来监听用户的移入、移出操作,mouseover()mouseout()事件

    经常需要知道用户操作鼠标是否有移到元素内部或是元素外部,因此jQuery提供了一个mouseentermouseleave的快捷方法可以监听用户移动到内部的操作

    mouseenter JavaScript事件是Internet Explorer专有的。由于该事件在平时很有用,jQuery的模拟这一事件,以便它可用于所有浏览器。该事件在鼠标移入到元素上时被触发。任何HTML元素都可以接受此事件。

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

    submit事件,监听下提交表单的这个动作。

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

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

    keydown是在键盘按下就会触发
    keyup是在键盘松手就会触发

    on(bind)推荐on绑定事件   事件委托原理是事件冒泡

    阻止事件冒泡w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

    阻止默认行为w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

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

    委托机制

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

    卸载事件off()方法
    通过.on()绑定的事件处理程序
    通过off() 方法移除该绑定

    著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。
    链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html
    来源:http://caibaojian.com

    event.target代表当前触发事件的元素,可以通过当前元素对象的一系列属性来判断是不是我们想要的元素(事件委托,通过事件对象区别触发元素)

            <div class="list">
                <ul>
                    <li>点击:触发第一个li</li>
                    <li>点击:触发第二个li</li>
                    <li>点击:触发第三个li</li>
                    <li>点击:触发第四个li</li>
                </ul>
            </div>
        <script type="text/javascript">
            //多事件绑定一
            $("ul").on('click',function(e){
               alert('触发的元素是内容是: ' + e.target.textContent)//点击依次弹对应的li
            })
        </script> 
    target 属性可以是注册事件时的元素,或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。

    event.type:获取事件的类型
    触发元素的事件类型
    $("a").click(function(event) {
      alert(event.type); // "click"事件
    });

    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)的使用;

    trigger() 方法触发被选元素的指定事件类型

    $(selector).trigger(event,[param1,param2,...])

    $(selector).trigger(eventObj)(规定事件发生时运行的函数。)

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

    $('#ele').on('say', function(event,param1,param2) {
      alert("自触自定义时间")
    });
    trigger触发浏览器事件与自定义事件区别:

    自定义事件对象,是jQuery模拟原生实现的
    自定义事件可以传递参数

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

    triggerHandlertrigger的用法是一样的,不同之处:

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

  • 相关阅读:
    数据库之联合查询和连接查询
    数据库要素 ER
    数据库事务
    关系数据库常用名词及解释
    数据库索引
    关于数据库主键和外键(终于弄懂啦)
    coredata 删除与更新
    Predicate Programming Guide
    NSPredicate
    coreData-Fetching Managed Objects
  • 原文地址:https://www.cnblogs.com/lhl66/p/7464675.html
Copyright © 2011-2022 走看看