DOM回顾和事件对象

DOM文档对象模型回顾

• document 文档对象模型(整个html文档)

• element 元素对象

• attribute 属性对象(所有标签里面的属性)

• text文本对象 (显示的文本)

  dom里面的知识点:

  文本(换行符,制表符,空格…)也是一个文本节点

  如果属性是元素自身自带的属性,可以直接点出来,如果不是则不能

  DOM会操作对应的html的内容,当你的html内容发生变化\name对应的页面就会重新渲染(效率太低)

  重绘和回流(回流必定重绘)

  重绘:对应一个元素操作(不改变他的宽高和对应位置 而改变其他的样式)

  回流:对应的元素操作(改变对应的元素所有内容 宽高和对应的位置都会发生变化)

  事件

  概述:事件是一个异步机制. 他相当于一个观察者–执行者执行

  事件的组成

  • 事件名(内置的)
  • 执行对象(元素对象)
  • 处理函数(自定义函数)
  • 观察者(js事件引擎)

<button>点击</button>
button.onclick=function(){
    console.log('点击了')
}

事件名 click (内置的)

执行对象 button(元素对象)

处理函数 后续的处理函数(自定义函数)

观察者 (js引擎 事件引擎)

事件的声明方式

内联模式

 <!-- 内联模式 -->
    <!-- 内联模式就是在onclick属性中设置相应的代码 -->
    <button οnclick="alert('你好')">点我</button>
    <button οnclick="fn(1)">点我</button>

脚本模式(在script中 常用)

 //脚本模式的写法 事件名 执行对象 处理函数
    var btn = document.getElementsByTagName('button')[2]
    btn.onclick = function() {
        console.log('你好');
    }

    function handler() {
        console.log('函数执行了');
    }
    btn.onclick = handler //在js内部会自动调用

//因为内联模式的函数调用的this指向window,在脚本模式里面则指向对应的调用者

​ //所以内联模式需要手动调用函数

事件名的分类

鼠标事件()

• click 单击事件

• dblclick 双击事件

• mousedown 按下

• mouseup 弹起

• mouseenter 移入

• mouseleave 移出

• mouseover 移入

• mouseout 移出

• mousemove 移动

• contextmenu 右键点击

  注意事项

  click 和对应的mousedown和mouseup的执行顺序 按下–弹起–单击

  mouseover (mouseout)子元素也会触发

键盘事件()

 <input type="text">
        <script>
        var inp = document.querySelector('input')
        inp.onkeydown = function() {
            console.log('键盘按下');
        }
        inp.onkeyup = function() {
                console.log('键盘弹起');
            }
            //除了功能键
        inp.onkeypress = function() {
            console.log('字符串键');
        }
        window.onkeypress = function() {
            console.log('在window上按下');
        }
    </script>

注意事项

• 执行顺序 keydown- keypress- keyup
• keypress 一定会触发keydown

HTML事件(HTML中自带的一些事件(只能用于专门的html代码))

window事件

加载事件(load)

卸载事件(unload)

   //加载事件
        window.onload = function() {
                console.log('hello');
            }
            //卸载事件(刷新)
        window.onunload = function() {
                console.log('卸载');
            }
            //关闭事件(清除相关缓存和对应的资源操作)
        window.onclose = function() {
                console.log('关闭');
            }
            //打印之前调用  调用print方法之前 更改打印的内容然后继续打印
        window.onbeforeprint = function() {
                console.log('打印了');
            }
            //在卸载之前调用 将一些内容回收
        window.onbeforeunload = function() {
            console.log('卸载之前');
        }
            //一切有滚动栏的标签都可以加
        window.onscroll = function() {
            console.log('滚动栏位置发生变化');
        }

表单事件

• submit(表单提交事件)
• reset(表单重置事件)
• select 内容被选中
• change 表单的value值发生变化
• input 可输入的表单标签进行输入

  var forms = document.forms[0]
        forms.onsubmit = function() {
            console.log('重置了');
        }
        forms.onreset = function() {
                console.log('重置了');
            }
            //change value值发生变化 失去焦点
        document.querySelector('input').onchange = function() {
                console.log('值变化了');
            }
            //input 输入对应的值得时候调用
        document.querySelector('input').oninput = function() {
                console.log('值变化了');
            }
            //select 选择里面的内容
        document.querySelector('input').onselect = function() {
            console.log('选择了');
        }
   			//失去焦点
        document.querySelector('input').onblur = function() {
            console.log('失去焦点');
        }
        //获得焦点
        document.querySelector('input').onfocus = function() {
            console.log('获得焦点');
        }
		//element 也具备 focus() 和blur()

