您的位置:

js添加事件处理程序,js中常用事件

js添加事件处理程序,js中常用事件

更新:

本文目录一览:

如何在JavaScript中使用自定义事件

在javascript中实现自定义事件的原理是创建一个管理事件的对象.如下代码是事件的定义:

function EventTarget(){

this.handlers = {};//存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组

}

EventTarget.prototype = {

constructor:EventTarget,

//添加事件

addHandler:function(type,handler){

if(typeof this.handlers[type] == "undefined"){

this.handlers[type] = [];

}

this.handlers[type].push(handler);

},

//触发事件

fire:function(event){

if(!event.target){

event.target = this;

}

if(this.handlers[event.type] instanceof Array){

var handlers = this.handlers[event.type];

for(var i=0,len=handlers.length;i len;i++){

//将event传递给事件处理程序,event.target代表对象本身,

event.type代表事件名,你可以根据情况为添加event属性

handlers[i](event);

}

}

},

//移除事件

removeHandler:function(type,handler){

if(this.handlers[type] instanceof Array){

var handlers=this.handlers[type];

for(var i=0,len=handlers.length;i len; i++){

if(handlers[i] == handler){

break;

}

}

handlers.splice(i,1);

}

}

};

首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,

然后有三个操作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.

addHander是向handlers中添加事件处理程序

fire是触发handlers中的事件处理程序

removeHandler是向handlers中移除事件处理程序

注:事件处理程序通俗的讲就是事件被触发时需要执行的方法.

请说明JavaScript中处理事件的步骤

事件处理程序的方式了:

1. 设置HTML标签属性为事件处理程序

文档元素的事件处理程序属性,其名字由“on”后面跟着事件名组成,例如:onclick、onmouseover。当然了,这种形式只能为DOM元素注册事件处理程序。实例:

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1" onClick="console.log('div1');"div1

div id="div2" oNClick="console.log('div2');"div2

div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');"div3

/div

/div

/div

script type="text/javascript"

/script

/body

/html

结果(鼠标点击div3区域后):

从结果中可以看出:

①因为HTML里面不区分大小写,所以这里事件处理程序属性名大写、小写、大小混写均可,属性值就是相应事件处理程序的JavaScript代码;

②若给同一元素写多个onclick事件处理属性,浏览器只执行第一个onclick里面的代码,后面的会被忽略;

③这种形式是在事件冒泡过程中注册事件处理程序的;

2.设置JavaScript对象属性为事件处理程序

可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成,例如:onclick、onmouseover。实例:

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.onclick = function(){

console.log('div1');

};

div2.onclick = function(){

console.log('div2');

};

div3.onclick = function(){

console.log('div3');

};

div1.onclick = function(){

console.log('div11111');

};

div1.onClick = function(){

console.log('DIV11111');

};

/script

/body

/html

结果(鼠标点击div3区域后):

从结果中可以看出:

①因为JavaScript是严格区分大小写的,所以,这种形式下属性名只能按规定小写;

②若给同一元素对象写多个onclick事件处理属性,后面写的会覆盖前面的(ps:这就是在修改一个对象属性的值,属性的值是唯一确定的);

③这种形式也是在事件冒泡过程中注册事件处理程序的;

3.addEventListener()

前两种方式出现在Web初期,众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法,使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数:第一个参数是要注册处理程序的事件类型,其值是字符串,但并不包括前缀“on”;第二个参数是指当指定类型的事件发生时应该调用的函数;第三个参数是布尔值,其可以忽略(某些旧的浏览器上不能忽略这个参数),默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时,就是在事件捕获过程中注册事件处理程序。实例:

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);

div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);

div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);

div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);

div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);

/script

/body

/html

结果(鼠标点击div3区域后):

从结果中可以看出:

①addEventListener()第三个参数的作用正如上面所说;

②通过addEventListener()方法给同一对象注册多个同类型的事件,并不会发生忽略或覆盖,而是会按顺序依次执行;

相对addEventListener()的是removeEventListener()方法,它同样有三个参数,前两个参数自然跟addEventListener()的意义一样,而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可,同样可以省略,默认值为false。它表示从对象中删除某个事件处理函数。实例:

div1.addEventListener('click', div1BubbleFun, false);

div1.removeEventListener('click', div1BubbleFun, false);

function div1BubbleFun(){

console.log('div1-bubble');

}

4.attachEvent()

但是,IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的,IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获,所以attachEvent()并不能注册捕获过程中的事件处理函数,因此attachEvent()和detachEvent()要求只有两个参数:事件类型和事件处理函数。而且,它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例:

var div1 = document.getElementById('div1');

div1.attachEvent('onclick', div1BubbleFun);

function div1BubbleFun(){

console.log('div1-bubble');

}

相应的,从对象上删除事件处理程序函数使用detachEvent()。例如:

div1.detachEvent('onclick', div1BubbleFun);

到此为止,我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧!

二.事件处理程序的调用

1.事件处理程序的参数:正如前面所说,通常事件对象作为参数传递给事件处理函数,但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以,我们在写相关代码时应该注意兼容性问题。实例(给页面上id为div1的元素添加点击事件,当点击该元素时在控制台输出事件类型和被点击元素本身):

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

if(div1.addEventListener){

div1.addEventListener('click', div1Fun, false);

}else if(div1.attachEvent){

div1.attachEvent('onclick', div1Fun);

}

function div1Fun(event){

event = event || window.event;

var target = event.target || event.srcElement;

console.log(event.type);

console.log(target);

}

/script

/body

/html

2.事件处理程序的运行环境:关于事件处理程序的运行环境,也就是在事件处理程序中调用上下文(this值)的指向问题,可以看下面四个实例。

