zoukankan      html  css  js  c++  java
  • 事件


    1、鼠标事件是Web开发中最常见的一类事件


    click:用户单击主鼠标按钮或者按下回车键时触发
    dblclick:用户双击鼠标按钮时触发
    mousedown:用户按下了任意鼠标按钮时触发
    mouseenter:进入元素时触发,但是再进入到子元素时不会再触发
    mouseleave:从某个元素出来时触发,但不包括子元素
    mousemove:当鼠标在元素范围内移动时,就会不停的重复触发
    mouseout:从当前元素出来时触发,进去子元素也会触发
    mouseover:进入元素时触发,进出子元素时也会触发
    mouseup:在用户释放鼠标按钮时触发


    2、键盘事件:
    常见的键盘事件有三个: keydown , keypress和 keyup

    keydown:按下键盘上任意键时触发,而且如果按住不放的话,会重复触发此事件
    keypress:按下键盘上一个字符键时触发,如果按住不放,也是会重复触发
    keyup:当用户释放键盘上的键时触发

    3、页面事件
    页面事件主要是指当我们对整个HTML页面做相应的操作时会触发的事件

    页面事件中最常用的一个事件就是load事件 ,一般绑定在window对象上面

    4、页面卸载
    与load事件对应的是unload事件,这个事件是在文档完全被卸载后触发


    5、页面滚动
    滚动页面时,对应的scroll滚动事件就会被触发


    6、窗口设置大小
    当浏览器窗口被调整到一个新的高度或者宽度时,就会触发resize事件

    我们可以通过document.body.clientHeight以及document.body.clientWidth来获取body元素的宽高

    1、事件对象
    事件对象是以事件处理函数中的参数形式出现的,该对象并不需要我们自己创建,直接使用即可

    事件对象说明:
    当事件发生时,只能在事件函数内部访问的对象
    处理函数结束后会自动销毁

    2、this值
    当我们触发一个事件的时候,事件处理程序里面的this指代的是绑定事件的元素,而事件对象的target属性指代的是触发事件的元素

    3、键盘事件
    键盘事件也有相关的属性被传入event对象,常见的属性有keyCode和key属性


    4、阻止冒泡
    我们可以使用事件对象的stopPropagation()方法来阻止冒泡

    5、阻止默认行为
    5-1、取消默认行为的方式有cancelable、defaultPrevented、preventDefault()和returnValue

    5-2、在DOM0级事件处理程序中,使用returnValue、preventDefault()和return false都有效

    5-3、在DOM2级事件处理程序中,使用return false无效

    5-4、在Internet Explorer事件处理程序中,使用preventDefault()无效

    5-5、preventDefault()方法是DOM中最标准的取消浏览器默认行为的方式(注:internet Explorer8及以下浏览器不支持)

    5-6、returnValue属性: 默认值是true,将其设置为false就可以取消事件的默认行为,与preventDefault()方法作用相同

    5-7、defaultPrevented属性表示默认行为是否被阻止,返回true时表示被阻止,返回false时,表示未阻止*


    事件流(扩展)

    事件对象的eventphase属性可以返回一个整数值,表示事件目前所处的事件流阶段
    0表示事件没有发生,1表示当前事件流处于捕获阶段,2表示处于目标阶段,3表示冒泡阶段

    事件模拟
    事件模拟包括三个部分:创建事件初始化事件以及触发事件


    MouseEvent()方法 :使用MouseEvent()方法可以创建鼠标事件

  • 相关阅读:
    digitalpersona 开发
    Task 暂停与继续
    IQueryable 和 IEnumerable(二)
    SpringBoot Redis 订阅发布
    @Formula
    Aop 简单实例
    幂等 zuul的Filter实现
    C# async await 举个栗子
    Integer 类和 int 的区别
    TCP和UDP的区别以及各自应用
  • 原文地址:https://www.cnblogs.com/x0815/p/13197368.html
Copyright © 2011-2022 走看看