Javascript注意点

Javascript注意点

• 在img标签中的src如果为相对路径, 但是在js获取的时候会转为全路径

• 候选框中, 在执行onclick之前, 会由于html的特征先设置checked属性

• 为a标签添加onclick实现, 要注意a的默认点击事件, 返回false中断事件冒泡

• 标签自定义属性

  • 使用getAttribute获取
  • 使用setAttribute设置
  • 使用removeAttribute删除属性

• 事件

  • onclick
  • onfocus
  • onblur
  • onmouseover: 移入, 会触发冒泡
  • onmouseout: 移出, 会触发冒泡
  • onmouseup 鼠标按键放开时触发
  • onmousedown 鼠标按键按下触发
  • onmousemove 鼠标移动触发
  • onkeyup 键盘按键按下触发
  • onkeydown 键盘按键抬起触发
  • onload:
    • 页面加载完毕的时候, css, js全部下载完毕之后
  • onunload:
    • 关闭页面的时候, 这时不能使用alert等对话框, window对象被冻结
  • onmouseenter
  • onmouseleave: 移入, 不会触发冒泡
  • onmouseover: 移出, 不会触发冒泡

• JS中修改样式

  • 使用style属性
  • 使用className属性

• <a href="javascript:void(alert('hello'))">

  • void是运算符, 永远返回undefined, 但是会执行void中的代码

• API

  • children: 返回的是元素, 不会再递归提取
  • childNodes: 会递归提取, 所有返回的会比children多很多, 要达到和children一样的效果, 需要对每一个node判断nodeType === 1, 为1就是元素节点
  • hasChildNodes: 判断是否有子节点
  • nextSibling: 下一个兄弟节点
  • previousSibling: 上一个兄弟节点
  • nextElementSibling: 下一个兄弟元素
  • previousElementSibling: 上一个兄弟元素
  • 由于浏览器兼容问题, 一般不使用元素节点的函数, 而是使用节点的函数, 接着判断nodeType === 1来获取元素, 可以将其封装成为一个函数
  • addEventListener('click|blur|so on', function, false): 另外一种事件注册方式
  • removeEventListener('click|blur|so on', function, false): 另外一种删除事件的方式
  • insertBefore
  • appendChild

  • 事件对象

    • e.target: 真正触发事件的对象
    • e.currentTarget: 事件处理函数所处在的对象
    • e.type: 返回的是字符串, 如'click', 'mouseover', 'mouseout'等事件名
    • 一般采用e = e || window.event获取事件对象
    • 一般采用target = e.target || e.srcElement获取事件源对象
    • e.pageX, e.pageY: IE8之前不支持
    • e.clientX, e.clientY: 都支持, pageX = clientX + 滚动距离
      • pageX = clientX + scrollLeft
      • pageY = clientY + scrollLeft
    • e.keyCode

  • 对话框

    • alert
    • prompt: 返回用户输入
    • confirm: 返回true或者false

  • 间隔执行

    • setTimeOut: 隔一段时间执行, 只执行一次
    • setInterval: 每隔一段时间执行, 重复执行
    • clearTimeOut
    • clearInterval

  • 地址

    • location
      • reload(true): 强制刷新
      • href=: 修改地址
      • replace(href): 修改地址, 但是不记录到历史记录中