DOM操作-事件绑定-点击位置-右键事件等操作

事件绑定

• 说明：当一个事件触发时，要想执行多个事件处理函数，直接设置属性后者会覆盖前者，只能有一个事件处理函数有效，可以通过事件绑定来解决。
• 示例：

  var oDiv = document.getElementsByTagName('div')[0]
          
  // 添加点击事件:直接设置属性,后者会覆盖前者
  // oDiv.onclick = hello
  // oDiv.onclick = world
  ​
  // 添加事件绑定(可以是多个),参数:事件 函数
  oDiv.addEventListener('click', hello)
  oDiv.addEventListener('click', world)
  ​
  // 移除事件绑定
  oDiv.removeEventListener('click', hello)
  ​
  function hello()
  {
  alert('Hello')
  }
  ​
  function world()
  {
  alert('World')
  }

点击位置

• 说明：当点击事件触发时，鼠标点击的位置在窗口上的偏移(坐标)
• 示例：

  function dianji(e)
  {
      var ev = event || e
      // 将点击位置显示到标题上
      document.title = ev.clientX + 'x' + ev.clientY
  }

• 效果：元素拖拽

右键事件

• 说明：可以人为的干预右键菜单的显示
• 示例：

  document.oncontextmenu = function () {
      // 改函数的返回值,觉得右键菜单的显示与否
      // true:显示      false:不显示
      return false
  }

键盘事件

• 事件：
  • onkeydown：键盘按下
  • onkeyup：键盘抬起
• 示例：

  function key(e)
  {
      var ev = event || e
      // 字符的ASCII
      document.title = ev.keyCode
  ​
      // 是否按下了组合按键
      if (ev.altKey == true) {
          console.log('按下了alt键')
      } else if (ev.ctrlKey == true) {
          console.log('按下了ctrl键')
      } else if (ev.shiftKey == true) {
          console.log('按下了shift键')
      }
  }

跳转干预

• 说明：人为干预a|form等的默认跳转行为
• 示例：

  function tiao()
  {
      // 这里可以书写业务逻辑
      // 返回值可以决定是否跳转,true可以跳转,false禁止跳转
      return true
  }
  var reg = document.getElementsByName('reg')[0]
  reg.onclick = function () {
      // 做业务处理:用户名不能为空,否则提示
      var username = document.getElementsByName('username')[0]
      if (username.value == '') {
          username.nextElementSibling.innerText = '用户名不能为空'
          return
      }
      // 找到form
      var form = this.parentNode
      // 手动提交
      form.submit()
  }

各种弹出框

• 示例：

  function jinggao()
  {
      // 完整写法
      window.alert('警告，上课要把脑子带来')
      // 简单写法
      // alert('警告，上课要把脑子带来')
  }
  ​
  function queren()
  {
      // 点击确定返回true,点击取消返回false
      var ret = window.confirm('您确定要删除该文件吗?')
      console.log(ret)
  }
  ​
  function shuru()
  {
      // 参数:提示信息 默认值
      var ret = window.prompt('请输入您的姓名', '王大花')
      // 返回值:点击确定返回输入的内容,点击取消返回null
      console.log(ret)
  }

JSON处理

• 示例：

  var s = '{"name": "dahua", "age": 18}'
  ​
  // 将JSON字符串转换为JS对象
  var obj = JSON.parse(s)
  console.log(obj, typeof(obj))
      
  // 将JS对象转换为JSON字符串
  var s2 = JSON.stringify(obj)
  console.log(s2, typeof(s2))

BOM操作

• 说明：Browser Object Model，即浏览器对象模型，将浏览器当做JS对象进行操作
• 属性和方法：

  属性|方法	说明
  window.open	打开一个新的窗口
  窗口.close	关闭指定窗口，一般只能关闭JS代码打开的窗口
  window.location	href：表示页面的URL，设置可以实现立即跳转<br />assign：该方法专门用来设置href属性，功能同上
  window.history	back：向后跳转、forward：向前跳转<br />go：指定跳转，正数表示向前跳转，负数表示向后跳转

关注公众号，免费刷快排。