• 复习JS事件及DOM


    [JS中的事件分类]
    1、鼠标事件:
           click/dbclick/mousedown/mousemove/mouseout/mouseover/mouseup
     
     2、键盘事件
           keydown:键盘按下去触发
           keypress:键盘按下并松开的瞬间
           keyup:键盘抬起时触发
     
     [注意事项:(了解)]
           ①执行顺序:keydown-keypress-keyup
           ②长按时,会循环不断执行keydown-keypress
           ③有keydown事件时,不一定有keyup事件(事件触发过程,鼠标移开,就不触发 )
           ④keypress只能捕获字母、数字、符号键,不能捕获功能键;keydown/keyup基本可以捕获所有功能键(特殊除外)
           ⑤keypress区分大小写,keydown和keyup不区分
           ⑥keydown/keyup区分主键盘和小键盘,keypress不区分;
     
     [确定键盘触发按键]
          ①在触发函数中传入参数e,代表按键事件
          ②通过e.keyCode,确定按键Ascii码值,进而确定按键;
          ③所有浏览器系统的写法(一般不必要);
     
     var evn=e||event;//取到键盘事件
     var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码
     
     
    [JS中的事件流]
     
     1、事件冒泡:当某DOM元素触发某事件时,会从当前DOM元素开始,逐个触发其祖先元素的同类型事件,直到DOM根节点;
     DOM0模型,均为事件冒泡;
     IE中使用.attachEvent()添加的事件,均为冒泡;
     其他浏览器,.addEventListener添加的事件,当第三个参数为false时,为冒泡;
     
     2、事件捕获:当某DOM元素触发某事件时,会从DOM根节点开始,逐个触发其祖先元素的同类型事件,直到触发到当前元素为止;
     只有使用.addEventListener添加事件,并设置第三个参数为true时,才进行捕获;
     
     ↓  当前元素 ↑
     ↓  ↑
     冒  父元素   捕
     ↓  ↑
     泡 爷爷元素 获
     ↓  ↑
      DOM根节点
     
     3、阻断事件冒泡:
     IE浏览器中:将e.cancelBubble属性设为true;
     其他浏览器:调用e.stopPropagation();方法
     兼容写法:function myParagraphEventHandler(e) {
                                             e = e || window.event;
                                                  if (e.stopPropagation) {
                                                      e.stopPropagation(); //IE以外
                                                   } else {
                                                       e.cancelBubble = true; //IE
                                                             }
                                                  }
     
     3、阻止默认事件:
     IE浏览器中:将e.returnValue属性设为false;
     其他浏览器:调用e.preventDefault();方法
     兼容写法:function eventHandler(e) {
                                             e = e || window.event;
                                            // 防止默认行为
                                                    if (e.preventDefault) {
                                            e.preventDefault(); //IE以外
                                                     } else {
                                            e.returnValue = false; //IE
                                                      }
                                                }
     
     
    【DOM树节点】
        DOM节点分为三大类:元素节点、文本节点、属性节点
     
        文本节点、属性节点,为元素节点的两个子节点;
     
        通过getElement系列方法,可以去到元素节点。
     
     
    【查看节点】
         1、getElementById:通过ID获取唯一的节点;多个同名ID,只会取第一个;
         2、getElementsByName:通过Name取到一个数组,包含1到多个节点;
    使用方式:通过循环,取到每一个节点。循环次数:从0开始,<数组.length
     
    【查看和设置属性节点】
        1、查看属性节点: getAttribute("属性名");
        2、设置属性节点: setAttribute("属性名","属性值");
     
     
    【JS修改样式总结】
        1、.className : 为元素设置一个新的class名字;
        div1.className = "class1";
     
        2、.style : 为元素设置一个新的样式,注意驼峰命名法;
        div1.style.backgroundColor = "red";
     
        3、.style.cssText : 为元素同时修改多个样式;
        div1.style.cssText = "100px;height100px;";
     
    【查看节点】
        1、tagName属性:获取节点的标签名;
        2、innerHTML:设置或者获取节点内部的所有HTML代码;
        3、innerText:设置或者获取节点内部的所有文字;
     
  • 相关阅读:
    黑马程序员__线程
    java内部类、异常、包
    java面向对象
    java中字符串切割的方法总结
    md5可能会被破解咋办?
    Struts2使用拦截器完成权限控制示例
    关于Spring的Controller及Struts的Action的多线程的注意
    从打车软件你能想到多少?盈利模式?商机?大数据?移动互联网蛋糕?生活方式改变withApp?
    动态加载JS脚本的4种方法
    extjs Cannot read property 'dom' of null
  • 原文地址:https://www.cnblogs.com/zhang11424/p/7078300.html
Copyright © 2020-2023  润新知