事件基础

最新推荐文章于 2022-11-16 16:54:02 发布
最新推荐文章于 2022-11-16 16:54:02 发布
阅读量140 收藏
点赞数
分类专栏： JavaScript学习 文章标签： 列表 js javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dfg98/article/details/112849745
版权

事件包括3部分：
（1）事件主角：按钮、div元素、其他
（2）事件类型：点击、移动、其他
（3）事件过程

事件类型：

1、鼠标事件

事件含义
onclick鼠标单击事件
onmouseover鼠标移入事件
onmouseout鼠标移出事件
onmousedown鼠标按下事件
onmouseup鼠标松开事件
onmousemove鼠标移动事件

（1）鼠标单击

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = alertMes;
            function alertMes() {
                alert("欢迎来到绿叶学习网！");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮"/>
</body>
</html>

（2）鼠标移入和鼠标移出

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oP = document.getElementById("content");
            oP.onmouseover = function () 
            {
                this.style.color = "red";
            };
            oP.onmouseout = function () 
            {
                this.style.color = "black";
            };
        };
    </script>
</head>
<body>
    <p id="content">绿叶学习网</p>
</body>
</html>

（3）鼠标按下和鼠标松开

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oTitle = document.getElementById("title");
            var oBtn = document.getElementById("btn");
            oBtn.onmousedown = function () 
            {
                oTitle.style.color = "red";
            };
            oBtn.onmouseup = function () 
            {
                oTitle.style.color = "black";
            };
        };
    </script>
</head>
<body>
    <h1 id="title">绿叶学习网</h1>
    <hr />
    <input id="btn" type="button" value="button" />
</body>
</html>

2、键盘事件
（1）键盘按下：onkeydown
（2）键盘松开：onkeyup
例：统计输入字符的长度

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oTxt = document.getElementById("txt");
            var oNum = document.getElementById("num");
            oTxt.onkeyup = function () 
            {
                var str = oTxt.value;
                oNum.innerHTML = str.length;
            };
        };
    </script>
</head>
<body>
    <input id="txt" type="text" />
    <div>字符串长度为：<span id="num">0</span></div>
</body>
</html>

3、表单事件
（1）获取（失去）焦点：onfocus、onblur
具有“获取焦点”和“失去焦点”特点的元素有：表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）、超链接
例：搜索框

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #search{color:#bbbbbb;}
    </style>
    <script>
        window.onload = function () 
        {
            //获取元素对象
            var oSearch = document.getElementById("search");
            //获取焦点
            oSearch.onfocus = function () 
            {
                if (this.value == "百度一下，你就知道") 
                {
                    this.value = "";
                }
            };
            //失去焦点
            oSearch.onblur = function () 
            {
                if (this.value == "") 
                {
                    this.value = "百度一下，你就知道"; 
                }
            };
        }
    </script>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道"/>
    <input type="button" value="搜索" />
</body>
</html>

（2）选中“单行文本框”或“多行文本框”中的内容：onselect

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oTxt1 = document.getElementById("txt1");
            var oTxt2 = document.getElementById("txt2");
            oTxt1.onselect = function () 
            {
                alert("你选中了单行文本框中的内容");
            };
            oTxt2.onselect = function () 
            {
                alert("你选中了多行文本框中的内容");
            };
        }
    </script>
</head>
<body>
    <input id="txt1" type="text" value="如果我真的存在，也是因为你需要我。"/><br />
    <textarea id="txt2" cols="20" rows="5">如果我真的存在，也是因为你需要我。</textarea>
</body>
</html>

（3）具有多个选项的表单元素：onchange
在单选框、复选框、下拉列表选择某一项时触发。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oFruit = document.getElementsByName("fruit");
            var oP = document.getElementById("content");
            for (var i = 0; i < oFruit.length; i++) 
            {
                oFruit[i].onchange = function () 
                {
                    if (this.checked) 
                    {
                        oP.innerHTML = "你选择的是：" + this.value;
                    }
                };
            }
        }
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p id="content"></p>
</body>
</html>

4、编辑事件
（1）防止内容被复制：oncopy
语法：

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

例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            document.body.oncopy = function () 
            {
                return false;
            }
        }
    </script>
</head>
<body>
    <div>不要用战术上的勤奋，来掩盖战略上的懒惰。</div>
</body>
</html>

（2）防止页面内容被选取：onselectstart

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

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            document.body.onselectstart = function () 
            {
                return false;
            }
        }
    </script>
</head>
<body>
    <div>成功的人总喜欢神化自己，为的是让其他人觉得成功很难。</div>
</body>
</html>

（3）禁止鼠标右键：oncontextmenu

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

例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            document.oncontextmenu = function () {
                return false;
            }
        }
    </script>
</head>
<body>
    <div>每个人的人生掌握在自己的手里，而不是别人的评价里。</div>
</body>
</html>

说明：尽管鼠标右键功能被禁用，但可以用快捷键，如使用ctrl+c快捷键来复制内容；使用ctrl+s快捷键来保存网页等。
5、页面事件
（1）文档加载完成后再执行的一个事件：onload
语法：

window.onload = function()
{
    ……
}

举例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                alert("JavaScript");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="提交" />
</body>
</html>

（2）离开页面之前触发的一个事件：onbeforeunload
语法：

window.onbeforeunload = function()
{
    ...
}

例：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            alert("欢迎来到绿叶学习网！");
        }
        window.onbeforeunload = function (e) 
        {
            e.returnValue = "记得下来再来喔！";
        }
    </script>
