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. C#&Sql获取中文字符拼音首字母的方法

    C#获取字符拼音首字母,可以存储在数据库中以备将来按字母搜索的需求. public static string GetAc(string s) { try { string temp = Servic ...

  2. 关于.net类型转换判断问题

    做项目时,发现这个问题,由于数据库中的字段可能为null,如果在.net程序直接转换时,比如 ltTime.Text =DateTime.Parse(dt.Rows[0]["m_Time&q ...

  3. Android开发手记(14) 使用MediaPlayer播放mp3

    1.获取MediaPlayer实例 (1)可以直接通过new或者create方式: 调用setDataSource和create的区别是,create时已经执行了MediaPlayer.prepare ...

  4. mssql 查询全部用户创建表 条数及占用空间大小(KB)

    select b.name as tablename , --表名a.rowcnt as datacount,   --条数rtrim(8*a.dpages) as size  --占用空间单位KBf ...

  5. 武汉科技大学ACM ：1002: 零起点学算法38——求阶乘和

    Problem Description 输入一个正整数n(n<=10),计算 S=1!+2!+3!+...+n! Input 输入一个正整数n(n<=10)(多组数据) Output 输出 ...

  6. QT5-控件-QDial（表盘控件）

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QDial> class ...

  7. QML之窗口（无边框、透明及拖拽）

    1.无边框 Qt Quick 2.0 中 QQuickView代替了1.0中的QDeclarativeView. 无边框窗口代码如下: QQuickView viwer; //QQuickView继承 ...

  8. 你好，C++（26）如何与函数内部进行数据交换？5.1.3 函数参数的传递

    5.1.3  函数参数的传递 我们知道,函数是用来完成某个功能的相对独立的一段代码.函数在完成这个功能的时候,往往需要外部数据的支持,这时就需要在调用这个函数时向它传递所需要的数据它才能完成这个功能获 ...

  9. win7下搭建nginx+php的开发环境

    本来在win7下用的是IIS做web服务器,但近来因项目需求的原因,需要在服务器遇到404错误的时候自动做转向(不是在客户端的跳转,而是在服务器收到客户端请求去某目录下读取文件返回时,如果发现目录或目 ...

  10. Android 用ListView实现GridView分列显示

    我想实现百度影音首页的这种效果: 在网上用ScrollView+GridView可以实现,但是touch scrollview的时候会莫名刷新gridview,这样用户体验很不好,而且感觉百度不是这样 ...