JavaScript事件的处理

在网页中用户操作的时候会激活各种事件，
如按钮点击，鼠标移动，键盘按下等，这些都叫事件（Event）。
我们可以通过编写代码对这些事件进行处理，

如：当用户点击一个删除按钮时，我们给用户一些在删除之前的提示等等。

设置事件的两种方式：

方式一： 有名/命名函数
事件="函数名（）"；//里面的（）不能省略。。。

方式二： 无名/匿名函数
事件=function(){
            执行代码；
        }

<head>
    <meta charset="UTF-8">
    <title>设置事件的两种方式</title>
</head>
<body>
    <input type="button" value="方式一：有名函数" onclick="fun1()"/>
    <input type="button" value="方式二：无名函数" id="btn2"/>


    <script>
        function fun1(){
            alert("方式一：有名函数");
        }

        var button2 = document.getElementById("btn2");
        button2.onclick = function(){
            alert("方式二：无名函数");
        }
    </script>
</body>

常用的事件

onload 加载完毕 

onclick 单击事件
ondblclick 双击事件

onfocus 得到焦点
onblur 失去焦点

onchange 改变事件，对于文本框要焦点失去才会判断

onmouseover 鼠标在上面
onmouseout 鼠标离开

onkeyup 键盘弹起
onkeydown 键盘按下

onsubmit 表单提交事件

<head>
    <meta charset="UTF-8">
    <title>加载完成事件</title>
</head>
<body>
    <script>
       window.onload = function(){
            alert("abc");
       }
       window.onload = function(){
            alert("ABC");
       }
    </script>
</body>

<head>
    <meta charset="UTF-8">
    <title>改变内容事件</title>
</head>
<body>
    <select id="city">
        <option value="选择城市">选择城市</option>
        <option value="广州">广州</option>
        <option value="长沙">长沙</option>
        <option value="南宁">南宁</option>
    </select>
    <hr/>
    英文字母：<input type="text" id="english" value=""/>



    <script>
        //定位城市下拉框，同时添加内容改变事件
        document.getElementById("city").onchange = function(){
            //this表示select标签
            //this.value表示你选中的option标签的value属性值
            window.alert(this.value);
        };
        //定位文本框，同时添加内容改变事件，对于文本框而言，事件的触发是否焦点失去时执行
        document.getElementById("english").onchange = function(){
            //获取文本框中的内容
            var username = this.value;
            //将字符串转大写
            username = username.toUpperCase();
            //将大写字母再次设置到文本框中
            this.value = username;
        };
    </script>
</body>

来源：CSDN

作者：h294590501

链接：https://blog.csdn.net/h294590501/article/details/80495275

标签

文本框