<!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <meta charset="utf-8" />

     <style>

     </style>

    <script type="text/javascript">

        function sclick() { //函数名不能是关键字

            alert("ceshi");

        }

    </script>

     <script type="text/javascript">

         window.onload = function () { //匿名函数

             alert("页面已加载");

         }

     </script>

 </head>

 <body>

     <script>

         //在html中调用事件处理器

     </script>

     <input type="button" value="测试" onclick="sclick()" /> 

     <input type="button" value="测试1" id="click" />

     <script type="text/javascript">

         var btn = document.getElementById("click"); //通过元素ID获取元素对应的节点对象

         //在javascript中调用事件处理器

         btn.onclick = function () { //匿名函数

             alert("ceshi1");

         }

     </script>

     <img id="logo" style="background-color:red;width:100px;height:100px;"/>

     <script type="text/javascript">

         //获取元素前提是dom加载完成

         document.getElementById("logo").onmouseover = function () { //鼠标移动到对象上

             this.style.backgroundColor = "pink";

         }

         document.getElementById("logo").onmouseout = function () { //鼠标离开对象上

             this.style.backgroundColor = "red";

         }

     </script>

     <script type="text/javascript">

         //删除事件

         document.getElementById("logo").onmouseout = null;

         //null值会覆盖以前赋予事件处理器的任何内容,从而删除事件处理器

     </script>

     <a href="http://www.baidu.com" id="baidu">超链接</a>

     <script type="text/javascript">

         //默认操作

         document.getElementById("baidu").onclick = function () {

             this.href = "https://www.google.com.hk/";//this代表这个对象 或代表<a>标记

         }

     </script>

     <script type="text/javascript">

         //禁止默认操作

         document.getElementById("baidu").onclick = function () {

             return false; //点击超链接 就不会跳转;

         }

     </script>

     <form id="form1">

         <input type="text" id="name"/>

         <input type="submit" />

     </form>

     <script type="text/javascript">

         document.getElementById("form1").onsubmit = function () {

             var B1 = true;

             var txtName = document.getElementById("name").value;

             if(txtName==""){

                 alert("请输入姓名");

                 B1 = false;

             }

             return B1;

         }

     </script>

 </body>

 </html>

js 响应事件的更多相关文章

  1. JS响应事件整理

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  2. 文字添加响应事件，js动态加载CSS, js弹出DIV

    文字添加响应事件,js动态加载CSS, js弹出DIV <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  3. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  4. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  5. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  6. jQuery滑动并响应事件

    jQuery滑动并打开指定页面: <!DOCTYPE html> <html> <head> <script src="http://code.jq ...

  7. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  8. ExtJS学习笔记2：响应事件、使用AJAX载入数据

    响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 v ...

  9. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

随机推荐

  1. SpringBoot多数据源改造(二)

    在上一篇的内容中,主要介绍了spring boot项目的多数据源改造的涉及的基本配置及改动.在spring项目中,常用Mybatis做ORM操作数据库,并且分页操作是避免不了的. 因此,这一篇主要介绍 ...

  2. thymeleaf模板使用th:onclick进行传参

    错误的写法: th:onclick="'javascript:editUser('+${prod.id}+');'" 正确的写法: th:onclick="'javasc ...

  3. portmap 和 rpc程序

    Portmap 是为RPC 程序服务的. 每一个RPC server程序启动的时候要向portmap程序注册.这样portmap程序就知道这些RPC server监听在哪个端口. 而RPC clien ...

  4. request.getInputStream() 的两种解析方式

    http://sagewsg.iteye.com/blog/1717923 byte[] bytes = new byte[1024 * 1024]; InputStream is; try { is ...

  5. HBase编程实例

    摘要:在前文中安装了Hbase,通过Hbase shell能够进行一些操作.可是和实际的编程实例联系起来不方便,因此本文介绍有关Hbase编程的实例. 一.使用Eclipse开发HBase应用程序 1 ...

  6. 替换文件里的相关单词（一）之文件类型为txt

    首先说一下详细的实现思路: 第一步:我们须要获取要改动文件的信息,我们能够通过文件的路径来获取文件的FileInputStream,即文件的输入流,然后调用InputStreamReader读取文件输 ...

  7. [Java]LeetCode57 Insert Interval

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  8. 将byte[]转为各种进制的字符串

    /**      * 将byte[]转为各种进制的字符串      * @param bytes byte[]      * @param radix 基数可以转换进制的范围(2-36),从Chara ...

  9. ACM Amman Collegiate Programming Contest(7.22随机组队娱乐赛)

    题目链接 https://vjudge.net/contest/240074#overview 只写一下自己做的几个题吧 /* D n^2的暴力dp怎么搞都可以的 这里先预处理 i到j的串时候合法 转 ...

  10. yum install mysql（转载）

    linux下使用yum安装mysql 1.安装查看有没有安装过:          yum list installed mysql*          rpm -qa | grep mysql* 查 ...