js_事件

最新推荐文章于 2021-06-22 22:59:03 发布
最新推荐文章于 2021-06-22 22:59:03 发布
阅读量176 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37243717/article/details/79015553
版权

事件简介

<!DOCTYPE html>
<!--

    事件：就是javaScript与html交互是通过事件实现的，事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间
    比如：点击事件，先点击然后再去执行一系列的代码

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                var oBtn = document.getElementById("btn");

                //事件处理：对象.事件处理函数=触发后执行的函数

                // oBtn.onclick = function(){
                //     alert("OK");
                // }
                //oBtn：一个对象
                //onclick：这个是事件处理函数或者绑定给指定对象的属性(也是一个事件监听器)
                //function(){}：匿名函数是事件触发要被执行的函数

                //第二种方式
                oBtn.onclick = fin;
                function fin(){
                    alert("OK");
                }
            }
        </script>
    </head>
    <body>
        <button id="btn">确定</button>
    </body>
</html>

事件模型

<!DOCTYPE html>
<!--

    内联模型：
        在内联模型中，事件处理函数是标签的一个属性：这种模型是js代码与html混写,不建议使用
    脚本模型：
        内联模型中违反了js代码与html代码分离的原则，所以我们可以在js中处理事件，这个就是脚本模型;

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
        <script type="text/javascript">

            window.onload = function(){

                var oDiv = document.getElementById("box");
                oDiv.onclick = function(){
                    alert("Ok");
                }
            }

        </script>
    </head>
    <body>
        <!-- 内联模型 -->
        <!-- <div id="box"  onclick="alert('OK')"></div> -->

        <div id="box"></div>
    </body>
</html>

事件函数(鼠标事件)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                top: 200px;
                left: 500px;
            }
        </style>
        <script type="text/javascript">

            window.onload = function(){

                // onclick：当用户单击鼠标按钮时触发；
                document.onclick = function(){
                    // alert("胖胖");
                }

                //ondblclick 当用户双击后触发；
                document.ondblclick = function(){
                    // alert("OK");
                }

                // onmousedown 当用户按了鼠标还没有弹起时触发
                // 分为三步：按下，按住不动，抬起
                document.onmousedown = function(){
                    // alert("Ok");
                }

                document.onmouseup = function(){
                    // alert("鼠标抬起");
                }


                // onmouseover事件  鼠标移入时触发
                // var oDiv = document.getElementById("box");
                // var timer = null;
                // oDiv.onmouseover = function(){
                //     // alert("鼠标移入了");
                //     timer = setInterval(function(){
                //         oDiv.style.width = oDiv.clientWidth + 4 + "px";
                //     },100);
                // }

                //onmouseout事件  鼠标移出时触发
                // oDiv.onmouseout = function(){
                //     // alert("鼠标移出了");
                //     clearInterval(timer);
                // }



                // onmousemove事件  鼠标移动时触发;
                var oDiv = document.getElementById("box");
                var num = 0;
                oDiv.onmousemove = function(){
                    document.title = ++num;
                    // alert("Ok");
                }


            }

        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                //slice方法，切割字符串
                var str = "你还可以输入n次字符";
                var str1 = str.slice(2,4);
                // alert(str1);

                var an = "an";
                alert(an.length);
            }

        </script>
    </head>
    <body>

    </body>
</html>

事件函数(键盘函数)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                //onkeydown 当用户按下时会触发,如果按住不动，它会重复触发
                // var oTxt = document.getElementById("txt");
                // var num = 0;
                // oTxt.onkeydown = function(){
                //     document.title = ++num;
                //     // alert("按下键了");
                // };


                // onkeyup事件  当用户抬起时触发；
                // 作业：自己实现一个下以的功能
                var oTxt = document.getElementById("txt");
                var oStr = document.getElementsByTagName("strong")[0];
                oTxt.onkeyup = function(){
                    var num1 = oTxt.value.length;  //获取文本里字符的个数
                    var num2 = 150 - num1;
                    if(num2<=0){
                        oTxt.value = oTxt.value.slice(0, 150);
                        oStr.innerHTML = "您还可以输入0个字符";
                    }else{
                        oStr.innerHTML = "您还可以输入"+num2+"个字符";
                    }
                }


                // onkeypress事件  按下字符键时触发，如果按住不放，也会重复触发
                // var oTxt = document.getElementById("txt");
                // var num = 0;
                // oTxt.onkeypress = function(){
                //     document.title = ++num;
                //     // alert("Ok");
                // }

            }

        </script>
    </head>
    <body>

        <textarea name="" id="txt" cols="30" rows="10"></textarea>
        <br>
        <strong>您还可以输入150个字符</strong>

    </body>
