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. [转] Makefile的条件执行

    条件语句可以根据一个变量的值来控制make执行或者忽略Makefile的特定部分.条件语句可以是两个不同变量.或者变量和常量值的比较.要注意的是:条件语句只能用于控制make实际执行的makefile ...

  2. java04 Sacnner的使用

    import java.util.Scanner; /** * 所有在java.lang包下面的所有类 不需要显示的引入包! * java.util.Scanner : 想获取用户的输入 必须引入相关 ...

  3. JAVA彩色图片变灰处理

    File file = new File("F:/firefox.png"); File destFile = new File("F:/pic/" + Sys ...

  4. Windows免密码远程桌面

    1.WinKey + R,在对话框中输入“gpedit.msc”,点“确定”:   2.展开:计算机配置--Windows设置--安全设置--本地策略--安全选项,找到“帐户:使用空白密码的本地账户只 ...

  5. 用css3实现闪烁效果

    1. css3 @keyframes 参考 css3 @keyframes规则. 特别注意浏览器支持: Internet Explorer 10, Firefox, 和 Opera 支持 @keyfr ...

  6. poj2236 基础并查集

    题目链接:http://poj.org/problem?id=2236 题目大意:城市网络由n台电脑组成,因地震全部瘫痪,现在进行修复,规定距离小于等于d的电脑修复之后是可以直接相连 进行若干操作,O ...

  7. [转载] HDFS and Erasure Codes (HDFS-RAID)

    The Hadoop Distributed File System has been great in providing a cloud-type file system. It is robus ...

  8. HTML5 canvas文本属性与方法

    文本属性和方法 font                        设置或返回文本内容的当前字体属性 textAlign                设置或返回文本内容的当前对齐方式 start ...

  9. thinkphp3.23整合phpexcel

    HINKPHP3.2.3整合PHPexcel实现数据的导入导出.可以上传excel文件后批量导入到数据库,兼容.xls和.xlsx格式:数据库里的数据可以按照搜索条件和分页导出为excel文件.最近接 ...

  10. 适用于 PHP 开发人员的 Python 基础知识

    Thomas Myer, 负责人, Triple Dog Dare Media 简介: 您是一名经验丰富的 PHP 开发人员,并且希望学习 Python 吗?本文将从 PHP 开发人员的角度来探索 P ...