H5自定义属性

• 目的：保存并使用数据，有些数据可以保存都页面中而不用保存到数据库中
• data-开头作为属性名并赋值
• 获取自定义属性：兼容性获取element.getAttribute('data-index')
• H5新增element.dataset.index或者element.dataset['index']

节点

• 网页中所有的内容都是节点（标签，属性，文本，注释），在DOM中节点使用ndoe来表示
• DOM树中所有节点都可以被访问，都可以被修改，创建和删除
• 节点拥有nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）三个基本属性

事件监听

eventTaget.addEventListener(type,事件处理程序[,useCapture])

将指定的监听器注册到eventTaget（事件目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

type  事件类型 字符串  比如click ，mouseover 注意不要on
listener 事件处理程序 事件发生时，会调用该监听函数
useCapture  可选参数，是一个布尔值默认是false，  后面学习

兼容性解决方案

function addEventListenerFn(element, eventName, fn) {
        // 判断当前浏览器是否支持addEventListener方法
        if (element.addEventListener) {
          element.addEventListener(eventName, fn)
        } else if (element.attachEvent) {
          element.attachEvent('on' + eventName, fn)
        } else {
          // 相当于element.onclick = fn
          element['on' + eventName] = fn
        }
      }

兼容处理

 function removeEventListenerFn(element, eventName, fn) {
        // 判断当前浏览器是否支持
        if (element.removeEventListener) {
          element.removeEventListener(eventName, fn)
        } else if ((element, detachEvent)) {
          element.detachEvent('on' + eventName, fn)
        } else {
          element['on' + eventName] = null
        }
      }

事件委托

• 事件委托: 把事情委托给别人，代为处理
• 事件委托也称为事件代理，在jQuery里面称为事件委派
• 不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行

鼠标事件对象

e.clientX   返回鼠标相对于浏览器窗口可视区域的X坐标
e.clientY   返回鼠标相对于浏览器窗口可视区域的Y坐标
e.pageX     返回鼠标相对于文档页面的X坐标  ie9+支持
e.pageY    返回鼠标相对于文档页面的Y坐标  ie9+支持
e.screenX   返回鼠标相对于电脑屏幕的X坐标
e.screenY   返回鼠标相对于电脑屏幕的Y坐标

键盘事件

onkeyup   键盘按键松开时触发
onkeydown  键盘按键按下时触发
onkeypress  键盘按键按下时触发  但是它不识别功能键  比如 ctrl shift 箭头等
keyCode  返回该键的ASCII值
onkeydown 和onkeyup不区分字母大小写，onkeypress区分字母大小写
实际开发中，更多的使用keydown和keyup能识别所有的键
keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值