前端之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事件进行实现.虽然 ...

随机推荐

对象序列化与反序列化local class incompatible
无论eclipse还是idea(默认关闭序列化提示,需手动打开),都可以自动生成相应的序列号,分为两类1L,XXXL. 当然如果不指定,系统也会自动生成,但是存在隐性风险 ,不同的编译器对同一个对象可 ...
tmux命令
tmux 新建一个会话,进入tmux tmux new -s 'main' 新建一个会话'main',进入tmux' tmux a -t 'main' 进入tmux会话'main' exit 退出当前 ...
CWinApp类CMultiDocTemplate类CDocument类CView类的关系
转自:http://blog.csdn.net/bboot/article/details/26884011 不得不转,瞬间搞清了很多问题,短小精悍 1.CWinApp类它包含并管理着应用程序的 ...
[转]毕设- 深入HBase架构解析（一）
深入HBase架构解析(一) 前记公司内部使用的是MapR版本的Hadoop生态系统,因而从MapR的官网看到了这篇文文章:An In-Depth Look at the HBase Archi ...
王译潇20162314 实验报告三plus结对编程四则运算第一阶段
北京电子科技学院BESTI实验报告课程:程序设计与数据结构班级: 1623 姓名: 王译潇学号:20162314 指导教师:娄佳鹏老师.王志强老师实验日期:2017年5月12号实验密级: 非 ...
React Native混合开发中必须要学会点FlexBox布局
在前面的案例中,界面的搭建都是采用CSS的布局,基于盒子模型,依赖 display属性 , position属性, float属性.但对于那些特殊布局非常不方便,比如,垂直居中. 一种全新的针对web ...
ES6 实现阶乘
// 实现一个5的阶乘function factorial(n, acc = 1) { console.log(`n=${n};acc=${acc}`) if(n <= 1) return ac ...
Luogu-5004 专心OI-跳房子(矩阵快速幂)
Luogu-5004 专心OI-跳房子(矩阵快速幂) 题目链接题解: 先考虑最朴素的dp 设$f[i][0/1]$表示第$i$个位置跳/不跳的方案数,则: \[ \begin{cases} ...
share point 2013 部署
最近工作需要,需要用share point 2013 开发项目,但是遇到了刚部署环境就遇到了不少问题.唉~ 本机部署搭建一个share point 2013 环境. 第一步:首先要下载一个vmware ...
spring cloud 基本小结
Spring cloud系列十四分布式链路监控Spring Cloud Sleuth https://blog.csdn.net/hry2015/article/details/78905489 S ...

前端之JavaScript 04 事件 （未全）