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

    Python编程 wuya 231次浏览 已收录 0个评论

    事件绑定

    • 说明:当一个事件触发时,要想执行多个事件处理函数,直接设置属性后者会覆盖前者,只能有一个事件处理函数有效,可以通过事件绑定来解决。
    • 示例:
      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:指定跳转,正数表示向前跳转,负数表示向后跳转

    学海无涯 , 版权所有丨如未注明 , 均为原创丨转载请注明DOM操作-事件绑定-点击位置-右键事件等操作
    喜欢 (1)
    发表我的评论
    取消评论
    表情 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址