</html>

事件函数(html事件)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

            window.onload = function(){

                //onload事件：等完全加载所有的内容(包括图片，视频，脚本等)，就执行或者触发
                //function show(){
                //     var obj1 =  document.getElementById("box1");
                //     alert(obj1);
                // }


                // onchange事件  当文本框内容改变并且失去焦点后触发

                // 作业：根据现有的知识完美下面的功能
                var oTxt = document.getElementById("txt");
                var oStr = document.getElementsByTagName("strong")[0];

                oTxt.onchange = function(){
                    //判断是不是Number类型(0的话，可能会变成布尔类型)
                    if(Number(oTxt.value) || oTxt.value == "0"){
                        oStr.style.color = "green";
                    }else{
                        oStr.style.color = "red";
                    }
                }


                // onfocus事件 当元素获取焦点时触发
                var oTxt = document.getElementById("txt");
                oTxt.onfocus = function(){
                    this.style.background = "#ccc";
                };

                // onblur事件  当元素失去焦点时触发
                oTxt.onblur = function(){
                    this.style.background = "";
                };


                // onsubmit事件 当用户点击提交按钮时触发；
                var form = document.getElementsByTagName("form")[0];
                form.onsubmit = function(){
                    alert("验证不通过");
                }

                //onreset事件 用户点击重置按钮时触发
                form.onreset = function(){
                    alert("您确定要重置");
                }

            }


        </script>
    </head>
    <body>

        <div id="box1"></div>
        <input type="text" id="txt"><strong>请输入数字</strong><br>

        <form action="#">
            <input type="submit">
            <input type="reset">
        </form>

    </body>
</html>

事件对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
        <script type="text/javascript">

            window.onload = function(){

                // function show(){
                //     alert(arguments.length);   //打印0
                // };
                // show();

                //事件函数
                // var oDiv = document.getElementById("box");
                // oDiv.onclick = function(){
                //     alert(arguments[0]);    //打印[object MouseEvent] 事件对象
                //     alert(arguments.length);   //打印1
                // };



                //事件对象的兼容
                var oDiv = document.getElementById("box");
                oDiv.onclick = function(ev){
                    //alert(ev);    //在ie8以下不兼容，打印nudefined但不报错；
                    //alert(event);   //在火狐下不兼容，报错

                    //做兼容性处理
                    var oEvent = ev || event;
                    alert(oEvent);
                }


            }

        </script>
    </head>
    <body>

        <div id="box"></div>

    </body>
</html>

拖拽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                border-radius: 50px;
            }
        </style>
        <script type="text/javascript">

            // clientX 可以获取鼠标的距离左边框的大小
            // clientY 可以获取鼠标的距离上边框的大小

            //作业：自己实现一个拖拽；用到的知识点(onmousedown,onmousemove,onmouseup,事件对象,clientY,clientX属性 )
            window.onload = function(){

                document.onclick = function(ev){
                    var oEvent = ev || event;
                    alert("X坐标为："+oEvent.clientX);
                    alert("Y坐标为："+oEvent.clientY);
                }
            }

        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>
