[转]javascript指定事件处理程序包括三种方式:

javascript指定事件处理程序包括三种方式:
(1):DOM0级事件处理程序
如:

代码如下:

var btn=document.getElementById("mybtn"); //取得该按钮的引用
btn.onclick=function(){
alert(‘clicked‘);
alert(this.id); // mybtn

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
删除DOM0级方法指定的事件处理程序:
btn.onclick=null; // 删除事件处理程序
}
(2):DOM2级事件处理程序
DOM2
级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所
有DOM节点中都包含这两个方法,并且它们都接受3个参数:要处理的事件名,做为事件处理程序的函数和一个布尔值。最后这个参数如果是true,表示在捕
获阶段调用事件处理程序;如果是fasle,表示在冒泡阶段调用事件处理程序。
如:

代码如下:

var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);

使用DOM2级事件处理程序的主要好处是可以添加多个事件处理程序。
如:

代码如下:

var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("hello world!");
},false);

这里为按钮添加了两个事件处理程序。这两个事件处理程序会按照它们的顺序触发。
通过addEventListener()添加的时间处理程序只能使用removeEventListener()来移除,移除时传入的参数与添加时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数将无法移除。
如:

代码如下:

var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
//移除
btn.removeEventListener("click",function(){ //这样写没有用 (因为胃第二次与第一次相比是一个完全不同的函数)
alert(this.id);
},false);

解决办法:

代码如下:

var btn=document.getElementById("mybtn");
var hander=function(){
alert(this.id);
};
btn.addEventListener("click",hander,false);

btn.removeEventListener("click",hander,false); // 有效

注意:这里我们的第三个参数都是false,是在冒泡阶段添加的。大多数情况下,都是就事件处理程序添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器。

时间: 2024-10-25 02:04:18

[转]javascript指定事件处理程序包括三种方式:的相关文章

指定事件处理程序的几种方式

通过指定事件处理程序可以侦听事件的发生并对其作出响应,已达到某种交互目的.那么指定事件处理程序的方式有哪些呢? 比如有以下代码: <input id="btn" type="button" value="click me" /> 要求为按钮指定一个单击事件处理程序,即单击按钮时输出相应信息. 1.HTML事件处理程序 某个元素支持的每种事件,都可以使用一个与相应事件处理程序同名的HTML特性来指定.特性的值可以是能够执行的js代码.

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", function(e)

Javascript事件处理程序的3种方式

既然产生了事件,我们就要去处理它,据我了解Javascript事件处理程序主要有3种方式: 1.HTML事件处理程序 即我们直接在HTML代码中添加事件处理程序,如下面这段代码: <input id="btn1" value="按钮" type="button" onclick="showmsg();"> <script>    function showmsg(){        alert(&quo

07.30《JavaScript》——JS创建对象的三种方式

1.第一种创建对象的方式:先定义类再创建对象 // 第一种创建对象的方式:先定义类再创建对象 function stu(sno, name, age){ this.sno = sno; this.name = name; this.age = age; this.study = function(){ alert("学号为"+this.sno+"的学生,姓名叫做"+this.name+",正在努力学习,年龄为"+this.age); } } va

JS事件绑定的三种方式比较

js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } input{ display: block; margin-bottom:10px; } .active{ color:

js中的事件绑定的三种方式

1 直接在html标签中绑定 <button onclick = "show()"></button> 注意当你引用的js代码是包裹在window.onload中的形式的时候,show()是会报没有定义的错误,原因在于window.onload是在 页面全部加载完之后再去解析加载里面的内容.而button的点击事件在解析button的时候没有被定义. 2 用js的对象进行绑定事件 <body> <buttonid="btn1"

JavaScript中清空数组的三种方式

方式1,splice 1 2 3 var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 Array[0],空数组,即被清空了 方式2,length赋值为0 这种方式很有意思,其它语言如Java,其数组的length是只读的,不能被赋值.如 1 2 int[] ary = {1,2,3,4}; ary.length = 0; Java中会报错,编译通不过.而JS中则可以,且将数组清空了, 1 2 3 var a

JavaScript事件处理的三种方式(转)

一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小.说白了,事件是文档或浏览器中发生的特定交互瞬间! 通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这

JavaScript定义数组的三种方式(new Array(),new Array(&#39;x&#39;,&#39;y&#39;),[&#39;x&#39;,&#39;y&#39;])

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-