事件

最新推荐文章于 2024-01-16 21:31:26 发布

原创最新推荐文章于 2024-01-16 21:31:26 发布 · 255 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

81 篇文章

订阅专栏

22 篇文章

订阅专栏

事件是什么

一、JavaScript事件简介

一个事件应该有3部分：

（1）这个事件是干啥的，是点击呢，还是移动呢；
（2）事件过程都发生了什么？
（3）当然还有目睹整个事件的吃瓜群众，也就是用户；

JavaScript的事件很多，包括5大部分：

（1）鼠标事件；
（2）键盘事件；
（3）表单事件；
（4）编辑事件；
（5）页面相关事件；

JavaScript事件调用方式

在JavaScript中，调用事件的方式共有2种：

（1）在script标签中调用；
（2）在元素中调用；

一、在script标签中调用事件

在script标签中调用事件，也就是在< script>< /script标签内部调用事件。

语法：

var 变量名 = document.getElementById("元素id");//获取某个元素，并赋值给某个变量
    变量名.事件处理器 = function()
{
    ……
}

举例：

 var e = document.getElementById("btn");
        e.onclick = function () {
            alert("绿叶学习网");
}

二、在元素中调用事件

在元素事件中引入JS，就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，这个属性指的是元素的“事件属性”。

JavaScript鼠标事件

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

一、鼠标单击事件

在JavaScript中，鼠标单击事件是onclick。

单击事件可谓JavaScript中最常用的事件了，在之前的学习中我们也接触了不少，例如点击某个按钮弹出一个提示框。这里大家一定要注意一点，单击事件并不是只有按钮才有，任何元素我们都可以为它添加单击事件！

举例：

<head>
    <title></title>
    <style type="text/css">
        #btn
        {
            display:inline-block;
            width:80px;
            height:24px;
            line-height:24px;
            text-align:center;
            border-radius:3px;
            background-color:rgba(69,184,35,1.0);
            color:White;
            cursor:pointer;
        }
        #btn:hover
        {
            background-color:rgba(69,184,35,0.8);
        }
    </style>
</head>
<body>
    <div id="btn">调试代码</div>
    <script type="text/javascript"> 
        var e = document.getElementById("btn");
        e.onclick = function () { 
            alert("玩我么？");
        }
    </script>

二、鼠标移入和移出事件

在JavaScript中，鼠标移入和移出事件分别是onmouseover和onmouseout。

法一：

<head>
    <title></title>
    <style type="text/css">
        #lvye
        {
            display:inline-block;
            border:1px dashed black;
        }
    </style>
</head>
<body>
    <h1 id="lvye">绿叶学习网</h1>
    <script type="text/javascript">
        var e = document.getElementById("lvye");
        e.onmouseover = function () {
            this.style.color = "red";
            this.style.borderColor="red"
        }
        e.onmouseout = function () {
            this.style.color = "black";
            this.style.borderColor = "black"
        }
    </script>

法二：

<head>
    <title></title>
    <style type="text/css">
        #lvye
        {
            display:inline-block;
            border:1px dashed black;
        }
    </style>
</head>
<body>
    <h1 id="lvye" onmouseover="this.style.color='red';this.style.borderColor='red';" onmouseout="this.style.color='black';this.style.borderColor='black';">绿叶学习网</h1>
</body>

三、鼠标按下和松开事件

在JavaScript中，鼠标的按下和松开事件分别是onmousedown和onmouseup。

onmousedown表示鼠标按下的一瞬间所触发的事件，而onmouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道，只有“按下”才有“松开”这一说。说他俩整天搞基一点不为过。

举例：

<body>
    <div id="main">
        <h1 id="lvye">绿叶学习网</h1>
        <hr />
        <input id="btn" type="button" value="button" />
    </div>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        var e = document.getElementById("lvye");
        btn.onmousedown = function () {
            e.style.color = "red";
        }
        btn.onmouseup = function () {
            e.style.color = "black";
        }
    </script>

JavaScript键盘事件

在JavaScript中，常用的键盘事件有3种：

（1）onkeypress事件；
（2）onkeydown事件；
（3）onkeyup事件；

JavaScript事件通过以下3个事件来捕获键盘事件：onkeydown、onkeypress与onkeyup。这三个事件的执行顺序如下：onkeydown → onkeypress → onkeyup。

一、onkeypress事件

在JavaScript中，onkeypress事件是在键盘上的某个键被按下到松开整个过程中触发的事件。

举例：

 function refresh() {
            //判断是否按下R键
            if (window.event.keyCode == 82) {
                location.reload();    //刷新页面
            }
        }
        //调用函数
        document.onkeypress = refresh;

二、onkeydown事件

onkeydown跟onkeypress非常相似，也是在键盘的按键被按下时触发。但是这2个事件有一下2大区别：

（1）onkeypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而onkeydown无论是按下“字符键”还是“功能键”都会触发；

（2）按下“字符键”会同时触发onkeydown和onkeypress这2个事件，但是这2个事件有一定顺序：onkeydown>onkeypress；

说实话，onkeydown与onkeypress也没多大区别。像上面举例1，使用onkeydown同样能够实现。