Casablanca_jhBi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript_事件驱动应用程序的低代码编程.zip
05-20
事件模型在JavaScript中分为两种类型：DOM事件模型（Document Object Model）和原生事件模型（如Node.js中的EventEmitter类）。DOM事件模型主要用于浏览器环境，原生事件模型则更多地用于服务器端Node.js应用。 2....
js.rar_javascript_js_js 农历_lunar
09-22
这个名为"js.rar_javascript_js_js 农历_lunar"的压缩包包含了一个专门处理中国农历的JavaScript实例。在这个实例中，开发者仅用了一个文件就实现了农历的计算和展示功能，展现了JavaScript的强大灵活性和高效性。 ...
JS事件
a_靖的博客
12-17 480
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 事件绑定:平时绑定事件的三种方法。 1.嵌入dom <button onclick="open()">按钮</button> <script>function open(){}</script> 2.直接绑定 <button id="bt...
js事件详解
weixin_30421809的博客
07-07 107
一、焦点事件 焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入 设置焦点方式：点击、tab、js onfocus:当元素获取到焦点的时候触发 onblur:当元素失去焦点的时候触发 obj.focus();给指定的元素设置焦点 obj.blur();取消指定元素的焦点 obj.select();选择制定元素里面的文本内容（用户输入的内容，可以操...
js事件
快乐八哥的博客
02-02 343
js事件，我这里主要谈谈这三种，冒泡事件，委托事件，以及事件监听。 所谓的冒泡事件，通俗一点就是，一个泡泡往上冒，当往上面的节点事件与目标节点事件（这里是p）一致时，也会发生。 直接上货吧。老样子，先把html放上来，要明白的是这里的节点树是： body>div>p，都添加了onclick事件，目标函数都是add(),赋予的参数不一样 body>div.maopao 这里是要放的内容块
threejs_opengl_javascript_js_ThreeJS_3d_
10-02
标题中的"threejs_opengl_javascript_js_ThreeJS_3d_"揭示了我们正在讨论的是一个与Three.js相关的项目，Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建和展示3D图形。WebGL是一种JavaScript API，它...
js_game.rar_javascript_js 游戏_js游戏
最新发布
09-24
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级编程语言，特别适合于创建交互式网页和游戏。本文将深入探讨如何使用JavaScript开发一款小型游戏，这对于初学者来说是一个很好的学习项目。 首先，理解...
js.rar_javascript_javascript 图_js_流程_请假
09-21
开发者可以利用JavaScript事件监听和处理机制，根据用户的操作（如点击按钮）来触发流程的下一步。 流程分类为“人事”，意味着这个流程设计是针对企业内部的人事管理流程，可能涉及到员工的个人信息、假期余额、...
事件冒泡和事件捕获
m0_50520143的博客
04-02 320
什么是事件 JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者） 什么是事件流 事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。 事件冒泡、事件捕获 IE提出的事件流是事件
JS 事件
专栏
03-06 1462
Events are actions that can be detected by JavaScript.JS可以察觉到事件有动作 Events事件By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaSc
js 事件
shimengren1994的博客
05-12 156
js事件代表的是用户和页面的交互行为，一般都是绑定在dom元素上的。js的事件流表示的是从页面中接收事件的顺序。有两种事件流：1.事件冒泡：事件开始由最具体的元素然后逐级向上传播到较为不具体的点；2.事件捕获：事件从最不具体的点然后一级级往下到最具体的元素。dom的事件流包括三个阶段：事件捕获阶段，处于目标阶段以及事件冒泡阶段。js的事件处理程序:1.html事件处理程序eg &lt;div on...
Js 事件
qq_38256266的博客
06-22 133
事件1、什么是事件2、事件的组成3、事件对象4、offset系列5、事件类型6、事件对象兼容写法7、事件绑定的方式 1、什么是事件 js中鼠标点击，鼠标滑过都是事件。 2、事件的组成 事件源：（谁触发的事件） 事件类型：（触发事件类型） 事件处理函数: function(){ } （触发后要干的事） 注意：事件处理函数中有一个this，它代表事件源。 3、事件对象 3.1 概念 事件触发时，记录了一系列与该事件相关的信息 3.2 事件对象的获取 在事件处理函数的第一个形参位置，写e
JavaScript事件处理详解
"JavaScript事件处理是网页交互的核心机制，允许开发者响应用户行为和浏览器状态变化。事件处理器是与特定事件关联的JavaScript代码，当事件发生时执行。本章涵盖了JavaScript中的事件处理概念、预定义事件处理器、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值