zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    [转载]memcached完全剖析--1. memcached的基础
    I/O多路复用
    How to install the zsh shell in Linux && how to set it as a default login shell
    深入理解计算机中的 csapp.h和csapp.c
    (一)网络编程基础之套接字入门
    crx
    t
    武汉第一例肺炎病例
    C语言 ## __VA_ARGS__ 宏
    NLP之中文分词cppjieba
  • 原文地址:https://www.cnblogs.com/shuilangyizu/p/12669714.html
Copyright © 2011-2022 走看看