前端之JavaScript 04 事件（未全）

一、事件类型

　　常见的主要事件类型介绍如下：

onfocus        元素获得焦点。               练习：输入框

onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

onmouseleave   鼠标从元素离开

onselect       文本被选中。

onsubmit       确认按钮被点击。

二、onsubmit实例

　　onsubmit主要用在form表单进行submit提交时执行的事件，即通过form标签绑定此事件，点击form下的submit按钮执行事件。当表单在提交时触发，该属性也只能给form元素使用。应用场景:：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。实例如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="" class="form">

    <p><input type="text" class="inpt"><span class="error"></span></p>

    <input type="submit" >

</form>

<script>

    var ele_form=document.getElementsByClassName("form")[0];

    var ele_inpt=document.getElementsByClassName("inpt");

    var ele_error=document.getElementsByClassName("error")[0];

    function foo() {

        ele_error.innerHTML=""

    }

    ele_form.onsubmit=function () {                                         //通过父级form节点绑定onsubmit事件

        var inpt_value=ele_inpt.value;

        if(inpt_value.length>5 && inpt_value.length<12){

        }

        else{

            ele_error.innerHTML="输入内容长度需要大于5小于12";

            setTimeout(foo,3000);                                           //用定时器保证提示信息显示3秒后消失

            return false                                                    //阻止提交事件的发生

        }

    }

</script>

</body>

</html>

onchange实例

　　onchange事件主要应用在select标签上，通过select标签绑定此事件，当选定一个select下面的内容，则会执行onchange事件下的内容，一个主要的应用就是三级联动，具体实例如下：

select联动

<!DOCTYPE html>

<html lang="zh—CN">

<head>

    <meta charset="UTF-8">

    <title>select联动</title>

</head>

<body>

<select name="" id="s1" onchange="loadData();">

    <option value="">请选择省份</option>

</select>

<select name="" id="s2">

    <option value="">请选择省份</option>

</select>

<script>

    var s1Ele = document.getElementById("s1");

    var data = {"四川": ["成都", "攀枝花", "湘潭"],"广东": ["深圳", "梅州", "东莞"], 
"江西": ["宜春", "南昌", "景德镇"]};

    // 把data里面的key都拿出来，生成option标签，添加到s1这个select

    var str = "";

    for (var key in data) {

        console.log(key);

        // 2 .往生成标签里加

        var s = "<option>" + key + "</option>";

        console.log(s);

        str += s;

    }

    console.log(str);

    s1Ele.innerHTML = str;

    function loadData() {

        var s2Ele = document.getElementById("s2");

        s2Ele.options.length = 0;  // 清空select 下面的option

        // 把data里面的key都拿出来，生成option标签，

        // 添加到s1这个select

        var indexValue = s1Ele.selectedIndex;

        var optionEles = s1Ele.options;

        var key = optionEles[indexValue].innerText;

        var data2 = data[key];

        for (var i=0; i<data2.length;i++) {

            var optionEle = document.createElement("option");

            optionEle.innerText = data2[i];

            s2Ele.appendChild(optionEle);

        }

    }

</script>

</body>

</html>

定时器例子

<!DOCTYPE html>

<html lang="zh—CN">

<head>

    <meta charset="UTF-8">

    <title>定时器示例</title>

</head>

<body>

<input type="text" id="i1">

<input type="button" value="开始" onclick="start()">

<input type="button" value="结束" onclick="end()">

<script>

    var t;

    function f() {

        // 获取时间

        var dateObj = new Date();

        // 获取i1 标签

        var i1Ele = document.getElementById("i1");

        i1Ele.value=dateObj.toLocaleString();

    }

    //每隔一秒就执行一次f()

    function start() {

        f();

        // 之创建一个定时器，有定时器的话我就不创建

        if(t === undefined){  // 如果没有就创建t

            t = setInterval(f,1000); // 1000为毫秒

        }

    }

    // 停止计时

    function end() {

        clearInterval(t);

        t = undefined;  // 清空,没请空，t还会有值，停止就启动不了

    }

</script>

</body>

</html>

onkeydown及onselect实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id="d1">

<script>

    var ele=document.getElementById("d1");

//  onkeydown事件：某个键盘键被按下，执行事件

    ele.onkeydown=function (event) {

        console.log(event.keyCode);

        if(event.keyCode==13){   //event.keyCode==13为回车键

            alert(123)

        }

    };

//  onselect 事件：文本被选中时执行事件

    ele.onselect=function () {

        alert(1234)

    }

</script>

</body>

</html>

onfocus及onblur实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id="inp1" value="请输入用户名">

<script>

    var ele_inp=document.getElementById("inp1");

    //onfocus事件

     ele_inp.onfocus=function () {   //当点中输入框，默认value值消失

              this.value="";

     };

     //onblur事件

     ele_inp.onblur=function () {    //当点中非输入框区域，输入框重新赋上默认值

         if(!this.value.trim()){

              this.value="请输入用户名"

         }

     }

