zoukankan      html  css  js  c++  java
  • JavaScript学习笔记---事件

    ## 事件基础

        元素.事件类型 = function(形参){
            注:事件函数中的形参 代表 该元素发生事件的事件对象  ,一般事件做兼容
            var 事件兼容名 = event || 形参    
        }
        元素.事件类型 = 函数名
        事件关键字:event【只要发生事件,就有event】

    ## 事件中的部分属性

    clientX:鼠标距离浏览器可视区最左侧距离
    offsetX: 鼠标距离元素左/上角距离  
    pageX:  鼠标距离文档左侧距离
    screenX:鼠标距离屏幕最左侧距离
    type:  获取事件类型
    target、srcElement: 目标元素【触发事件元素】
    var tar = event.target || event.srcElement;

    ## 事件绑定/取消 又叫事件监听

        普通事件缺点:同一个元素做同种事件类型,只能读取一个。若写多个,则后者覆盖前者。
        而事件绑定可以解决这个问题。

        ## 事件绑定

       标准:addEventListener 

            元素.addEventListener('事件类型【不加on】',函数,boolean【选填,是否捕获】) true-捕获 false-冒泡【默认】

        ie: attachEvent 

            注:无第三个值,因为ie没有捕获
            元素.attachEvent('事件类型【加on】',函数)  

        ## 事件取消

        标准:removeEventListener

            元素.removeEventListener('事件类型【不加on】',函数)

        ie: detachEvent

            元素.detachEvent('事件类型【加on】',函数)

    ## DOM事件流

        DOM事件流: 

        1.捕获事件

        【从外往里找】 2.确定目标阶段 3.冒泡阶段【从里向外】默认

        阻止冒泡

        标准: 事件.stopPropagation();
        ie:   事件.cancelBubble = true;

        阻止捕获

        1.不写事件绑定,不给true,默认冒泡事件,阻止冒泡
        2.事件.stopImmediatePropagation(); 阻止捕获+冒泡

    ## 事件默认行为

        浏览器自带一些默认行为,如右键菜单,如滚动滚轮上下翻页等。
        阻止默认行为
            1.标准:事件.preventDefault();
            2.ie:  事件.returnValue = false;
            3.return false

    ## 键盘事件

        onkeydown键盘按下事件
        onkeyup 键盘抬起事件
        【需要在onkeydown事件中检测】
        altKey:   检测alt键是否被按下【布尔值】
        ctrlKey:  检测ctrl键是否被按下【布尔值】
        shiftKey: 检测shift键是否被按下【布尔值】
        key:按什么返回什么内容 兼容问题 ie8+可用
        keyCode: 键盘码,键盘上任何一个按键都有键盘码  回车-13

    ## 滚轮事件

        标准、ie: onmousewheel 【写成 普通事件 或 事件绑定皆可】
        火狐: DOMMouseScroll 【必须写成事件绑定】
        ## 滚轮信息
        标准、ie:  事件.wheelDelta  【向上划120或150,是正数,  向下划-120或-150,是负数】
        火狐: 事件.detail          【向上划-3,是负数,  向下划3,是正数】

    ## 事件委托

        将事件委托给父系元素,再由父系元素分配给具体子元素
        使用 关键字 target
  • 相关阅读:
    流畅 最好用的远程桌面推荐下?
    高性能远程桌面Splashtop 居家办公首选软件
    ShareConnect即将寿终正寝 Splashtop远程桌面会是最好的替代品
    详解Springboot中自定义SpringMVC配置
    Java中使用RSA算法加密
    Docker搭建MySQL主从复制
    SpringMVC中RequestContextHolder获取请求信息
    详解Redis持久化(RDB和AOF)
    Redis事务
    Springboot CORS跨域访问
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13275907.html
Copyright © 2011-2022 走看看