js -- 事件操作

作者: GHope | 来源:发表于2018-08-22 17:37 被阅读26次

1、DOM操作

children 子节点
parentNode 父节点

谷歌和火狐的方式
firstElementChild 头子节点
lastElementChild 尾子节点
previousElementSibling 上一个兄弟节点
nextElementSibling 下一个兄弟节点

ie的方式
firstChild
lastChild
previousSibling
nextSibling

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom</title>
</head>
<body>
    <div class="hero">
        <ul id="girl">
            <li>王昭君</li>
            <li>杨玉环</li>
            <li>妲己</li>
            <li id="can">貂蝉</li>
            <li id="qiao">大乔</li>
        </ul>
        <ol>
            <li>李白</li>
            <li>赵云</li>
            <li>狄仁杰</li>
            <li>诸葛亮</li>
        </ol>
    </div>
    <div class="san">
        <ul>
            <li>关羽</li>
            <li>张飞</li>
            <li>赵云</li>
            <li>马超</li>
            <li>黄忠</li>
        </ul>
        <ol>
            <li>典韦</li>
            <li>许褚</li>
            <li>徐晃</li>
            <li>张辽</li>
            <li>夏侯惇</li>
        </ol>
    </div>
<script>
    // var odiv = document.getElementsByClassName('hero')[0]
    // console.log(odiv.children)

    // var oqiao = document.getElementById('qiao')
    // console.log(oqiao.parentNode)

    var ocan = document.getElementById('can')

    console.log(ocan.parentNode.parentNode.nextElementSibling.firstElementChild.lastElementChild.tagName)
</script></body></html>

通过document可以动态的创建和删除节点

tagName 获取对象标签的名字大写
createElement 创建节点
removeChild 父节点.removeChild(子节点)
appendChild 添加节点（添加存在的节点，本质是移动节点）
insertBefore 添加节点 insertBefore(new, old)

setAttribute : 既可以设置官方属性，又可以设置自定义属性
getAttribute : 既可以获取官方属性，也可以获取自定义属性

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>操作</title>
</head>
<body>
    <ul id="girlstar">
        <li>柳岩</li>
        <li>张靓颖</li>
        <li id="rong">朱茵</li>
    </ul>
    <ul id="women">
        <li>Jam</li>
        <li id="feng">陈粒</li>
        <li>刘亦菲</li>
    </ul>
    <button id="btn" like="篮球" look="goudan">点我</button>


<script>
var obtn = document.getElementById('btn')
var oul = document.getElementById('girlstar')
var owu = document.getElementById('women')

obtn.onclick = function () {
    // obtn.look = 'goudan'
    obtn.setAttribute('look', 'goudan')
    // console.log(obtn.like)
    // console.log(obtn.getAttribute('like'))
    // var oli = document.createElement('li')
    // oli.innerHTML = '柳岩'
    // oli.className = 'yan'
    // 动态添加节点
    // oul.appendChild(oli)
    // var ofeng = document.getElementById('feng')
    // var orong = document.getElementById('rong')
    // oul.appendChild(ofeng)
    // owu.removeChild(ofeng)

    // oul.insertBefore(ofeng, orong)
}

</script></body></html>

2、事件绑定和事件冒泡

谷歌和火狐方式
addEventListener removeEventListener
ie方式
attachEvent detachEvent

获取事件对象
事件ev 火狐、谷歌
window.event ie、谷歌
兼容性写法： var oevent = ev || event

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定</title>
</head>
<body>
    <div id="lala" style="width:300px; height:300px; background-color:#c90"></div>


<script>
var odiv = document.getElementById('lala')

// odiv.addEventListener('click', function () {
//     alert('羌笛何须怨杨柳,春风不度玉门关')
// })
// odiv.addEventListener('click', function () {
//     alert('劝君更尽一杯酒,西出阳关无故人')
// })

// odiv.attachEvent('onclick', function () {
//     alert('君不见黄河之水天上来')
// })
// odiv.attachEvent('onclick', function () {
//     alert('奔流到海不复回')
// })

// odiv.onclick = function () {
//     alert('羌笛何须怨杨柳,春风不度玉门关')
// }
// odiv.onclick = function () {
//     alert('劝君更尽一杯酒,西出阳关无故人')
// }
</script></body></html>

获取事件的x和y坐标
oevent.clientX oevent.clientY
相对窗口左上角的坐标

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取事件对象</title>
</head>
<body>
    <div id="dudu" style="width:400px; height:400px; background-color:firebrick"></div>


<script>
    var odiv = document.getElementById('dudu')

    odiv.onclick = function (ev) {
        // console.log(ev)
        // alert(ev)
        var oevent = ev || event
        // alert(oevent)
        console.log(oevent.clientX, oevent.clientY)
    }

    // function test(ev) {
    //     alert(ev)
    // }
    // odiv.onclick = test

    // a = 10
    // b = 200

    // var c = a && b
    // console.log(c)
</script></body></html>

取消事件冒泡
事件的属性和方法
cancelBubble ie方式、谷歌、火狐都支持
stopPropagation() 谷歌、火狐方式

事件源对象
srcElement ie、谷歌
target 火狐、谷歌

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件冒泡</title>
</head>
<body>
    <div id="wai" style="width:400px; height:400px; background-color:pink;">
        <div id="nei" style="width:200px; height:200px; background-color:black;"></div>
    </div>


