javaWeb(六)----- 事件

简介: javaWeb(六)----- 事件

 事件简单学习

✔  功能: 某些组件被执行了某些操作后,触发某些代码的执行。

    造句:  xxx被xxx,我就xxx

                我方水晶被摧毁后,我就责备队友。

                敌方水晶被摧毁后,我就夸奖自己。

✔  如何绑定事件

(1)直接在html标签上,指定事件的属性(操作),属性值就是js代码

        事件:onclick--- 单击事件

(2)通过js获取元素对象,指定事件属性,设置一个函数

✔  案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
<img id="light" src="./img/off.gif">
<script>
    var light = document.getElementById("light");
    var flag = false ;
    light.onclick =  function () {
        if (flag){
            light.src = "./img/off.gif";
            flag = false ;
        }else {
            light.src = "./img/on.gif";
            flag = true;
        }
    }
</script>
</body>
</html>

image.gif

事件监听机制

✔  概念:某些组件被执行了某些操作后,触发某些代码的执行。    

        * 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了

        * 事件源:组件。如: 按钮 文本输入框...

        * 监听器:代码

        * 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码

✔  常见的事件:

(1)点击事件

         onclick:单击事件

         ondblclick:双击事件

(2)焦点事件

         onblur:失去焦点 --- 一般用于表单校验

         onfocus:元素获得焦点

(3)加载事件

         onload:一张页面或一幅图像完成加载

(4)鼠标事件

         onmousedown:鼠标按钮被按下

              * 定义方法时,定义一个形参,接收 event 对象

              * event 对象的 button 属性可以获取鼠标哪个键被点击了

         onmouseup:鼠标按键被松开

         onmousemove:鼠标被移动

         onmouseover:鼠标移到某元素之上

         onmouseout:鼠标从某元素移开

(5)键盘事件

         onkeydown:某个键盘按键被按下

         onkeyup:某个键盘按键被松开

         onkeypress:某个键盘按键被按下并松开

(6)选择和改变

          onchange:域的内容被改变

          onselect:文本被选中

(7)表单事件

          onsubmit:确认按钮被点击

              * 可以阻止表单的提交

              * 方法返回 false 则表单被阻止提交

          onreset:重置按钮被点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>
        //加载完成事件  onload
        window.onload = function(){
            /*// 失去焦点事件
            document.getElementById("username").onblur = function(){
                alert("失去焦点了...");
            }*/
            /*// 绑定鼠标移动到元素之上事件
            document.getElementById("username").onmouseover = function(){
                alert("鼠标来了....");
            }*/
           /* // 绑定鼠标点击事件
            document.getElementById("username").onmousedown = function(event){
               // alert("鼠标点击了....");
                alert(event.button);
            }*/
          /* document.getElementById("username").onkeydown = function(event){
                // alert("鼠标点击了....");
               // alert(event.button);
                if(event.keyCode == 13){
                    alert("提交表单");
                }
            }*/
           /* document.getElementById("username").onchange = function(event){
                alert("改变了...")
            }
            document.getElementById("city").onchange = function(event){
                alert("改变了...")
            }*/
            /*document.getElementById("form").onsubmit = function(){
                //校验用户名格式是否正确
                var flag = false;
                return flag;
            }*/
        }
        function checkForm(){
            return true;
        }
    </script>
</head>
<body>
<!--
    function fun(){
       return  checkForm();
    }
 -->
<form action="#" id="form" onclick="return  checkForm();">
<input name="username" id="username">
<select id="city">
    <option>--请选择--</option>
    <option>北京</option>
    <option>上海</option>
    <option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>

image.gif


相关文章
|
21天前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
206 1
|
20天前
|
存储 前端开发 Java
【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
本文介绍基于Java Web的在线商城技术方案与实现,涵盖三层架构设计、MySQL数据库建模及核心功能开发。通过Spring MVC + MyBatis + Thymeleaf实现商品展示、购物车等模块,提供完整代码示例,助力掌握Java Web项目实战技能。(238字)
150 0
|
2月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
339 63
|
2月前
|
前端开发 Java 数据库
Java 项目实战从入门到精通 :Java Web 在线商城项目开发指南
本文介绍了一个基于Java Web的在线商城项目,涵盖技术方案与应用实例。项目采用Spring、Spring MVC和MyBatis框架,结合MySQL数据库,实现商品展示、购物车、用户注册登录等核心功能。通过Spring Boot快速搭建项目结构,使用JPA进行数据持久化,并通过Thymeleaf模板展示页面。项目结构清晰,适合Java Web初学者学习与拓展。
192 1
|
3月前
|
缓存 NoSQL Java
Java Web 从入门到精通之苍穹外卖项目实战技巧
本项目为JavaWeb综合实战案例——苍穹外卖系统,涵盖Spring Boot 3、Spring Cloud Alibaba、Vue 3等主流技术栈,涉及用户认证、订单处理、Redis缓存、分布式事务、系统监控及Docker部署等核心功能,助你掌握企业级项目开发全流程。
326 0
|
3月前
|
安全 JavaScript Java
java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
本项目为一个完整的JavaWeb应用案例,采用Spring Boot 3、Vue 3、MySQL、Redis等最新技术栈,涵盖前后端分离架构设计、RESTful API开发、JWT安全认证、Docker容器化部署等内容,适合掌握企业级Web项目全流程开发与部署。
158 0
|
6月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
101 15
|
6月前
|
存储 机器学习/深度学习 监控
如何监控员工的电脑——基于滑动时间窗口的Java事件聚合算法实现探析​
在企业管理场景中,如何监控员工的电脑操作行为是一个涉及效率与合规性的重要课题。传统方法依赖日志采集或屏幕截图,但数据量庞大且实时性不足。本文提出一种基于滑动时间窗口的事件聚合算法,通过Java语言实现高效、低资源占用的监控逻辑,为如何监控员工的电脑提供一种轻量化解决方案。
138 3
|
9月前
|
Java 开发者 Spring
java springboot监听事件和处理事件
通过上述步骤,开发者可以在Spring Boot项目中轻松实现事件的发布和监听。事件机制不仅解耦了业务逻辑,还提高了系统的可维护性和扩展性。掌握这一技术,可以显著提升开发效率和代码质量。
216 33
|
8月前
|
网络协议 Java Shell
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
423 7

热门文章

最新文章