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. 单例模式（Singleton）看了就懂

    单例,故名思议,一个只能创建一个实例的类. 单例被广泛应用于Spring的bean(默认).线程池.数据库连接池.缓存,还有其他一些无状态的类如servlet. 一个没必要多例的类实现了单例可以节约空 ...

  2. Spring第一篇【介绍Spring、引入Spring、Spring六大模块】

    前言 前面已经学习了Struts2和Hibernate框架了.接下来学习的是Spring框架-本博文主要是引入Spring框架- Spring介绍 Spring诞生: 创建Spring的目的就是用来替 ...

  3. Windows下chm转换为html的超简单方法

    摘要:通过调用Windows命令,将chm 文件转换为html 文件 概述:很多程序员朋友都会遇到这样的问题,看一个离线版的帮助文档(chm文件),总会产生一个索引文件(该文件的chw文件), 而且有 ...

  4. kvm 虚拟化的使用

    kvm原理:基于内核空间虚拟化,加载内核模块,来做到虚拟化(简称内核空间).基于qemu连接内核,driver驱动连接kvm的API接口(简称用户空间): hypervisor 管理硬件设备,传统的虚 ...

  5. 解决linux AMR转MP3出现转码成功却无法播放的问题

    根据帖子:http://blog.csdn.net/z313731418/article/details/50218341  的提示,在linux安装ffmpeg,确实在linux下使用命令可以将am ...

  6. NSTimer、CADisplayLink 内存泄漏

    NSTimer.CADisplayLink 内存泄漏 内存泄漏的原因 CADisplayLink 要用 Taget 和 Selector 初始化,NSTimer 也可以用类似的方法初始化.这样初始化之 ...

  7. 乐橙谷浅析JAVA程序员就业前景

    不知道大家对Java就业前景了解多少.随着信息化的发展,IT培训受倒了越来越多人的追捧.在开发领域,JAVA培训成为了许多人的首选!JAVA应用广泛,JAVA培训就业前景良好!目前,虽然JAVA人才的 ...

  8. 翻译：MariaDB ALTER TABLE语句

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  9. 关于web前端代码艺术

    以前一直都以为html代码要分离得很好,html一个文件,css一个文件,js一个文件,然后最好一个html页面里面不要要太多冗余的代码,不要恶心地引入一个又一个的js,连jquery的引入我都觉得有 ...

  10. oracle数据中记录被另一个用户锁住

    原因:PL/SQL里面执行语句执行了很久都没有结果,于是中断执行,于是就直接在上面改字段,在点打钩(记入改变)的时候提示,记录被另一个用户锁住. 解决方法: 第一步:(只是用于查看哪些表被锁住,真正有 ...