1、一个简单的单击事件：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

   <button onclick="demo()">按钮</button>

   <script>

      function demo(){

          alert("hello");

      }

   </script>

</body>

</html>

2、鼠标事件 onmouseout，onmouseover

当鼠标经过会显示“hello”，当鼠标移出会显示“world”

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>事件</title>

      <link rel="stylesheet" href="style.css" type="text/css">

 </head>

 <body>

    <div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>

    <script>

       function onOver(ooj){

           ooj.innerHTML = "hello";

       }

       function onOut(ooj){

           ooj.innerHTML = "world";

       }

    </script>

 </body>

 </html>

css代码：

.div{

    width:100px;

    height:100px;

    background-color: aqua;

}

3、onchange，当内容改变了，弹出提示框（hello，内容改变了）

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>事件</title>

      <link rel="stylesheet" href="style.css" type="text/css">

 </head>

 <body>

    <form>

       <input type="text" onchange="changeDemo(this)">

    </form>

    <script>

      function changeDemo(bg){

          alert("Hello 内容改变了");

      }

    </script>

 </body>

 </html>

或者这样写，达到的效果是一样的

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>事件</title>

      <link rel="stylesheet" href="style.css" type="text/css">

 </head>

 <body>

    <form>

       <input type="text" onchange="alert('hello 内容改变了')">

    </form>

 </body>

 </html>

4、onselect，当在文本框中写点内容，然后选中这些内容时，背景颜色会变成红色

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>事件</title>

      <link rel="stylesheet" href="style.css" type="text/css">

 </head>

 <body>

    <form>

       <input type="text" onselect="demo(this)">

    </form>

    <script>

      function demo(bg){

          bg.style.background="red";

      }

    </script>

 </body>

 </html>

5、onfocus，当光标点击之后，背景变成蓝色

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>事件</title>

      <link rel="stylesheet" href="style.css" type="text/css">

 </head>

 <body>

    <form>

       <input type="text" onfocus="demo(this)">

    </form>

    <script>

      function demo(bg){

          bg.style.background="blue";

      }

    </script>

 </body>

 </html>

6、onload，当网页加载完毕后弹出：网页加载完毕

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>事件</title>

      <link rel="stylesheet" href="style.css" type="text/css">

 </head>

 <body onload="demo()">

    <script>

      function demo(bg){

          alert("网页内容加载完毕");

      }

    </script>

 </body>

 </html>

JS-事件处理的更多相关文章

  1. js事件处理 —— 详解

    对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 <!DOCTYPE html ...

  2. js事件处理-整理

    <!-- 作者:gentiana@163.com 时间:2016-3-10 描述:js事件处理 --> <!DOCTYPE html> <html> <hea ...

  3. Vue.js事件处理

    Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...

  4. Javascrpt 速成篇】 三：js事件处理

    ie和chrome,firefox的事件处理,除了函数名字不同,基本大同小异.这样就已chrome为主了,对ie有兴趣的自己去百度.jquery已经处理不同浏览器兼容性问题,推荐使用. 事件处理有两种 ...

  5. JS事件处理函数中return false到底是什么东西

    在<JS DOM编程艺术>一书中,用return false来阻止事件默认行为,可是js高程3里没有这种用法,那这到底是什么呢. 先看一下知乎的一个解释 就此问题,首先要纠正两个观点: 1 ...

  6. preventDefault, stopPropagation, return false -JS事件处理中的坑

    我们以一个文件上传ui重设计为例子来探讨这几个函数的区别: 其中的html代码如下: <div class="file-upload"> <input type= ...

  7. React事件处理和原生JS事件处理

    1.原生JS 事件触发调用有三种方式: 1. on[event]事件属性,手动触发  ❗️on[event]事件是Window对象上的方法. 2. on[event]事件属性,通过htmlElemen ...

  8. js事件处理、事件对象

    事件类型分类: 1 添加在html结构中的事件 <div id="div1" onclick="alert('append click event in html' ...

  9. js事件处理机制

    一.事件处理程序 a.     DOM0级事件处理程序,被认为是元素的方法. var btn=document.getElementById('myBtn'); btn.onclick=functio ...

  10. js事件处理

    1.js中常用的事件处理程序(event Handler) onabort 用户终止了页面的加载 onblur 用户离开了对象 onchange 用户修改了对象 onclick 用户点击了对象 one ...

随机推荐

  1. MediaPlayer 音频播放 示例

    状态机.流程图.生命周期 对播放音频/视频文件和流的控制是通过一个状态机来管理的.下图显示一个MediaPlayer对象被支持的播放控制操作驱动的生命周期和状态. 椭圆代表MediaPlayer对象可 ...

  2. sunny day

    初始学习记录 基于http://www.htmleaf.com/html5/html5muban/20141121552.html模板 <!DOCTYPE html> <html l ...

  3. phpmyadmin设置id自增(AUTO_INCREMENT)(转)

    phpmyadmin设置id自增(AUTO_INCREMENT)   在A_I 前面打勾:如图 AUTO_INCREMENT =A_I 查看效果  

  4. 第一个androidAPP项目总结—ListView的上拉和下拉

    1.下拉刷新 需继承implements SwipeRefreshLayout.OnRefreshListener @Overridepublic void onRefresh() { new Wea ...

  5. 开启mysql慢查询日志并使用mysqldumpslow命令查看

    mysql服务器有一项功能,可以检测到哪条sql语句查询得比较慢,就是慢查询slowlog,现在介绍如何开启. 在[mysqld]下面增加如下代码: long_query_time = 1 log-s ...

  6. RTSP协议资料

    维基百科: RTSP:http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol RTP:http://en.wikipedia.org/wik ...

  7. 单点登录CAS使用记（七）：关于服务器超时以及客户端超时的分析

    我的预想情况 一般情况下,当用户登录一个站点后,如果长时间没有发生任何动作,当用户再次点击时,会被强制登出并且跳转到登录页面, 提醒用户重新登录.现在我已经为站点整合了CAS,并且已经实现了单点登录以 ...

  8. Java中的内部类、匿名类的使用

    代码(test.java): interface ie{ public void print(); } class outer{} public class test{ public class in ...

  9. mysql服务启动

    1.C:\Program Files (x86)\MySQL\mysql-5.5.33-win32\bin>net stop mysqlMySQL 服务正在停止.MySQL 服务已成功停止. 2 ...

  10. JAVA-POI实现EXCEL的读写

    想要完成JAVA读写EXCEL,首先需要JAVA-POI包的支持,百度搜索即可找到资源,不再赘述: POI-新增EXCEL并输入内容 package com.gsh.test.poi; import ...