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. AsyncTask两种线程池

        AsyncTask两种线程池  http://bbs.51cto.com/thread-1114378-1.html (API 3.0以后): 1．THREAD_POOL_EXECUTOR, ...

  2. Android - 消息机制与线程通信

    以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luosheng ...

  3. Lombok介绍及使用方法

    lombok简介 lombok是暑假来到公司实习的时候发现的一个非常好用的小工具,刚见到的时候就感觉非常惊艳,有一种相见恨晚的感觉,用了一段时间之后感觉的确挺不错,所以特此来推荐一下. lombok的 ...

  4. 手机Web网站，设置拒绝电脑访问

    最近一段时间,都在使用Jquery-Mobile + MVC做手机Web,有一些心得.体会 下面介绍如何拒绝电脑访问手机网站 电脑的浏览器,跟手机的浏览器内核不一样,这是我设置拒绝访问的思路. 下面是 ...

  5. mysql_fetch_assoc() ,mysql_fetch_array() , mysql_fetch_row()的区别

    1. mysql_fetch_assoc() 函数从结果集中取得一行作为关联数组. 返回根据从结果集取得的行生成的关联数组,如果没有更多行,则返回 false. 输出: Array ( [LastNa ...

  6. JAVA为什么会空指针异常

    1.所谓的指针,就是java中的对象的引用.比如String s;这个s就是指针. 2.所谓的空指针,就是指针的内容为空,比如上面的s,如果令它指向null,就是空指针. 3.所谓的空指针异常,就是一 ...

  7. java BigDecimal的操作

    今天给大家讲一下java中BigDecimal的操作.由于double,float的精度不够,因此在进行商业计算的时候要使用的BigDecimal.BigDecimal对象创建如下: BigDecim ...

  8. C#方法的使用

    static void Main(string[] arr) { , ); Console.WriteLine(max); Console.ReadKey(); } /// <summary&g ...

  9. zepto源码研究 - zepto.js-3 (常用的工具)

    pluck: /** * 根据是否存在此属性来获取当前集合,返回一组属性值 * @param property * @returns {*} */ pluck: function(property){ ...

  10. C# 将XML格式字符串，写入数据集的表中 XML解析

    将XML格式字符串,写入数据集的表1中   命名空间:using System.Xml;               string strRead;//strRead为以下xml值           ...