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
  • 相关阅读:
    ubuntu下安装maven
    159.Longest Substring with At Most Two Distinct Characters
    156.Binary Tree Upside Down
    155.Min Stack
    154.Find Minimum in Rotated Sorted Array II
    153.Find Minimum in Rotated Sorted Array
    152.Maximum Product Subarray
    151.Reverse Words in a String
    150.Evaluate Reverse Polish Notation
    149.Max Points on a Line
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13275907.html
Copyright © 2011-2022 走看看