事件初识_朕葱哥的博客-CSDN博客

本文链接：https://blog.csdn.net/qq_43243728/article/details/102964500

概念

事件定义：JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义 [1] 。

onabort 图像加载被中断 1 3 4
           onblur 元素失去焦点 1 2 3
           onchange 用户改变域的内容 1 2 3
           onclick 鼠标点击某个对象 1 2 3
           ondblclick 鼠标双击某个对象 1 4 4
           onerror 当加载文档或图像时发生某个错误 1 3 4
           onfocus 元素获得焦点 1 2 3
           onkeydown 某个键盘的键被按下 1 4 3
           onkeypress 某个键盘的键被按下或按住 1 4 3
           onkeyup 某个键盘的键被松开 1 4 3
           onload 某个页面或图像被完成加载 1 2 3
           onmousedown 某个鼠标按键被按下 1 4 4
           onmousemove 鼠标被移动 1 6 3
           onmouseout 鼠标从某元素移开 1 4 4
           onmouseover 鼠标被移到某元素之上 1 2 3
           onmouseup 某个鼠标按键被松开 1 4 4
           onreset 重置按钮被点击 1 3 4
           onresize 窗口或框架被调整尺寸 1 4 4
           onselect 文本被选定 1 2 3
           onsubmit 提交按钮被点击 1 2 3
           onunload 用户退出页面 1 2

1、事件绑定的几种方式

在Javascript中，事件绑定一共有3种方式：

① 行内绑定

② 动态绑定

③ 事件监听

2、行内绑定

基本语法：

<标签属性列表事件=”事件的处理程序” />

例：<input type=’button’ οnclick=’display()’ />

以上代码就是最典型的行内绑定，虽然可以完成我们需要的功能，但是其把结构+样式+行为都绑定在同一个标签中，不利于后期维护。

3、动态绑定

基本语法：

dom对象.事件 = 事件的处理程序（通常是一个匿名函数）

通过动态绑定这种思想改进上题，效果如下图所示：

4、在Javascript中，有一个特殊对象叫做this，其随着运行环境的不同，其指向也是不同的！

行内绑定中，其事件处理中的this指向了全局window对象

动态绑定中，其事件处理中的this指向了当前正在操作的dom对象

5、封装一个自定义函数

在Javascript中，我们操作的大多数都是dom对象，获取方式都是通过document.的形式，这样代码过于冗余，所以为了解决这个问题，我们封装一个自定义函数，专门用于获取指定id的dom对象。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件的使用</title>
        <script>
            /**
             *  在JavaScript中，this指针比较特殊
             *  默认情况下（全局情况下）this指的是window对象
             *  在事件中，this指向事件的触发者，也就是事件源
             *  在类中，this执行对象的本身
             *
             */
            function test01(node) {
                // 这种方式有缺点
                // 1、拿不到事件对象
                // 2、打破了三层分离
                // 3、这种绑定方式，事件源默认需要使用this传递，否则this执行window
                console.info(this)
                alert("点击了一下")
                console.info(node)
            }
        </script>
    </head>
    <body>
        <!-- JavaScript 绑定事件的第一种方式，在标签内部绑定 -->
        <button onclick="test01(this);">点击你就知道</button>
        <button id="btn">点击你就知道</button>
        <script>
            // json
            //        var obj = {};
            // mode0的第二种事件绑定方式，（店家推荐）
            /*     let _btn = document.getElementById("btn");        // 绑定了一个点击事件
        _btn.onclick = function (e) {
            // 1、符合了三层分离的要求
            // 在这种绑定的方式中，事件对象默认就是函数第一个参数
//            alert("点了一下")
            console.info(e)
            // 事件源
            console.log(e.target)
        }*/
            //DOM2提供了事件监听方式
            var _btn = document.getElementById("btn");
            _btn.addEventListener("click", function(e) {
                console.log(e)
                console.log(this == e.target)
            })
            // 事件监听的方式，IE跟W3C完全是背离的
            // 1、监听方式不一样
            // 2、this指针指向不一样
            // 3、事件对象的获取方式也不一样
            _btn.attachEvent("onclick", function() {
                window.event
                // this
            })
           
        </script>
    </body>
</html>

事件案例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表单使用</title>
		<script>
			window.onload = function () {
            document.getElementById("uname").onblur = function () {
                if (this.value.trim().length  == 0) {
                    document.getElementById("info").innerHTML = "<span style='color: red'>对不起，用户名不能为空</span>"
                } else {
                    document.getElementById("info").textContent = ""
                }
            }
            
        }
    </script>
	</head>
	<body>
		<input id="uname" type="text" placeholder="请输入用户账号"><span id="info"></span>
	</body>
</html>