HTML事件

<body>

    <input type="button" value="按钮1" id="but1" onclick="click()">

    <script type="text/javascript">

    function click(){

        alert(this.value+"被点击了");

    }

</script>

</body>

DOM0级事件

<body>

    <input type="button" value="按钮1" id="but1">

    <script type="text/javascript">

    function click(){

        alert(this.value+"被点击了");

    }

    var but1 = document.getElementById("but1");

    but1.onclick = click;//添加

    but1.onclick = null;//移除

</script>

</body>

DOM2级事件

<body>

    <input type="button" value="按钮1" id="but1">

    <script type="text/javascript">

    function click(){

        alert(this.value+"被点击了");

    }

    var but1 = document.getElementById("but1");

    but1.addEventListener("click", click, false);//添加,参数false表示事件冒泡流,true表示捕获流

    but1.removeEventListener("click", click, false);//移除

</script>

</body>

IE8-版本事件

<body>

    <input type="button" value="按钮1" id="but1">

    <script type="text/javascript">

    function click(){

        alert(this.value+"被点击了");

    }

    var but1 = document.getElementById("but1");

    but1.attachEvent("onclick", click);//添加,没有参数false或true,是因为IE8以及更早的浏览器只支持事件冒泡流,

    but1.detachEvent("onclick", click);//移除

</script>

</body>

兼容写法

<body>

    <input type="button" value="按钮1" id="but1">

    <script type="text/javascript">

    function myClick(){

        alert(this.value+"被点击了");

    }

    var but1 = document.getElementById("but1");

   var eventUtil = {//封装事件处理程序

        addEvent:function(ele,type,fun){

            if(ele.addEventListener){

                ele.addEventListener(type, fun, false);

            }else if(ele.attachEvent){

                ele.attachEvent('on'+type, fun);

            }else{

                ele['on'+type] = fun;

            }

        },

        removeEvent:function(ele,type,fun){

            if(ele.removeEventListener){

                ele.addEventListener(type, fun, false);

            }else if(ele.detachEvent){

                ele.detachEvent('on'+type, fun);

            }else{

                ele['on'+type] = null;

            }

        }

    }

    eventUtil.addEvent(but1,'click',myClick);

</script>

</body>

HTML之事件处理程序的更多相关文章

  1. KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序

    在大多数情况下,数据绑定属性提供了一种干净和简洁的方式来绑定到视图模型. 然而,事件处理是一个常常会导致详细数据绑定属性的领域,因为匿名函数通常是传递参数的推荐技术. 例如: <a href=& ...

  2. 深入理解DOM事件机制系列第二篇——事件处理程序

    × 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...

  3. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  4. JS事件-事件处理程序-笔记总结ing...

    html事件处理程序:缺点-行为与结构耦合<input type="button" onclick = "diaoyong();"> dom0级事件 ...

  5. JavaScript事件处理程序

    JavaScript中的事件处理程序主要分为3种: HTML事件处理程序: <script type="text/javascript"> // HTML事件处理程序 ...

  6. JS：事件处理程序

    在JQuery中有个toggle事件,可以绑定两个或多个函数,可以轮流相应click事件,这两天学习到原来javascript中有两个方法(也可以说是四个)同样可以实现这个功能. #box{ marg ...

  7. js 事件处理程序 事件对象

    事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...

  8. javaScript事件（二）事件处理程序

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...

  9. JavaScript：关于事件处理程序何时可以直接访问元素的属性

    指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(th ...

  10. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

随机推荐

  1. 201521123060 《Java程序设计》第5周学习总结

    1.本周学习总结 2.书面作业 Q1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 答:不能 ...

  2. Markdown例子

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  3. JavaSE（十）之Collection总结

    前面几篇把集合中的知识大概都详细的说了一遍,但是我觉得还是要总结一下,这样的话,可以更好的理解集合. 一.Collection接口 首先我们要一张图来说明: Collection接口,它是集合的顶层接 ...

  4. bookStore案例第一篇【部署开发环境、解决分类模块】

    前言 巩固Servlet+JSP开发模式,做一个比较完整的小项目 成果图 该项目包含了两个部分,前台和后台. 前台用于显示 后台用于管理 该项目可分为5个模块来组成:分类模块,用户模块,图书模块,购买 ...

  5. 庞玉栋:浅谈seo优化对于网站建设的重要性

    根据最近做SEO优化经验而写  写的也都是我的方法 大神勿喷 SEO:英文Search Engine Optimization缩写而来, 中文意译为搜索引擎优化 如果你连个网站都没有那就点这里:如何拥 ...

  6. 比较JqGrid与XtraGrid

    此只能比较两者的功能优劣,实现某种功能.效果的方便性和效率.首先分别粗略介绍XtraGrid和jqGrid DevExpress是目前.net下最为强大和完整的UI控件库, XtraGrid是这个控件 ...

  7. 最小覆盖_KEY

    最小覆盖(cover)..线段树 [题目描述] 给定 N 个区间[Li,Ri],需要你按照顺序选出一个区间序列使得[1,M]完全被覆盖.并且在选出来的序列中,某个区间[a,b]之前必须保证[1,a]都 ...

  8. oracle pl/sql 存储过程

    存储过程用于执行特定的操作,当建立存储过程时,既可以指定输入参数(in),也可以指定输出参数(out),通过在过程中使用输入参数,可以将数据传递到执行部分:通过使用输出参数,可以将执行部分的数据传递到 ...

  9. GitHub使用（二） - 新建文件夹

    1.首先打开我们已经建好的仓库 "test.github.com" 页面,可以看到如下图页面,找到“新建文件Create new file”按钮并点击.

  10. 代理模式与java中的动态代理

    前言    代理模式又分为静态代理与动态代理,其中动态代理是Java各大框架中运用的最为广泛的一种模式之一,下面就用简单的例子来说明静态代理与动态代理. 场景    李雷是一个唱片公司的大老板,很忙, ...