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

随机推荐

PHP HTML DOM 解析器中文手册
简单的PHP HTML DOM 解析器中文手册 | PHP Simple HTML DOM Parser中文手册目录快速入门如何创建HTML DOM 对象? 如何查找HTML元素? 如何访问H ...
HDOJ 1238 Substrings 【最长公共子串】
HDOJ 1238 Substrings [最长公共子串] Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
maven入门学习（一）
一.maven介绍 1.软件开发中我们为什么要使用maven呢?(纯属个人体会观点,如有错误,敬请指正) (1)其一,企业岗位需求,目前的IT开发招聘岗位上,基本都要求会使用maven. ...
addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法
也许很多同仁一听到事件监听,第一想到的就是原生js的 addEventListener()事件,的确如此,当然如果只是适用于现代浏览器(IE9.10.11 | ff, chorme, safari, ...
Apahce 加载模块说明
LoadModule auth_basic_module modules/mod_auth_basic.so #基本认证模块 LoadModule auth_digest_module modules ...
c语言的按位运算符
& 按位与 | 按位或 ^ 按位异或 1. 按位与运算按位与运算符"&"是双目运算符.其功能是参与运算的两数各对应的二进位相与.只有对应的两个二进位均为1时,结果 ...
Python多类继承中，子类默认继承哪个父类的构造函数__init__
[1]python中如果子类有自己的构造函数,不会自动调用父类的构造函数,如果需要用到父类的构造函数,则需要在子类的构造函数中显式的调用. [2]如果子类没有自己的构造函数,则会直接从父类继承构造函数 ...
Oracle 事务处理
事务的四大特性 1.原子性(Atomicity) 事务的原子性是指事务中包含的所有操作要么都做,要么都不做,保证数据库是一致的. 2.一致性(Consistency) 一致性是指数据库在事务操作前和事 ...
Oracle大总结
maven的常见两个指令说明 mvn install 是将你打好的jar包安装到你的本地库中,一般没有设置过是在用户目录下的 .m2\下面.mvn package 只是将你的代码打包到输出目录,一般 ...
PHP设计模式（一）：简单工厂模式

前端之JavaScript 04 事件 （未全）