JavaScript学习笔记12

Amy_cx

已于 2022-08-31 00:14:50 修改

阅读量222

点赞数

文章标签： javascript 学习前端

于 2022-08-30 23:59:43 首次发布

本文链接：https://blog.csdn.net/amy_cx/article/details/126615265

版权

一、事件介绍

当我们点击一个按钮的时候，会弹出一个对话框。在JavaScript中，“点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事。

事件三要素：

1.事件源-触发事件的元素，如：按钮

2.事件类型 - 事件如何触发，点击、双击、移动……如：click 点击

3.事件处理函数 - 事件做什么

<!DOCTYPE html>
<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>
    <button>按钮</button>
    <script>
        var btn = document.querySelector("button")
        btn.onclick=function(){
            alert('弹出内容')
        }
    </script>
</body>
</html>

二、事件对象event

每触发一个事件都会生成事件对象，它包含对事件的描述信息，如你触发一个点击事件的时候，你点在哪个位置了，坐标是多少；你触发一个键盘事件的时候，你按的是哪个按钮。

获取事件对象：

- 在事件处理函数中获取名为event

- 更改事件对象名

- 事件处理函数定义一个形参，接收事件对象

事件对象兼容性：

- 非IE浏览器

- IE浏览器：window.event

<!DOCTYPE html>
<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>
    <button>按钮</button>
    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(e){
            e = e || window.event //兼容ie写法，非IE可直接输出e，它是自动生成event的
            console.log(e)
        }
    </script>
</body>
</html>

三、点击事件的光标坐标点获取

1.相对事件源（你点击的元素）(offsetX,offsetY)

2.相对于浏览器窗口(clientX,clientY)

3.相对于页面(pageX,pageY)

<!DOCTYPE html>
<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>Document</title>
    <style>
        *{padding: e;margin: e;}
        div{
            width: 200px;
            height:200px;
            background-color:skyblue;
            margin: 100px;
        }
    </style>
            
</head>
<body>
    <div></div>
    <script>
        var divEle = document.querySelector('div')
        divEle.onclick = function(e){
            e = e || window.event //获取事件对象
            // console.log(e)
            console.log('offsetX',e.offsetX,'offsetY',e.offsetY)
            console.log('clientX',e.clientX,'clientY',e.clientY)
            console.log('pageX',e.pageX,'pageY',e.pageY)
        }
    </script>
</body>
</html>

这里因为内容不够长没有出现滚动条，所以基于浏览器窗口和页面的坐标点是一样的。

四、常见的事件

有浏览器事件、鼠标事件、键盘事件、表单事件、触摸事件。

1.浏览器相关事件

load 文档加载完成事件

scroll 滚动事件

resize 窗口尺寸改变事件

<!DOCTYPE html>
<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>
    <script>
        // 写在head里面需要加onload
        window.onload = function(){
            // 这里面的代码，是html文档加载完成之后执行
            var divEle = document.querySelector('div')
            console.log(divEle)
            divEle.innerHTML = '新内容'
        }
    </script>
    <style>
        div{
            height: 1000px;
        }
    </style>
</head>
<body>
    <div>元素一</div>
    <script>
        //浏览器窗口滚动事件
        window.onscroll = function(){
            console.log(document.documentElement.scrollTop)
        }
        //浏览器窗口尺寸改变事件，移动端适配用的较多
        window.onresize = function(){
            console.log('w ',window.innerWidth,'h ',window.innerHeight)
        }
    </script>
</body>
</html>

2.鼠标事件

click：点击事件
dbclick：双击事件
contextmenu：右击事件
mousedown：鼠标左键按下事件
mouseup ：鼠标左键抬起事件
mousemove ：鼠标移动
mouseover ：鼠标移入事件
mouseout ：鼠标移出事件
mouseenter ：鼠标移入事件
mouseleave ：鼠标移出事件