</head>
<body>
</body>
</html>
事件调用方式

1、在script标签中调用

obj.事件名 = function()
{
    ...
};

说明：obj是一个DOM对象，所谓的DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementById("btn");
            //为元素添加点击事件
            oBtn.onclick = function () 
            {
                alert("绿叶学习网");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="弹出" />
</body>
</html>

2、在元素中调用
指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes()
        {
            alert("绿叶学习网");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes()" value="弹出" />
</body>
</html>
mmm要努力做码农！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
C# event Action＜＞ & event EventHandler＜＞
Dorthyn的博客
10-02 2051
event作用 我们可以通过对event的使用完成回调功能。本节通过简单的例子引入Action和EventHandler。 EventHandler class Program { private static event EventHandler<DiagnosticsArgs> DiagnosticsEvent; static void Main(string[] args) { DiagnosticsE
C#基础-事件 Event
Peter的博客
02-21 545
事件主要使用三个类： 1. 参数定义类testEventArgs：继承自EventArgs（虽然EventArgs什么也不做） 2. 事件发布类monitor 3. 事件侦听类Receiver using System; using System.Collections.Generic; using System.Text; namespace EventLearn ...
事件 - 基础
weixin_46544600的博客
07-03 149
事件的概念 JavaScript使我们有能力创建动态页面，网页中的每个元素都可以产生某些可以触发JavaScript 函数的事件。我们可以认为事件是可以被JavaScript 侦测到的一种行为。 事件流 事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。 使用返回值改变HTML元素的默认行为 HTML 元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上return false 来阻止它
js移动端事件基础及常用事件库详解
01-19
一、事件基础 PC:click、mouseover、mouseout、mouseenter、mouseleave、mousemove、mousedown、mouseup、mousewheel、keydown、keyup、load、scroll、blur、focus、change… 移动端:click（单击）、load、scroll、...
论文研读2-回到事件基础：通过光度恒常性实现事件摄像头图像重构的自监督学习
最新发布
09-10
论文研读2-回到事件基础：通过光度恒常性实现事件摄像头图像重构的自监督学习
关于js定时器和js事件基础案例小练习附知识点.html
08-06
每天进步一点点，加油！
突发公共卫生事件基础知识理论考核试卷A卷.doc
10-24
突发公共卫生事件基础知识理论考核试卷A卷.doc
我国首个“突发事件基础数据处理标准”发布.pdf
08-15
#资源达人分享计划#
JS事件基础
weihongda666的博客
01-09 191
·  整个页面点击事件 //整个页面的点击事件用document而不是body，因为body里面没有东西就不会撑起来 document.onclick=function () { alert('aaaa'); };·  事件冒泡 事件会一层一层往父级父级...的传 ·  消除冒泡 //取消冒泡 oEvent.cancelBubble=true;·  点击坐标
C# Event Action与Invoke
热门推荐
GTWLin的博客
10-24 1万+
趁着1024这个好日子来讲一下 通常在C# 中 为了将功能模块化 我们会把重复使用的功能写到类 (Class)里面 但是写在类里面的方法是无法直接对主窗体界面进行操作的 这个时候我们就需要使用 “委托” 关于委托的讲解可以参考这篇 https://www.cnblogs.com/wudiwushen/archive/2010/04/20/1703368.html 讲的挺浅显易懂的 但随着时代的进...
事件基础（事件三要素、事件操作步骤、常见的事件）和操作元素
m0_61973028的博客
06-23 2294
元素操作、innerHTMl、innerText
C#事件的写法，五大要素
sykxbn的博客
11-16 451
事件的拥有者，事件，事件的响应者，事件处理器，事件的订阅
事件基础三
Hi,MrGong
08-08 313
事件冒泡<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <style type="text/css"> div{padding: 50px;} #div1{background: #1836EC;} #div2{b
事件 event Action
zhliu1991的专栏
11-28 2526
public class A { public event Action OnStateChanged; } public class B { public A Stage; public event Action OnXXStageChanged { add { if(Stage != null){
关于C#中的自定义事件生成
weixin_34056162的博客
04-25 134
关于C#中的自定义事件生成： 目标：通过一个实例来按步骤说明C#中如何创建，引发，接收和取消事件。例子是一个窗体程序，一个按钮和一个标签，点击按钮的时候就触发一个事件得到当前时间，如果秒是后30秒就输出一个Wasn't a right time!! 一，创建一个事件类型： 1，新建一个窗体应用程序，添加一个button和lebelInfo，name分别为buttonRaise和labelIn...
C# 中的delegate、event、Action、Func
weixin_30485379的博客
09-24 148
缘起： 　　之前一直很纠结C#中（delegate、event、Action、Func）的用法，这么多方法，感觉每次使用的时候好像都没啥区别，老感觉微软有多此一举之嫌，不过今天花了点时间好好研究了下，才发现他们实质上的区别。 解惑： 　　我发现，这四种类型中不管哪种，其实都属于委托，只是展现的形式不同而已，无论哪种，其实都可以采用delegate实现，为什么会衍生出其他三种形式，我猜是...
JavaScript事件基础与应用
"10-JS事件基础.pptx" JavaScript是一种广泛用于网页和网络应用的脚本语言，尤其在浏览器环境中，它对于交互性的实现至关重要。本课件深入讲解了JavaScript事件的基础知识，包括事件对象、事件冒泡、DOM事件流以及...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值