<!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. noip模拟赛 伪神

    题目背景 一切就绪 但愿,这样就好 自那之后的五年—— 作为封印持续增大的结果,在我体内积蓄了庞大的光精灵的力量 在幻灯结界里觉醒过来的我,和从封印解放出的德米奥格,就如同字面意思所述的,获得了等同于 ...

  2. 洛谷 P2548 [AHOI2004]智能探险车

    P2548 [AHOI2004]智能探险车 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 复制 4 3 sunny plain full many sunny moun ...

  3. mongodb之备份

    前言 数据库的备份非常重要 备份方式 使用Mongodb自带的运维管理工具(Ops Manager) 需要单独部署,比较麻烦和复杂 通过文件系统快照 Linux需要LVM支持需要开启journal日志 ...

  4. PHP array_diff_key()

    定义和用法 array_diff_key() 函数返回一个数组,该数组包括了所有在被比较的数组中,但是不在任何其他参数数组中的键. 语法 array_diff_key(array1,array2,ar ...

  5. mongodb mapreduce使用总结

    文章来自本人个人博客: mongodb mapreduce使用总结 ​ 大家都知道,mongodb是一个非关系型数据库.也就是说.mongodb数据库中的每张表是独立存在的,表与表之间没有不论什么依赖 ...

  6. 腾讯面试题：A.txt和B.txt两个文件，A有1亿个qq号，B有100万个，用代码实现交、并、差

    在STL中关于有序序列有这么四个算法: set_union(beg, end, beg, end2, dest);                    //求并集A∪B set_union(beg, ...

  7. 多级联动系列——ajax调用XML实现三级联动

    ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...

  8. [ACM] ZOJ 3819 Average Score (水题）

    Average Score Time Limit: 2 Seconds      Memory Limit: 65536 KB Bob is a freshman in Marjar Universi ...

  9. log4net preserveLogFileNameExtension 和 watch

    preserveLogFileNameExtension <log4net> <appender name="fileappender" type="l ...

  10. 前缀和&&离散化

    现在正在上课,但我还是要同步更新博文...\滑稽 先讲一个离散化,就是把几个离的特别远的数在不影响结果的情况下,变成相近的数.倒是没什么影响,但应用在数组下标的话可以节约空间.(貌似和hash有点像) ...