JavaScript事件相关

JavaScript事件相关_第1张图片

目录

  • JavaScript中的事件
    • ✨常用的事件
    • ✨事件的注册
    • ✨onload 加载完成事件
    • ✨onclick 单击事件
    • ✨onblur 失去焦点事件
    • ✨onchange 内容发生改变事件
    • ✨onsubmit 表单提交事件

JavaScript中的事件

什么是事件?
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

✨常用的事件

onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作。
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作。
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。

✨事件的注册

事件的注册又分为静态注册和动态注册两种。

什么是事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。

静态注册事件 :通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
动态注册事件 :是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码,叫动态注册。

动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名 = fucntion(){}

注意:静态注册和动态注册只是写法不一样,作用是一样。

✨onload 加载完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload 事件的方法
        function onloadFun() {
            alert(' 静态注册 onload  事件,所有代码');
        }
        // onload 事件动态注册。是固定写法
        window.onload = function () {
            alert(" 动态注册的 onload  事件");
        }
    </script>
</head>
<!-- 静态注册 onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
<body onload="onloadFun();">
-->
<body>
</body>
</html>

JavaScript事件相关_第2张图片
JavaScript事件相关_第3张图片

✨onclick 单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert(" 静态注册 onclick  事件");
        }
        // 动态注册 onclick 事件
        window.onload = function () {
// 1 获取标签对象
            /*
            * document 是 JavaScript 语言提供的一个对象(文档) 
* get 获取 * Element 元素(就是标签) * By 通过。。 由。。经。。。 * Id id 属性 * * getElementById 通过 id 属性获取标签对象 **/
var btnObj = document.getElementById("btn01"); // alert( btnObj ); // 2 通过标签对象 . 事件名 = function(){} btnObj.onclick = function () { alert(" 动态注册的 onclick 事件"); } } </script> </head> <body> <!-- 静态注册 onClick 事件 --> <button onclick="onclickFun();">按钮 1</button> <button id="btn01">按钮 2</button> </body> </html>

绑定单击事件后点击按钮有反应
JavaScript事件相关_第4张图片

JavaScript事件相关_第5张图片

✨onblur 失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 静态注册失去焦点事件
        function onblurFun() {
// console 是控制台对象,是由 JavaScript 语言提供,专门用来向浏览器的控制器打印输出, 用于测试使用
// log() 是打印的方法
            console.log(" 静态注册失去焦点事件");
        }
        // 动态注册 onblur 事件
        window.onload = function () {
//1 获取标签对象
            var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象 . 事件名 = function(){};
            passwordObj.onblur = function () {
                console.log(" 动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>

可以看到每次失去焦点事件,控制台都有打印
JavaScript事件相关_第6张图片

✨onchange 内容发生改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert(" 女神已经改变了");
        }
        window.onload = function () {
//1 获取标签对象
            var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象 . 事件名 = function(){}
            selObj.onchange = function () {
                alert(" 男神已经改变了");
            }
        }
    </script>
</head>
<body>
请选择你心中的女神:
<!-- 静态注册 onchange 事件 -->
<select onchange="onchangeFun();">
    <option>--女神--</option>
    <option>小红</option>
    <option>翠花</option>
    <option>小南</option>
</select>
请选择你心中的男神:
<select id="sel01">
    <option>--男神--</option>
    <option>亦凡</option>
    <option>易峰</option>
    <option>富城</option>
</select>
</body>
</html>

✨onsubmit 表单提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
// 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
            alert(" 静态注册表单提交事件---- 发现不合法");
            return flase;
        }
        window.onload = function () {
//1 获取标签对象
            var formObj = document.getElementById("form01");
//2 通过标签对象 . 事件名 = function(){}
            formObj.onsubmit = function () {
// 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交
                alert(" 动态注册表单提交事件---- 发现不合法");
                return false;
            }
        }
    </script>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
    <input type="submit" value=" 静态注册"/>
</form>
<form action="http://localhost:8080" id="form01">
    <input type="submit" value=" 动态注册"/>
</form>
</body>
</html>

你可能感兴趣的:(JavaWab,javascript,前端,开发语言)