从0到1：JavaScript快速上手（笔记三）

2021-03-04 本文已影响0人静赏月之美

事件基础

在Javacript中，一个事件包含3个部分

事件主角
- 按钮？div元素？其他？
事件类型
- 点击？移动？其他？
事件过程
- 这个事件都发生了什么

JavaScript中常见的事件

鼠标事件
键盘事件
表单事件
编辑事件
页面事件

1、事件调用方式

在script标签中调用
在元素中调用

1.1 在script标签中调用

在<script> </script>中调用事件

obj.eventName = function () 
{
    pass
}

window.onclick = function () 
{
    var mBtn = document.getElementById("btn")
    mBtn.onclick = function () 
    {
        window.alert("btn clicked")
    }
}

从本质上来说，这种事件调用方式用于操作元素的属性。只不过这个属性不是一般的属性，而是“事件属性”。

1.2 在元素中调用事件

function showMsg () 
{
    window.alert('show message')
}

<input type="button" value="元素调用事件" onclick="showMsg ()">

2、鼠标事件

事件	说明
`onclick`	鼠标点击事件
`onmouseover`	鼠标移入事件
`onmouseout`	鼠标移出事件
`onmousedown`	鼠标按下事件
`onmouseup`	鼠标松开事件
`onmousemove`	鼠标移动事件

我们可以为任意元素添加鼠标单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onclick = function () 
        {
            var mP = document.getElementById('test')
            mP.onmouseover = function () 
            {
                this.style.color = 'red'
            }
            mP.onmouseout = function () 
            {
                this.style.color = 'black'
            }
            mP.onmousedown = function () 
            {
                this.style.color = "blue"
            }
            mP.onmouseup = function () 
            {
                this.style.color = 'green'
            }
        }
    </script>
</head>
<body>
    <p id="test">这是一个测试</p>
</body>
</html>

3、键盘事件

描述	事件
键盘松开	`onkeyup`
键盘按下	`onkeydown`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () 
        {
            var mInput = document.getElementById('input')
            var mNum = document.getElementById('num')
            mInput.onkeyup = function () 
            {
                var str = mInput.value
                mNum.innerText = str.length
            }

        }
    </script>
</head>
<body>
    <input id="input" type="text">
    <div>
        字符串长度为：<span id="num">0</span>
    </div>
</body>
</html>

4、表单事件

常用的表单事件
- onfocus和onblur
- onselect
- onchange
- onsubmit

焦点事件

onfocus获取焦点时触发的事件

onblur失去焦点时触发的事件

具有焦点事件的元素只有两种。表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）和超链接

判断一个元素是否具有交单，按Tab键，能够选中的就是具有焦点特性的元素。

焦点事件一般用于单行文本框和多行文本框

一打开界面获得焦点，使用focus()方法

使用 placeholder实现类似效果

“选择事件”

当我们选中“单行文本框”或“多行文本框”中内容时，触发onselect事件

使用select()方法选取文本

多个选项选择事件

onchange事件常用于“具有多个选项的表单元素”的操作

5、编辑事件

oncopy

防止页面内容被复制

document.body.oncopy = function () 
{
    return false;
}

onselectstart

防止页面内容被选取

document.body.onselectstart = function ()
{
    return false;
}

oncontextmenu

禁止使用鼠标右键

document.oncontextmenu = function () 
{
    return false;
}

6、页面事件

onload表示文档加载完成后再执行的一个事件

onbeforeunload表示离开页面之前触发的一个事件

window.onbeforeunload = function(e) 
{
    e.returnValue = "下次再来"
}

事件进阶

如果要给元素添加一个事件，可以采用以下两种方式

事件处理器
- mBtn.onclick = function () {...}
- 事件处理器不能为一个元素添加多个相同事件
事件监听器

事件监听器

使用addEventListener()方法为一个元素添加事件。

调用方法

obj.addEventListener(type, fn, false)

obj一个DOM对象
type事件类型，字符串格式
fn匿名函数
false事件冒泡阶段调用

var mBtn = document.getElementById("btn")
mBtn.addEventListener("click", alertMes, false)
function alertMes ()
{
    window.alert ("Java Script")
}

多次调用window.onload

window.addEventListener("load", function () {...}, false)

使用addLoadEvent

//装饰者模式
function addLoadEvent (func)
{
    var oldonload = window.onload
    if (typeof window.onload != "function")
    {
        window.onload = func;
    }
    else
    {
        window.onload = function ()
        {
            oldonlad()
            func()
        }
    }
}

//调用方法
addLoadEvent(function())
{
    ...???
}

解绑事件
- 使用removeEventListener()方法为元素解绑
- ```
obj.removeEventListener(type, fn, false)
```
- 如果你想使用removeEventListener（　）方法来解除一个事件，那么在使用addEventListener（　）添加事件的时候，就一定要用定义函数的形式。
- removeEventListener（　）只可以解除“事件监听器”添加的事件，不可以解除“事件处理器”添加的事件。如果要解除“事件处理器”添加的事件，我们可以使用obj.事件名 = null;来实现

事件

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。

属性
type	事件类型
keyCode	键值对
shiftKey	是否按下“shift"键
ctrlKey	是否按下”ctrl”键
altKey	是否按下“alt”键

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () 
        {
            var mInput = document.getElementById('text')
            var mLabel = document.getElementById('label')
            mInput.addEventListener('keydown', function (e) {
                console.log(e.type)
                mLabel.innerText = e.type
                console.log(e.shi)
                mLabel.innerText = e.type + e.keyCode
                if (e.shiftKey | e.altKey | e.ctrlKey)
                {
                    mLabel.innerText = '禁止使用shift、alt、 ctrl'
                }
            }, false)
        }
    </script>
</head>
<body>
    <form>
        随便写点什么<input type="text" name="input" id="text">
        <br>
        <label id="label">触发了..</label>
    </form>
</body>
</html>

this

在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

解决闭包问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function myClickEvent (e) 
        {
            this.style.color = "hotpink";
        }
        window.onload = function ()
        {
            var mLi = document.getElementsByTagName("li")
            for (var i = 0; i < mLi.length; i++)
            {
                // mLi[i].addEventListener("click", myClickEvent, false)
                mLi[i].onclick = function () 
                {
                    // mLi[i].style.color = "hotpink" // 闭包问题
                    this.style.color = "hotpink"
                }
            }
        }
    </script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</body>
</html>