</script>

</body>

</html>

mouseout与mouseleavequbie

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

         #container{

             width: 300px;

         }

        #title{

            background-color: darkblue;

            color: white;

            line-height: 30px;

            text-align: center;

        }

        #list .item1{

            background-color: gray;

            line-height: 20px;

        }

        #list .item2{

            background-color: #f0ad4e;

            line-height: 20px;

        }

        #list .item3{

            background-color: green;

            line-height: 20px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div id="container">

        <div id="title">使用了mouseout事件↓</div>

        <div id="list" class="hide">

                <div class="item1">第一行</div>

                <div class="item2">第二行</div>

                <div class="item3">第三行</div>

        </div>

</div>

<script>

    var ele_title=document.getElementById("title");

    var ele_list=document.getElementById("list");

    var ele_container=document.getElementById("container");

  // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

  // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

    ele_title.onmouseover=function () {

        ele_list.classList.remove("hide");

    };

    ele_container.onmouseout=function () {

        ele_list.classList.add("hide");

    };

    ele_container.onmouseleave=function () {

        ele_list.classList.add("hide");

    }

</script>

</body>

</html>

前端之JavaScript 04 事件（未全）的更多相关文章

前端之JavaScript基础
前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
第三篇：web之前端之JavaScript基础
前端之JavaScript基础前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
互联网公司前端初级Javascript面试题
互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...
JavaScript系列----事件机制
1.事件流 1.1.标准事件流所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...
前端(3)JavaScript
前端(3)JavaScript JavaScript概述 1ECMAScript和JavaScript的关系: 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaS ...
第三章、前端之JavaScript
目录第三章.前端之JavaScript 一.javaScript的引入方式二.JavaScript语言的规范三.语言基础变量声明四.数据类型五.流程控制六.函数函数的argument ...
第十一章前端开发-JavaScript
第十一章前端开发-JavaScript 11.3.1 js引入方式行内样式 <p id="" class="" style="" ...
对javascript EventLoop事件循环机制不一样的理解
前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...
javascript通用事件封装
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

随机推荐

ZOJ - 3593 One Person Game (扩展欧几里得)
题意:一个人在坐标A,要前往坐标B的位置.可以往左或往右走a,b,a+b个单位,求到达B的最小步数. 分析:扩展欧几里得算法求解线性方程的套路不变.令C=fabs(A-B),c = a+b, 扩展gc ...
Unity,基于layer的碰撞配置
可以通过给对象指定layer,实现相同.不同layer之间碰撞的自由配置,比如我们想让怪物之间不碰撞,英雄和怪物之间碰撞,我们就可以这样指定,去掉enemies之间的勾选. 打开方式-edit-> ...
Unity,android和IOS 防止八门神器注入
八门神器主要是不断筛选,来获取关键属性(比如金币)在内存中的地址,再根据该地址来修改指向的数据就可以成功. 因此,我们需要在金币读取和设置的时候,使用一个偏移量,来达到干扰的目的就可以了未经仔细测试 ...
RPC数据通信
RPC全称为Remote Procedure Call,翻译过来为“远程过程调用”.目前,主流的平台中都支持各种远程调用技术,以满足分布式系统架构中不同的系统之间的远程通信和相互调用.远程调用的应用场 ...
C++添加简单的日记记录
#include<fstream>#include<iostream> using namespace std;//这是一种日记记录 b 种void LOG(char *tx, ...
深入解析Koa之核心原理
这篇文章主要介绍了玩转Koa之核心原理分析,本文从封装创建应用程序函数.扩展res和req.中间件实现原理.异常处理的等这几个方面来介绍,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参 ...
Java结对编程四则运算一周小结
Java结对编程四则运算一周小结需求分析对于四则运算来说最主要的就是要计算出产生的式子(字符串的形式). 设计思路总体可将这个项目分解为几个部分:产生式子,计算式子,判断对错并记录: 具体的思路 ...
java中最常用jar包的用途
jar包用途 axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现.查找和实现可插入式接口,提供一些一般类实例化.单件的生命周期管理的常用方法.jaxrpc.jar ...
[Android Studio系列(五)] Android Studio手动配置Gradle的方法
1 问题 (1) android sutdio第一次打开一个工程巨慢怎么办? (2) 手动配置Gradle Home为什么总是无效? (3) 明明已经下载了Gradle,配置了gradle home, ...
Percona 工具包 pt-online-schema-change 简介
mysql的在线表结构修改,因为低效和阻塞读写.一直被诟病.至于ALTER TABLE 的原理,参看我上一篇文章.MySQL在线修改大表结构.看完后,发现的问题是还是会锁的,且对于在线更新的这块也是不 ...

前端之JavaScript 04 事件 （未全）