event 事件源对象

概述

event被称为事件源对象,他是一个全局的内置对象(属于window)

处理函数也是一个函数,函数就具备一个arguments属性.arguments是一个伪数组.那么就可以知道对应的处理处理函数里面也拥有arguments

    var btn = document.querySelector('button')
    btn.onclick = function() {
        console.log('arguments', arguments)
        console.log('arguments[0]', arguments[0])
            //这个对象是在arguments里面存在第一位里面以属性为主 那么这个对象表示什么
            //这个参数其实就是对应的事件的一些内容 成为事件源对象 event
    }
    btn.onclick = function(e) {
        //这个地方的e表示就是第一个参数,也就是对应的event对象,这个event对象有兼容问题
        //兼容写法
        e = e || window.event
        console.log(`e`, e);
    }
    window.onkeydown = function() {
        console.log('arguments', arguments)
            //keyboardEvent键盘的事件源对象
        console.log('arguments[0]', arguments[0])
    }

 btn.onclick = function(e) {
        //这个地方的e表示就是第一个参数,也就是对应的event对象,这个event对象有兼容问题
        //兼容写法
        e = e || window.event
        console.log(`e`, e);
    }

event的常用属性

鼠标坐标的几大属性

• screenX 表示鼠标离屏幕的距离X
• screenY 表示鼠标离屏幕的距离Y
• pageX 表示当前的鼠标距离页面的X距离(包含卷起部分)
• pageY 表示当前的鼠标距离页面的Y距离(包含卷起部分)
• clientX 表示鼠标距离页面可视区的X距离
• clientY 表示鼠标距离页面可视区的Y距离
• offsetX 表示鼠标离父元素偏移的X距离
• offsetY 表示鼠标离父元素偏移的Y距离

按钮辅助的相关属性

• ctrlKey 是否按下了ctrl键

• altKey 是否按下了alt键

• shiftKey 是否按下了shift键

    window.onkeypress = function(e){
      console.log(e.code);//当前的按钮按下键是哪个一个 返回的是一个key+大写字母
      console.log(e.keyCode);//当前按下键的大写字母 ascii码
      console.log(e.charCode); //当前字符的ascii码 keypress里面
      console.log(e.key);//表示当前按下的键 （兼容问题）
  }
  //事件委托的写法
  //获取需要加事件的父元素
  var ul = document.querySelector('ul')
  //给ul添加事件
  //给父元素添加事件
  //在内部判断触发元素 e.target
  //对应执行操作
  ul.onclick = function (e) {
      e = e || window.event
      //判断当前触发元素是否为li
      if (e.target.tagName == 'LI') {
          //排他思想
          //把所有的li的class清除
          for (var item of this.children) {
              item.className = ''
          }
          e.target.className = 'active'
      }
  }
  

  键盘的相关属性

  key 表示单签按下的键的字符(区分大小写)

  keyCode (在keydown里面 不区分大小 全部都是大写的ASCII码)

  code(key+大写的字符)

  charCode(在keypress里面才管用 他区分大小写 返回对应的ASCII码)

  window.onkeypress=function(e){
      console.log(e.code)//当前按钮按下键是哪一个 返回的是一个key+大写字母
      console.log(e.keyCode)//当前按下键的大写字母 ascii码
      consoloe.log(e.charCode)//当前字符的ascii码 keypres里面
      consoloe.log(e.key)//表示当前按下的键
  }
  

  事件委托机制(事件代理)

  概述:将对应的的时间委托给对应的父元素,然后通过对应的etarget获取实际的触发元素进行操作

//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function (e) {
    e = e || window.event
    //判断当前触发元素是否为li
    if (e.target.tagName == 'LI') {
        //排他思想
        //把所有的li的class清除
        for (var item of this.children) {
            item.className = ''
        }
        e.target.className = 'active'
    }
}

事件委托的运用场景

在一个父元素里面有多个子元素要添加相同的事件的时候