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. Python[小甲鱼003小插曲之变量和字符串]

      >>>teacher = 3 >>>teacher  3 #在定义了一个变量后可以之间输入整个变量即可访问这个变量.   >>> teache ...

  2. 201521123003《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  3. 201521123092《java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  4. 聊聊JAVA中 String类为什么不可变

    前言 "我的风格比较偏传统和经典" 小明说,"我们在打扮自己的问题上还是蛮冒险的...我觉得当你是只狗的时候,穿什么都hold的住!" 哈哈哈,脱离单身狗快两年 ...

  5. informix服务端口和oralce服务端口

    查找informix的服务端口1>>more .profile 找到: INFORMIXDIR=/home/informix INFORMIXSERVER=aaaa2>>cd ...

  6. Java main方法继承

    java中main方法是可以继承的 Test1.java package Variables; public class Test1 { public static void main(String[ ...

  7. java.sql.Exception:setString 只能处理少于 32766 个字符的字符串

    java.sql.Exception:setString 只能处理少于 32766 个字符的字符串 解决方式是 : 升级ojdbc的版本,   将原来的 ojdbc14_10.2.0.2.0.jar ...

  8. php显示距当前多长时间

    <?php header("Content-type: text/html; charset=utf-8");date_default_timezone_set('PRC') ...

  9. ACM学习之路___HDU 5723(kruskal + dfs)

    Abandoned country Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s) ...

  10. E - 钱币兑换问题

          在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很多种兑法.请你编程序计算出共有多少种兑法. Input每行只有一个正整数N,N小于32768. Output对应每个输入,输出兑换方 ...