三、onkeyup事件

在JavaScript中，onkeyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件。

onkeyup事件在实际开发也常用到，比如在登录注册时，很多文本框都是在用户输入的同时判断是否符合要求。

举例：

<input id="txt" type="text"/>
    <div>字符串长度为：<span id="num">0</span></div>
    <script type="text/javascript">
        //获取DOM元素节点
        var e = document.getElementById("txt");
        var n = document.getElementById("num");
        //定义文本框的onkeyup事件
        e.onkeyup = function () {
            var str = e.value.toString();
            n.innerHTML = str.length;
        }
    </script>

JavaScript表单事件

在JavaScript中，常用的表单事件有4种：

（1）onfocus事件；
（2）onblur事件；
（3）onchange事件；
（4）onselect事件；

一、onfocus和onblur事件

onfocus和onblur这2个事件往往都是配合使用。例如。在用户在文本框输入信息时，将光标放在文本框中，文本框会获取焦点。当文本框失去光标时，文本框失去焦点。

onfocus表示获取焦点触发的事件，onblur表示失去焦点触发的事件。

具有获得焦点和失去焦点事件的元素有3个：

（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；

搜索框制作：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #search
        {
            color:#bbbbbb;
        }
    </style>
</head>
<body>
    <input id="search" type="text" value="百度一下，你就知道"/><input id="Button1" type="button" value="搜索" />
    <script type="text/javascript">
        //获取元素对象
        var e = document.getElementById("search");
        //获取字符串“百度一下，你就知道”
        var txt = e.value;
        //获取焦点事件
        e.onfocus = function () {
            if(e.value==txt)e.value = "";
        }
        //失去焦点事件
        e.onblur = function () {
            if (e.value == "") e.value = txt;
        }
    </script>
</body>
</html>

二、onchange事件

在JavaScript中，当用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。此外，在下拉列表select中一个选项的状态改变后也会触发onchange事件。

具有获得onchange事件的元素有3个：

（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；

分析：
当我们选取下拉列表某一项时，就会执行onchange事件，然后就会在新窗口打开相应的页面。

三、onselect事件

在JavaScript中，当用户选中单行文本框text或多行文本框textarea的文本时，会触发onselect事件。onselect事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开。

新手很容易把onselect和onchange这2个事件搞混，误以为下拉列表列表项的选中触发的事件是onselect。这一点大家要搞清楚：下拉列表列表项的选中触发的事件是onchange而不是onselect。

JavaScript编辑事件

在JavaScript中，常见的编辑事件有3种：

（1）复制事件oncopy；
（2）剪切事件oncut；
（3）粘贴事件onpaste；

一、复制事件

在JavaScript中，在网页中复制内容时会触发复制事件oncopy。我们可以通过oncopy事件来禁止用户复制网页内容。

此外，与oncopy配对的还有一个onbeforecopy，表示在复制内容之前触发的事件。也就是在时间上，onbeforecopy比oncopy早。

<script type="text/javascript">
    documen.body.oncopy=function(){
        alert("版权所有，禁止复制！");
        return false;  //返回false，表示屏蔽复制功能
    }
</script>

二、剪切事件

在JavaScript中，当网页文本框等中选中的内容被剪切时会触发剪切事件oncut。

此外，与oncut配对的还有一个onbeforecut，表示在复制内容之前触发的事件。也就是在时间上，onbeforecut比oncut早。

<textarea id="txt" cols="20" rows="5">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。</textarea>
<script type="text/javascript">
    var e = document.getElementById("txt");
    e.oncut = function () {
        alert("禁止剪切文本框内容！");
        return false;
    }
</script>

三、粘贴事件

在JavaScript中，当我们往文本框等中粘贴内容时会触发粘贴事件onpaste。

此外，与oncopy配对的还有一个onbeforepaste，表示在复制内容之前触发的事件。也就是在时间上，onbeforepaste 比onpaste早。

JavaScript页面相关事件

有几个非常非常重要的页面相关事件

实现语法如下：

window.通用事件名 = 要执行的JavaScript代码;

在JavaScript中，常用的页面相关事件共有3种：

（1）onload（加载事件）；
（2）onresize（页面大小事件）；
（3）onerror（出错事件）；

一、onload事件

onload事件表示在文档加载完毕再执行的事件。

语法：

window.onload=function(){
    ……
}

<script type="text/javascript">
    window.onload = function () {
        var e = document.getElementById("btn");
        e.onclick = function () {
            alert("JavaScript");
        }
    }
</script>

当文档载入时产生就会产生onload事件，onload事件一个很重要的作用就是在首次载入文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。

二、onresize事件

在JavaScript中，对于页面大小改变的事件我们用的是onresize。这个事件常用于固定浏览器的大小。

<script type="text/javascript">
    window.onresize = function () {
        alert("窗口大小被改变");
    }
</script>

三、onerror事件

在JavaScript中，当文档或图像加载过程中发生错误时就会触发onerror事件。onerror事件只有在IE浏览器下才有效。

    <head>
    <title></title>
</head>
<body>
    <img src="logo.jpg" onerror="alert('图片没有加载成功！')"/>