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

随机推荐

SVN项目迁移到GIT
源项目为SVN项目, 复制一份出来后. 在VS里无法修改源码管理器的插件为GIT. 解决方法: 删除SVN插件信息在解决方案文件中. 删除以下SVN信息就可以了删除后:
微信小程序使用腾讯地图SDK详解及实现步骤
信小程序使用腾讯地图SDK详解及实现步骤微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...
iPhone获取手机里面所有的APP（私有库）+ 通过包名打开应用
1.获取到手机里面所有的APP包名 - (void)touss { Class lsawsc = objc_getClass("LSApplicationWorkspace"); ...
Linux系统crontab定时调度Python脚本
Linux系统crontab定时调度Python脚本一.Python脚本随Linux开机自动运行 #Python脚本:/home/edgar/auto.py #用root权限编辑以下文件:/etc/ ...
error C2665: “std::locale::facet::operator new”: 2 个重载中没有一个可以转换所有参数类型
qt项目 qt creator项目由插件自动转换成的vs2015项目,为了发布少带些dll ,切换成vs2013项目,在更改了一些vs2013不支持的c++新标准写法之后,release可正常编过,但 ...
什么是MSB/LSB码？
MSB是Most Significant Bit的缩写,最高有效位.在二进制数中,MSB是最高加权位.与十进制数字中最左边的一位类似.通常,MSB位于二进制数的最左侧,LSB位于二进制数的最右侧. L ...
redis入门笔记
redis入门笔记参考redis实战手册 1. Redis在windows下安装下载地址:https://github.com/MSOpenTech/redis/tags 安装Redis 1.1. ...
BZOJ:(270,300]
9/30 BZOJ3038:线段树,不带lazy标记,直接修改叶子. BZOJ3211:同3038 BZOJ1406:将式子转换成[(x-1)*(x+1)%n==0]然后枚举i.当i=x-1时,i*( ...
LuManager升级php5.6.27方法
LuManager自带的PHP在FastCGI模式是 5.2.17版,非FastCGI模式是 5.3.14版.由于360网盘的停服,已不敢再用那些免费的网盘,干脆自己搭个私有云.查了下相关资料准备先试 ...
在NLP中深度学习模型何时需要树形结构？
在NLP中深度学习模型何时需要树形结构? 前段时间阅读了Jiwei Li等人[1]在EMNLP2015上发表的论文<When Are Tree Structures Necessary for ...

前端之JavaScript 04 事件 （未全）