zoukankan      html  css  js  c++  java
  • Javascript和jquery事件--事件对象event

    1、  事件对象event

    对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。而jq的解释是事件处理(事件对象、目标元素的获取,事件对象的属性、方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一。

    你的网页需要兼容不同的浏览器,除了样式的不同外,更致命的就是事件对象的差异。使用console.log(e),你就可以看到相关的参数。虽然jq已经对兼容进行过封装,但是我还是想进行了解,所以先看看关于js的事件对象。

    (1) Js的事件对象event

    A.通过event,可以获取到鼠标键盘这些设备的状态,如:

      altKey, ctrlKey, metaKey, shiftKey这四个布尔值,获得的是事件发生时‘ALT’‘CTRL’‘META’‘SHIFT’键的状态。

      PageX,PageY获得鼠标相对页面的位置。

      clientX,clientY获得的是鼠标相对浏览器的位置。

      screenX,screenY获得的是鼠标相对当前页面屏幕的位置

      offsetX,offsetY是鼠标在触发事件的元素中的位置。

      x,y等同screenX,screenY。

      button获得鼠标点击的是哪个键,在谷歌浏览器中0-左键,1-滚轮,2-右键(当然右键事件浏览器有默认事件,下面可能会提到自定义右键事件)。

    B.除此之外,还有一些比较有用的属性

      cancelBubble,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。和阻止冒泡相类似,但有所不同。

      fromElement,toElement主要用于mouseover 和 mouseout 事件

      keyCode,应该与keypress 事件,键盘事件有关,下文会研究。

      returnValue 可以阻止事件继续触发,比如超链接,表单提交,和return false相关但有所差别

      srcElement,target,触发事件的源头

      currentTarget,绑定监听器的事件,和target的区别,比如,一个是最先冒泡的元素,一个可以是冒泡过程的任何一个元素。

      timeStamp         返回事件生成的日期和时间。

      type  返回当前 Event 对象表示的事件的名称。

      bubbles     返回布尔值,指示事件是否是起泡事件类型。

      eventPhase       返回事件传播的当前阶段。

      initEvent() 初始化新创建的 Event 对象的属性。

      preventDefault()       通知浏览器不要执行与事件关联的默认动作。

      stopPropagation()     不再派发事件。

      isTrusted属性返回一个布尔值,表示该事件是否为真实用户触发。用户触发的事件返回true,脚本触发的事件返回false。

      stopImmediatePropagation()方法阻止同一个事件的其他监听函数被调用。

        如果同一个节点对于同一个事件指定了多个监听函数,这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了stopImmediatePropagation方法,其他的监听函数就不会再执行了。

    C.一些常用的兼容写法

      获得event对象兼容性写法

        var event = e||window.event

      获得target兼容型写法

        var target = event.target||event.srcElement

      阻止浏览器默认行为兼容性写法

        event.preventDefault ? event.preventDefault() : (event.returnValue = false);

      阻止冒泡写法

        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

    (2)  Jq的事件对象

    一些常用的属性

      event.type:获取事件的类型,触发元素的事件类型

      event.pageX 和 event.pageY:获取鼠标当前相对于页面的坐标,可以确定元素在当前页面的坐标值,是以页面为参考点,不随滑动条移动而变化

      event.target:获取触发事件的元素

          js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;

         this和event.target都是dom对象,可以转换为jquery对象:$(this)和$(event.target)

      event.which:获取在鼠标单击事件中鼠标的左、中、右键(左键1,中间键2,右键3),在键盘事件中键盘的键码值

      event.currentTarget : 获取冒泡前的当前触发事件的DOM对象, 等同于this

      event.preventDefault() :阻止默认行为,可以用 event.isDefaultPrevented() 来确定preventDefault是否被调用过了

      event.stopPropagation() :阻止事件冒泡,事件是可以冒泡的,为防止事件冒泡到DOM树上,不触发任何前辈元素上的事件处理函数,可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了

    参考:

    https://www.cnblogs.com/wuln/p/6251486.html

    https://www.cnblogs.com/songyaqi/p/5204143.html

    https://blog.csdn.net/knock_me/article/details/79646105

    https://blog.csdn.net/weixin_41342585/article/details/80659736

    https://blog.csdn.net/baihuaxiu123/article/details/53148780(重要)

    https://blog.csdn.net/u012528184/article/details/41724275

    (returnVlaue=false和reture false)

    当你深入了解,你就会发现世界如此广袤,而你对世界的了解则是如此浅薄,请永远保持谦卑的态度。
  • 相关阅读:
    SpringBoot学习笔记(14)----应用监控-HTTP方式
    SpringBoot学习笔记(13)----使用Spring Session+redis实现一个简单的集群
    SpringBoot学习笔记(12)----SpringBoot实现多个 账号轮询发送邮件
    SpringBoot学习笔记(11)-----SpringBoot中使用rabbitmq,activemq消息队列和rest服务的调用
    SpringBoot学习笔记(8)-----SpringBoot文件上传
    SpringBoot学习笔记(7)-----CORS支持解决跨域问题
    设计模式:迭代器模式(Iterator)
    设计模式:适配器模式(Adapter)
    设计模式:状态模式(State)
    设计模式:抽象工厂模式(Abstract Factory)
  • 原文地址:https://www.cnblogs.com/liwxmyself/p/10248605.html
Copyright © 2011-2022 走看看