js的事件处理程序

js事件处理程序一般有三种:

1、HTML事件处理程序

<body>
    <input type="button" value="点击" onclick="mes()" />
    <!--js-->
    <script>
       function mes(){
           document.write("hello world!");
       }
    </script>
</body>

这种事件方式一般不推荐,变更事件麻烦。

2、DOM0级处理程序

<body>
    <input type="button" value="点击" id="btn"/>
    <!--js-->
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            document.write("hello world!");
        }
    </script>
</body>    

这里可以 = 一个匿名函数,也可以是已声明函数。

DOM0级处理程序的清空:element.onclick = null;

3、DOM2级处理程序

DOM2级处理程序定义了事件添加和事件删除两个方法。分别是:addEventListener()和removeEventListner()。

这两个方法都有三个参数:处理事件名(如:点击事件 click),事件处理的函数(可以是匿名函数也可以是已声明函数,这里一般用已声明函数,方便remove),布尔值(这里的值是调用事件的方式,true为事件捕获,false为事件冒泡,一般设置为事件冒泡)

添加事件:

<body>
<input type="button" value="点击" id="btn"/>
<!--js-->
<script>
var btn = document.getElementById("btn");
btn.addEventListener(‘click‘,function(){
  document.write("hello world!");
},false);
</script>
</body>

删除事件:

<body>
<input type="button" value="点击" id="btn"/>
<!--js-->
<script>
var btn = document.getElementById("btn");
btn.addEventListener(‘click‘,mes,false);
</script>
</body>
时间: 2024-10-14 00:46:25

js的事件处理程序的相关文章

JS 关于事件处理程序机制

关于这个问题,自己也做了一下测试,算了,直接粘贴代码吧,若有问题,欢迎指出! <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>JS DOM2事件处理程序</title></head><body> <input id="btn" type="butto

JS:事件处理程序

在JQuery中有个toggle事件,可以绑定两个或多个函数,可以轮流相应click事件,这两天学习到原来javascript中有两个方法(也可以说是四个)同样可以实现这个功能. #box{ margin: 50px; width: 200px; height: 200px; } .blue{ background: blue; } .red{ background: red; } 1.W3C 下的事件处理: addEventListener() :用于处理指定的操作: removeEventL

js添加事件处理程序

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>robot</title> <script> //添加事件处理程序 //传入三个参数分别为事件名称.处理程序.是否要让事件向上传递 window.addEventListener("load", init, false); f

JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

1.HTML事件处理程序 某个元素支持的某种事件,可以通过一个与相应事件处理程序同名的HTML特性指定.这个特性的值应该是能够执行的JS代码.例如:按钮单击是要执行一些js代码,可以像下面: <input type="button" value="click me" onclick="showMessage()" /> 在js中就可以像下面一样处理: <script> function showMessage(){ ale

JavaScirpt中的事件处理程序

事件处理在JS中可谓是点睛一笔,JS的事件处理程序使得JS成为了网页交互层的第一把交椅.那么,JS中有几种事件处理程序呢? 1.DOM0级事件处理程序 通过JS指定事件处理程序的传统方式,就是将一个函数添加给一个对象的事件处理程序.这种方式为现代所有的浏览器所用.原因一是方便简单,原因二是可以实现跨浏览器. 1 var oA = document.getElementsByTagName("a")[0]; 2 oA.onclick = function(){ 3 alert(this.

FF,chrome与IE的事件处理程序

今天学习了js的事件处理程序,IE与FF,chrome,safari,opera的处理事件方法不同,FF,chrome,safari,opera支持addEventLisener,而addEventListener是属于DOM2定义的函数,IE不支持DOM2,因此要想实现跨浏览器的事件处理,需要针对IE与FF,chrome,safari,opera进行不一样的处理. 1.事件流 首先要记录的就是事件流了,事件流有三个阶段,事件捕获阶段.处于目标阶段和事件冒泡阶段.处于目标阶段,其事件处理中被看成

事件处理程序模型

事件处理程序模型 Javascript与HTML之间的交互式通过事件实现的:它最早提出和使用事件视为分担服务器运算负载的.一般来讲,就是文档或者浏览器中发生的一些特定的交互瞬间.我们一般使用时间处理程序来预定事件,这种方式来源于软件工程中的观察者模式:从而实现了页面行为(js脚本)与页面展示之间的松散耦合. 下面说一声常见的几种事件处理程序: (1)HTML事件处理程序-嵌入式注册模型 该操作通过指定onclick 特性并将一些 JS 代码作为它的值来进行定义. 需要注意的地方就是 HTML事件

JavaScript - 事件处理程序

即响应某个事件的函数. 1. HTML事件处理程序 <input type="button" value="Click Me" onclick="alert('Clicked')" /> 或者 <input type="button" value="Click Me" onclick="showMessage()" /> onclick的处理程序中可以通过even

跨浏览器之事件处理程序

上次说到了JS中事件处理程序在DOM0级和DOM2级和IE中是不同的,每个都有自己的添加和移除事件处理程序的形式. 那要将这些差异进行统一化.避免这种差异.对于顺序问题,我们应该要先将最经常使用的放在最上面把兼容性最好的放在最下面,也就是实现向后兼容. 1 function addEvent(obj,type,handle){ 2 if(obj.addEventListener){//兼容DOM3级 3 obj.addEventListener(type,handle,false); 4 } 5