<!DOCTYPE html>
<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>Document</title>
    <style>
        *{padding:0;margin:0;}
        div{
            width: 200px;
            height: 100px;
            background: pink;
            text-align: center;
            line-height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div>content</div>
    <script>
        var divEle = document.querySelector('div')
        //鼠标移入
        divEle.onmouseover = function(){
            divEle.style.color = 'red'
        }
        //鼠标移出
        divEle.onmouseout = function(){
            divEle.style.color = 'blue'
        }
        //鼠标移动
        divEle.onmousemove = function(e){
            //事件对象
            e =e || window.event
            //打印鼠标（光标）位置
            console.log(e.offsetx, e.offsetY)
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<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>Document</title>
    <style>
        *{padding:0;margin:0;}
        div{
            width: 100px;
            height: 100px;
            background: pink;
            text-align: center;
            line-height: 100px;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div>content</div>
    <script>
        var divEle = document.querySelector('div')
        //鼠标右键事件
        // document.oncontextmenu = function(e){
        //     e.preventDefault() //元素默认行为都可以阻止
        //     alert('右键')
        // }
        // 左键按下
        document.onmousedown = function () {
            console.log('mousedown')
            // 鼠标移动事件
            document.onmousemove = function (e) {
                e = e || window.event
                console.log('x : ', e.clientX, ' y :', e.clientY)
            }
        }
        // 左键抬起
        document.onmouseup = function () {
            console.log('mouseup')
            document.onmousemove = null
        }
    </script>
</body>
</html>

3.键盘事件

keyup 抬起

keydown 按下

keypress 按住

键码 keycode （有兼容性问题）

ctrlKey

altKey

shiftKey

<!DOCTYPE html>
<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>
    <!--
        8： 删除键（delete）
        9： 制表符（tab）
        13： 回车键（enter）
        16： 上档键（shift）
        17： ctrl 键
        18： alt 键
        27： 取消键（esc）
        32： 空格键（space
    -->
</head>
<body>
    <h2>键盘事件</h2>
    <script>
        document.onkeyup = function(e){
            e = e || window.event
            // alert(e.keyCode)
            var keyCode = e.keyCode || e.which //兼容Firefox2.0
            if(e.ctrlKey && keyCode === 13){ //13代表回车
                alert('登陆成功')
            }
        }
    </script>
</body>
</html>

4.表单事件

change：表单内容改变事件

input：表单内容输入事件

submit：表单提交事件

<!DOCTYPE html>
<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>
    <style>
        *{padding: 0;margin: 0;}
        form{
            margin: 100px;
            width: 300px;
            height: 200px;
            background: skyblue;
            text-align: center;
        }
        form input{
            margin: 10px;
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" placeholder="请输入用户名" name="username"/><br/>
        <input type="password" placeholder="请输入密码" name="password"/><br/>
        <input type="file" name="headerimg"/>
        <input type="submit" value="确定" id="login"/>
    </form>
    <script>
        var headerInput = document.querySelector('input[name=headerimg')
        headerInput.onchange = function(){
            alert('change')
        }

        var usernameInput = document.querySelector('input[name="username"]')
        //表单输入事件
        usernameInput.oninput = function(){
            console.log(usernameInput.value) //每输入一个字母就要打印出
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移块移动案例</title>
    <style>
        *{padding: 0;margin: 0;}
        form{
            margin: 100px;
            width: 300px;
            height: 200px;
            background: skyblue;
            text-align: center;
        }
        form input{
            margin: 10px;
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text"placeholder="请输入用户名"name="username"/><br/>
        <input type="password"placeholder="请输入密码"name="password"/><br/>
        <input type="submit"value="确定"id="login"/>
    </form>
    <script>
        var formEle = document.querySelector('form')
        var usernameInput = document.querySelector('input[name="username"]')
        var passwordInput = document.querySelector('input[name="password"]')
        //表单form提交事件
        formEle.onsubmit = function (e) {
            e=e|| window.event//事件对象
            e.preventDefault()//阻止表单form默认行为
            //表单非空验证
            var username = usernameInput.value
            var password = passwordInput.value
            if (username === '') {
                alert('用户名不能为空！')
                return
            }else if(password == ''){
                alert('密码不能为空！')
                return
            }
            //用户名密码验证
            if(username == 'admin' && password == '123'){
                //表单验证通过，跳转到主界面
                location.href = "http://www.baidu.com"
            }else{
                alert('用户名或密码错误！')
            }
        }
    </script>
</body>
</html>

focus 获取焦点事件

blur 失去焦点事件

<!DOCTYPE html>
<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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        form {
            width: 500px;
            background-color: skyblue;
            margin: 100px auto;
            padding: 50px;
        }
        form input {
            width: 100%;
            line-height: 40px;
            margin-top: 20px;
        }

        #login {
            height: 40px;
        }
    </style>
</head>
<body>
    <form action="">
        <input type="text" placeholder="请输入用户名" name="username" /><br />
        <input type="password" placeholder="请输入密码" name="password" /><br />
        <input type="file" name="headerimg">
        <input type="submit" value="确定" id="login" />
    </form>

    <script>
        var usernameInput = document.querySelector('input[name="username"]')
        // usernameInput.onfocus = function(){
            // console.log('获取焦点')
        // }

        usernameInput.onblur = function(){
            // console.log('失去焦点')
            var username = usernameInput.value
            if(username === ''){
                alert('用户名不能为空!')
            }
        }
    </script>
</body>
</html>

5.触摸事件

移动端用的

事件源：document

touchstart:触摸开始事件

touchend:触摸结束事件

touchmove:触摸划过事件

今天重点：表单案例、拖拽案例、区块案例