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

随机推荐

转：oralce常用操作、查询语句(查看表空间)
http://highill.iteye.com/blog/1534858 最近整理一下oralce的常用语句,借此记录一下,在网上都应该能搜到,这里主要是整理分享. 一.操作语句建立表空间 MYD ...
BZOJ 3689: 异或之
字典树可以$o(logn)查找第k大$ 使用$可持久化Trie 区间查找第k大,然后首先把每个数异或之后的最小丢进小根堆中,然后一个一个取出,取出后就再丢次小,一共取k次$ 总的时间复杂度为$O(kl ...
CodeForces - 987D Fair (BFS求最短路)
题意:有N个城市,M条双向道路连接两个城市,整个图保证连通.有K种物品,但每个城市只有一种,现在它们都需要S种物品来举办展览,可以去其他城市获取该城市的物品,花费是两城市之间的最短路径长度.求每个城市 ...
NGUI,多相机共存时，控制显示的元素
当多个相机存在于一个场景中时,我们需要控制某些元素的可见性来达到我们想要的结果. 1:某个相机不需要看见的元素,统一用一个layer来管理 2:选中UIROOT下的相机在clear flag里面设置 ...
对 java 设计模式的一些了解（正在学习整理中）
A .设计模式的作用从书上摘话给你们看看帮助我们将应用组织成容易了解,容易维护,具有弹性的架构,建立可维护的OO系统,要诀在于随时想到系统以后可能需要的变化以及应付变化的原则. 这么复杂的解释肯定 ...
JavaScript传递的是引用的副本
看例子 var test1 = function (args) { args.name = "lcc2"; args = { name: "lcc3" }; } ...
SpringBoot Lombok
简介 lombok是一个编译级别的插件,它可以在项目编译的时候生成一些代码.比如日常开发过程中需要生产大量的JavaBean文件,每个JavaBean都需要提供大量的get和set方法,如果字段较多且 ...
JAVA基础补漏--内部类
成员内部类 public class InnerClass { public static void main(String[] args) { System.out.println("++ ...
JavaEE之反射
反射定义简单表述: 对于任意一个(动态的)运行中的类,我们都可以解剖它,获取类中的构造方法,成员变量,成员方法. 类的加载 (1)加载就是指将class文件读入内存,并为之创建一个Class对象. ...
springboot创建多环境profile打包
springboot开发打包时,一般会有多个环境,dev,qa,prod等,配置文件大多雷同,只是方便开发切换,但是生成部署时产生的war包就无需这么多重复配置了,这时这些dev,qa的配置就不应该打 ...

前端之JavaScript 04 事件 （未全）