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:指定跳转,正数表示向前跳转,负数表示向后跳转

发表评论 X

电子邮件地址不会被公开。 必填项已用*标注

姓名不能为空
填写正确的email