实例一:

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

/script

/body

/html

结果一:

从结果可以看出:

①第一种方法事件处理程序中this指向这个元素本身;

实例二:

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

/script

/body

/html

结果二:

从结果可以看出:

①第二种方法事件处理程序中this也指向这个元素本身;

②存在第二种方法时,它会覆盖第一种方法注册的事件处理程序;

实例三:

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

div1.addEventListener('click', function(){

console.log('div1.addEventListener:');

console.log(this);

}, false);

/script

/body

/html

结果三:

从结果可以看出:

①第三种方法事件处理程序中this也指向这个元素本身;

②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序;

实例四:

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

div1.attachEvent('onclick', function(){

console.log('div1.attachEvent:');

console.log(this === window);

});

/script

/body

/html

结果四:

从结果可以看出:

①第四种方法事件处理程序中this指向全局对象Window;

②第四种方法也不会覆盖第一种或第二种方法注册的事件处理程序;

3.事件处理程序的调用顺序:多个事件处理程序调用规则如下:

①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用;

②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用;

③使用attachEvent()注册的处理程序可能按照任何顺序调用,所以代码不应该依赖于调用顺序;

js添加事件和移除事件:addEventListener()与removeEventListener()

addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。

它们都接受3个参数:如 addEventListener("事件名" , "事件处理函数" , "布尔值"); (注:事件名不含"on",如“click”) 现在的版本可以省略第三个参数,默认值为false

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除

这个例子中,使用addEventListener()添加一个事件处理程序。虽然调用removeEventListener(0是看似使用了相同的参数,但实际上,第二个参数与传入addEventListener()中的那一个完全不同的函数。而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同

重写后的这个例子在addEventListener()和removeEventListener()中用的是相同的函数。

1:相同事件绑定和解除,需要使用共用函数;绑定和解除事件时 事件没有"on" 即onclick写成click

2:共用函数不能带参数;

布尔值参数是true,表示在捕获阶段调用事件处理程序;就是最不具体的节点先接收事件,最具体的节点最后接收事件

js添加事件处理程序,js中常用事件

本文目录一览: 1、如何在JavaScript中使用自定义事件 2、请说明JavaScript中处理事件的步骤 3、js添加事件和移除事件:addEventListener()与removeEvent

2023-12-08
js的事件处理丶java教程网(js中事件)

本文目录一览: 1、关于js事件捕获的用法 2、JS中事件的调用 3、请简单说明javascript中处理事件的步骤 4、java中js的事件使用---$("p").style("background

2023-12-08
js事件中change,js事件中监听其他事件

本文目录一览: 1、js中的change事件不起作用 2、js中关于change的问题 3、这段JS代码为什么change事件中先删除上一次事件创建的option删不干净,会剩下一个城市 4、汇总js

2023-12-08
js移除事件实例,js增加和删除事件

本文目录一览: 1、js怎么移除所有绑定的事件 2、js添加事件和移除事件:addEventListener()与removeEventListener() 3、如何通过js实现添加事件监听和移除事件

2023-12-08
js选中事件,js下拉框选中事件

2023-01-03
js选中事件,js选择框改变事件

2023-01-07
js选择文件事件,js选中文本事件

本文目录一览: 1、file控件选择上传文件确定后触发的js事件是哪个? 2、file控件选择上传文件确定后触发什么js事件 3、js中如何点击一个按钮弹出一个file文件框 4、javascript

2023-12-08
js怎么添加java,js怎么添加鼠标移入移出变色事件

本文目录一览: 1、如何在js中嵌入java语句 2、怎么把js文件添加到java界面里面 3、在单独的js文件中如何嵌入java代码,谢谢! 如何在js中嵌入java语句 js是在前端运行的(浏览器

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js窗口close事件(js弹出窗口关闭事件)

本文目录一览: 1、js有关闭窗口时的事件吗 2、怎样用JS实现关闭当前窗口 3、javascript有没有纯粹的window.onclose事件 js有关闭窗口时的事件吗 javascript捕获窗

2023-12-08
asp控件事件js(asp按钮点击事件)

本文目录一览: 1、js 触发asp.net的服务器按钮的响应事件 2、如何在控件中的ontick事件中调用前台的javascript函数 3、怎么才能在ASP调用JS事件 4、asp.net里怎么为

2023-12-08
js待办事项列表添加删除代码的简单介绍

本文目录一览: 1、“点击此处可添加笔记”的代码怎么写 2、js动态添加、删除html代码 3、vivo手机便签怎么一起删 “点击此处可添加笔记”的代码怎么写 输入符号就可以了第一步打开手机,点击备忘

2023-12-08
java中使用js处理数据,js获取java变量

本文目录一览: 1、java程序中运行js脚本 2、java使用js处理逻辑 3、如何在java中调用js方法 java程序中运行js脚本 123456789101112131415161718192

2023-12-08
js网页中的事件有哪些(js常见事件)

本文目录一览: 1、js中常用的事件有哪些 2、JavaScript中都有些什么事件?事件有什么作用? 3、js 触发事件种类类型有哪些 js中常用的事件有哪些 最常用的就是onclick咯, 鼠标点

2023-12-08
JS绑定点击事件详解

2023-05-21
js移除mousewheel事件removeeventlis

2022-11-28
js给div添加代码,js给div添加内容

2022-11-23
js出发元素的click时间,js添加click事件

2023-01-09
网页添加js代码(如何在别人网站上加入js代码)

本文目录一览: 1、在JSP页面中加入JavaScript小程序的方法分别有哪两种?其语法格式为? 2、怎样在网页中插入JavaScript代码 3、怎么把JS代码添加到网页里 4、给网页添加java

2023-12-08