1 - onload 事件：加载完成后立即执行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

       window.onload = function (){

            ele = document.getElementById("i1")

            console.log(ele.innerHTML);

       }

    </script>

</head>

<body>

<div id="i1">yuan</div>

</body>

</html>

2 - onsubmit 事件：在表单提交时触发

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="" id="i1">

     用户名：<input type="text">

     密码：  <input type="password">

    <input type="submit">

</form>

<script>

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

     var user = document.querySelector("#i1 [type=text]")

     var pwd = document.querySelector("#i1 [type=password]")

     ele.onsubmit = function (e){

           console.log(user.value);

           console.log(pwd.value);

            return false;    // 终止事件执行

           // e.preventDefault() // 阻止元素默认行为

     }

</script>

</body>

</html>

3 - onchange 事件：该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<select name="provonce" id="s1">

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

    <option value="hubei">湖北省</option>

    <option value="hunan">湖南省</option>

    <option value="hebei">河北省</option>

</select>

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

    <option value="hebei">请选择城市</option>

</select>

<script>

   var  data={"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","荆州"],"hebei":["石家庄","保定","张家口"]};

   console.log(data);

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

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

   ele.onchange=function () {

       console.log(this.value);

       var citys = data[this.value];

       console.log(citys);

       // 清空操作

       ele2.options.length=1;

       // 创建标签

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

           var option =  document.createElement("option"); // </option></option>

           option.innerHTML=citys[i];

           ele2.appendChild(option)

       }

   }

</script>

</body>

</html>

4 - onmouse事件: 鼠标事件，包括以下内容：

onmousedown 鼠标按钮被按下。  
onmouseenter 当鼠标指针移动到元素上时触发。  
onmouseleave 当鼠标指针移出元素时触发  
onmousemove 鼠标被移动。  
onmouseover 鼠标移到某元素之上。  
onmouseout 鼠标从某元素移开。  
onmouseup 鼠标按键被松开。 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #container{

            width: 300px;

        }

        #title{

            cursor: pointer;

            background: #ccc;

        }

       #list{

           display: none;

           background:#fff;

       }

        #list div{

            line-height: 50px;

        }

        #list  .item1{

            background-color: green;

        }

         #list  .item2{

            background-color: rebeccapurple;

        }

         #list  .item3{

            background-color: lemonchiffon;

        }

    </style>

</head>

<body>

<div id="container">

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

        <div id="list">

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

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

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

        </div>

</div>

<script>

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

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

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

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

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

   title.onmouseover=function(){

       list.style.display="block";

   };

   container.onmouseleave=function(){  // 改为onmouseout试一下

       list.style.display="none";

   };

/*

因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list

上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";

*/

</script>

</body>

</html>

5 - onkey 事件：键盘事件，包括以下内容：

onkeydown 某个键盘按键被按下。  
onkeypress 某个键盘按键被按下并松开。  
onkeyup 某个键盘按键被松开。   
<input type="text" id="t1"/>

<script type="text/javascript">

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

     ele.onkeydown=function(e){

        console.log("onkeydown",e.key)

    };

     ele.onkeyup=function(e){

        console.log("onkeyup",e.key)

    };

</script>

JS_DOM操作之常用事件的更多相关文章

  1. JS中基本window.document对象操作以及常用事件！

    一.找到元素 1.document.getELementById("id"):根据id找,最多找一个. var a=document.getELementById("id ...

  2. JS_DOM操作之绑定事件

    1 - 静态绑定:直接把事件写在标签元素中 <div id="div" onclick="foo(this)">click</div> ...

  3. ios手势操作,四个基本事件与六个常用事件

    基本事件包括begin,canceled,move,ended四项,如果对象的hidden属性为yes,则无效果,hidden属性必须为no;才能使用: -(void)touchesBegan:(NS ...

  4. jQuery的常用事件

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...

  5. jQuery--引入，基本语法，以及常用事件

    一.初识jQuery jQuery是一个JavaScript函数库.主要包含的功能有:HTML元素的选取.操作,CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改 ...

  6. jQuery常用事件

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...

  7. AJAX-URL-HTTP协议-缓存-DOM操作-HTML元素事件

    1.URL 1.URL的作用 用于来表示任意一个资源的位置(互联网上). 协议+主机名+文件目录结构+文件名称 2.详解 格式: <scheme>://<user>:<p ...

  8. 【repost】Javascript操作DOM常用API总结

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...

  9. javaScript入门之常用事件

    JS中的常用事件 onfocus/onblur:聚焦离焦事件,用于表单校验的时候比较合适. onclick/ondblclick:鼠标单击和双击事件 onkeydown/onkeypress:搜索引擎 ...

随机推荐

  1. GlassFish 任意文件读取漏洞

    poc https://192.168.49.2:4848/theme/META-INF/%c0%ae%c0%ae/%c0%ae%c0%ae/%c0%ae%c0%ae/%c0%ae%c0%ae/%c0 ...

  2. 配置 Nvidia GPU 主机的运行环境

    在 Linux 主机上配置了很多次 Cuda/CuDNN 的运行环境,在此记录下用到的脚本命令以复用. 特别提醒,先了解清楚 GPU 卡的型号,查清与主机 Linux 内核兼容的驱动程序.Cuda 和 ...

  3. 安卓安装https证书

    前置条件 1 手机要设置密码 然后安装charles 证书 2 赋予 adb shell root权限(安装magisk就行) adb shell # 连接手机进入shell模式 su root # ...

  4. mout -t -cifs 解析

    mount -t cifs //<azurefile_url> <linux_mountpoint(folder)> df 查看挂载 umount取消挂载 umount -l ...

  5. C++STL——vector类

    vector容器 1.1 vector容器的基本概念 Array 是静态空间,一旦配置了就不能改变,要换大一点或者小一 点的空间,可以,一切琐碎得由自己来,首先配置一块新的空间,然后将旧空间的 数据搬 ...

  6. SaToken学习笔记-01

    SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...

  7. HCNA Routing&Switching之DHCP服务

    前文我们了解了STP的端口状态.计时器以及端口状态切换和网络拓扑变化相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15140672.html:今天我们 ...

  8. 关于stm32 HardFault_Handler 异常的处理 死机

    在系统开发的时候,出现了HardFault_Handler硬件异常,也就是死机,尤其是对于调用了os的一系统,程序量大,检测堆栈溢出,以及数组溢出等,找了半天发现什么都没有的情况下,估计想死的心都有了 ...

  9. USB 3.0 开发要点

    最近在公司里安排了我一个新的任务,那就是USB3.0的研发.对于我之前都是做ARM+LINUX和单片机软件研发的来说,虽然之前都是做驱动程序和应用程序,但是没有做与USB 相关的开发,毕竟这是第一次. ...

  10. 关于const声明一些东西

    const int a;        int const a;        const int *a;     int *const a;    const int *const a;   前两个 ...