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. OD: Windows Kernel Debug

    内核调试入门 内核程序运行在内核态,因此不能像对用户态应用程序那样来调试.关于内核调试方面的知识请参考<软件调试>这本书.目前内核调试主要有以下三种方法. 一是使用硬件调试器,它通过特定的 ...

  2. hdu 5108

    //题意是给一个数N,然后让你求M,使得N/M为素数,并且M的值最小 //思路呢,大概有两种,一个是遍历素数求解的,不过数据太大不现实 //另外一种就是质因数求解,for循环是遍历质因数,然后whil ...

  3. css书写步骤

    CSS整体书写步骤1:CSS RESET 重置2:CSS GLABAL 全局属性3: CSS分模块属性,(先写默认样式和设计图相差最大的部分,先大块布局,后细致调整) <style>/*C ...

  4. 纯 CSS 创建各种不同的图形形状

    使用代码 矩形 .rectangle { width: 250px; height: 150px; background-color: #6DC75F; } <div></div&g ...

  5. 2.Android Studio系列教程2——基本设置与运行

    原文链接:http://stormzhang.com/devtools/2014/11/28/android-studio-tutorial2/   一.项目结构   二.Android Studio ...

  6. mysql文件导入到数据库load data infile into table 的使用例子

    load data infile "C:/Users/Administrator/Desktop/1.txt"into table 要一个已经存的表名 字段默认用制表符隔开 文件 ...

  7. 跟踪对象属性值的修改, 设置断点(Break on property change)

    代码 //Break on property change (function () { var localValue; Object.defineProperty(targetObject, 'pr ...

  8. jvm参数设置

    -Xss: 栈大小 -Xms:堆初始化大小-Xmx:堆最大大小-XX:NewSize=n:设置伊甸区大小-XX:NewRatio=n:年轻代与年老代比值.如:为3,表示年轻代与年老代比值是1:3,   ...

  9. django安装

    见 http://jingyan.baidu.com/article/466506580e7d29f549e5f8b6.html 下载安装python下载解压django cmd进入django目录, ...

  10. 使用scrapy制作的小说爬虫

    使用scrapy制作的小说爬虫 爬虫配套的django网站  https://www.zybuluo.com/xuemy268/note/63660 首先是安装scrapy,在Windows下的安装比 ...