<script>
var owai = document.getElementById('wai')
var onei = document.getElementById('nei')

owai.onclick = function () {
    alert('寻寻觅觅,冷冷清清,凄凄惨惨戚戚')
}
onei.onclick = function (ev) {
    alert('乍暖还寒时候,最难将息,三杯两盏淡酒')
    var oevent = ev || event
    // oevent.cancelBubble = true
    oevent.stopPropagation()

    console.log(oevent.target)
}
</script></body></html>

3、小知识

禁止鼠标右键
document.oncontextmenu = function () { return false }
超链接和事件同时触发
事件的属性和方法
returnValue ie、谷歌
preventDefault() 火狐、谷歌
return false ie、谷歌、火狐
键盘事件
document.onkeydown : 捕获用户点击的按钮
获取按钮的编号
oevent.keyCode

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小知识</title>
</head>
<body>
    <a id="du" href="http://www.baidu.com/">百度一下</a>


<script>
    // document.onkeydown = function (ev) {
    //     var oevent = ev || event
    //     console.log(oevent.keyCode)
    // }
    document.onkeypress = function (ev) {
        var oevent = ev || event
        console.log(oevent.keyCode)
    }
    // var oa = document.getElementById('du')
    // oa.onclick = function (ev) {
    //     alert('这次第,怎一个愁字了得')
    //     var oevent = ev || event
    //     // oevent.returnValue = false
    //     // oevent.preventDefault()
    //     return false
    // }
// document.oncontextmenu = function () {
//     return false
// }
</script></body></html>

3、正则对象

规则与其他语言中正则用法类似
单字符：. \w \d \W \s \S \D [aoe]
数量： {m} {m,} {m,n} {0,}==* {1,}==+ {0,1}==?
match : 正则匹配
replace : 正则替换

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小知识</title>
</head>
<body>
    <a id="du" href="http://www.baidu.com/">百度一下</a>


<script>
    // document.onkeydown = function (ev) {
    //     var oevent = ev || event
    //     console.log(oevent.keyCode)
    // }
    document.onkeypress = function (ev) {
        var oevent = ev || event
        console.log(oevent.keyCode)
    }
    // var oa = document.getElementById('du')
    // oa.onclick = function (ev) {
    //     alert('这次第,怎一个愁字了得')
    //     var oevent = ev || event
    //     // oevent.returnValue = false
    //     // oevent.preventDefault()
    //     return false
    // }
// document.oncontextmenu = function () {
//     return false
// }
</script></body></html>

4、表单对象

三种查找方法
（1）根据id获取
（2）document.forms 得到文档中所有的form
（3）根据name获取
document.formname
获取该表单里面input框的值，假如该input框name=user
document.formname.user.value
submit()方法
document.formname.submit() 谁都能提交

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
</head>
<body>
    <form name="goudan" action="xxx" method="get">
        <input name="user" type="text" value="王狗蛋">
        <!-- <input type="submit" value="提交"> -->
        <a id="aa" href="javascript:;">登录</a>
    </form>
    <form action="" method="post"></form>


<script>
var oa = document.getElementById('aa')
oa.onclick = function () {
    document.goudan.submit()
}
// 第二种方式
// console.log(document.forms[1].method)
// console.log(document.goudan)
// console.log(document.goudan.user.value)
</script></body></html>

js验证表单内容

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js验证</title>
</head>
<body>
    <form name="form" action="">
        <input name="user" type="text" placeholder="请输入用户名">
        <span class="user"></span>
        <br><br>
        <input name="password" type="text" placeholder="请输入密码">
        <span class="pwd"></span>
        <br><br>
        <input name="email" type="text" placeholder="请输入邮箱">
        <span class="email"></span>
        <br><br>
        <input type="submit" value="提交">
    </form>


<script>
// 找到3个input
oname = document.form.user
opwd = document.form.password
oemail = document.form.email

oname.onblur = function () {
    var spanname = document.getElementsByClassName('user')[0]
    // 得到自己的值
    content = this.value
    // 用户名长度必须大于等于3位
    if (content.length < 3) {
        spanname.innerHTML = '用户名不合法'
        spanname.style.color = 'red'
    } else {
        spanname.innerHTML = '√'
        spanname.style.color = 'green'
    }
}

opwd.onblur = function () {
    var spanpwd = document.getElementsByClassName('pwd')[0]
    // 得到自己的值
    content = this.value
    // 用户名长度必须大于等于3位
    if (content.length < 6) {
        spanpwd.innerHTML = '密码长度不够'
        spanpwd.style.color = 'red'
    } else {
        spanpwd.innerHTML = '√'
        spanpwd.style.color = 'green'
    }
}

oemail.onblur = function () {
    var spanemail = document.getElementsByClassName('email')[0]
    content = this.value
    // test@163.com   lala@sina.cn  1090@qq.com
    re = /^\w+@\w+\.(com|cn)$/
    if (!content.match(re)) {
        spanemail.innerHTML = '邮箱格式不正确'
        spanemail.style.color = 'red' 
    } else {
        spanemail.innerHTML = '√'
        spanemail.style.color = 'green'
    }
}
</script></body></html>

js -- 事件操作

1、DOM操作

通过document可以动态的创建和删除节点

2、事件绑定和事件冒泡

3、小知识

3、正则对象

4、表单对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Python

HTML