JS事件处理程序的几种方法
来源:互联网 发布:php微信分销开源系统 编辑:程序博客网 时间:2024/05/16 18:34
JavaScript与HTML之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件就是用户或浏览器自身执行的某种动作。诸如click,load和mouseover,都是事件的名字而响应某个事件的函数就叫做事件处理程序。事件处理程序的名字以"on"开头。
1、HTML事件处理程序
首先,这种方法已经过时了。因为动作(js代码)和内容(html代码)紧密糅合。但是写个小demo还是可以使用的。
(1)直接在html中定义事件处理程序及包含的动作
代码如下:
<input type="button" value="click me!"/>
(2)html中定义事件处理程序,执行的动作则调用其他地方定义的脚本。
代码如下:
<input type="button" value="click me!"/> <script> function showMessage(){ alert("clicked!");
注意:1.通过event变量可以直接访问事件本身,比如onclick="alert(event.type)"会弹出click事件
2.this值等于事件的目标元素
2.DOM 0级事件处理程序
这种方法简单而且跨浏览器,但是只能为一个元素添加一个事件处理函数
添加事件处理程序代码:
<input type="button" value="click me!" onclick=showMessage()/>
<script>function showMessage(){ alert("clicked!");}
</script>
删除事件处理程序代码:
myBtn.onclick=null;
注意:1.我们不能给一个元素同时添加两个事件
2.我们不能控制元素的事件流(捕获or冒泡)
3.DOM 2级事件处理程序
DOM2级事件处理程序定义了两个方法:
1.addEventListener()--添加事件侦听器
2.removeEventListener()--删除事件侦听器
三个参数:1.要处理的事件名
2.作为事件处理程序的函数
3.表示事件流方式的布尔值。false为冒泡阶段处理程序;true为捕获阶段处理程序。
eg:<button id="button">点我</button>
<script>
var button=documentElementById("button");
button.addEventListener("click",function(){
alert(this.id);},false);
button.addEventListener("click",function(){
alert("another event");},false);
</script>
结果:第一次弹出窗口:button
第二次弹出窗口:another enent
注意:只能通过removeEventListener()这个删除事件处理程序的方法来移除addEventListener()添加的事件处理程序,且需要传入相同的参数。
eg: <button id="button">点我</button>
<script>
var button=document.getElementById("button");
function handler(){
alert(this.id);}
button.addEventListener("click",handler,false);
button.removeEventListener("click",handler,false);
成功移除!
注意:1传入方法的handler没有(),是因为这里都只是定义函数,而不是调用。
四.IE事件处理程序中有类似与DOM2级事件处理程序的两个方法:
1.attachEvent()
2.detachEvent()
它们都接收两个参数:
1.事件处理程序名称。如onclick、onmouseover,注意:这里不是事件,而是事件处理程序的名称,所以有on。
2.事件处理程序函数。如function(){alert("clicked");}
之所以没有和DOM2级事件处理程序中类似的第三个参数,是因为IE8及更早版本只支持冒泡事件流。
注意:
1.IE事件处理程序中attachEvent()的事件处理程序的作用域和DOM0与DOM2不同,她的作用域是在全局作用域中。因此,不同于DOM0和DOM2中this指向元素,IE中的this指向window。
2.同样,我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2不同,事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。
3.同样地,通过attachEvent()添加的事件处理程序必须通过detachEvent()方法移除,同样的,不能使用匿名函数。
4.支持IE事件处理程序的浏览器不只有IE浏览器,还有Opera浏览器。
第五部分:跨浏览器的事件处理程序
这一部分需要创建两个方法:
- addHandler() --这个方法职责是视情况来使用DOM0级、DOM2级、IE事件处理程序来添加事件。
- removeHandler()--这个方法就是移除使用addHandler添加的事件。
这两个方法接收相同的三个参数:
1.要操作的元素--通过dom方法获取
2.事件名称--注意:没有on,如click、mouseover
3.事件处理程序函数--即handler函数
这两个方法的构造情况如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var
EventUtil={
addHandler:
function
(element,type,handler){
if
(element.addEventListener){
element.addEventListener(type,handler,
false
);
//注意:这里默认使用了false(冒泡)
}
else
if
(element.attachEvent){
element.attachEvent(
"on"
+type,handler);
}
else
{
element[
"on"
+type]=handler;
}
},
removeHandler:
function
(element,type,handler){
if
(element.removeEventListener){
element.removeEventListener(type,handler,
false
);
//注意:这里默认使用了false(冒泡)
}
else
if
(element.detachEvent){
element.detachEvent(
"on"
+type,handler);
}
else
{
element[
"on"
+type]=
null
;
}
}
};
即先判断DOM2级事件处理程序,再判断IE事件处理程序,最后使用DOM0级事件处理程序。
阅读全文
0 0
- JS事件处理程序的几种方法
- Js事件详解(1)事件类型及几种添加事件处理程序的方法
- js 几种类型的事件处理程序
- js 几种类型的事件处理程序
- js 几种类型的事件处理程序
- js事件绑定的几种方法
- JS的事件处理程序
- JS的事件处理程序
- 事件处理程序的几种方式总结
- js 绑定事件的几种方法 addEventListener()
- js 事件处理程序
- JS-事件处理程序
- JS事件处理程序
- Java Swing 中如何处理事件 几种常用的事件处理方法, 很经典
- js--事件--事件处理程序
- js--事件--事件处理程序
- js跨浏览器的事件处理程序
- JS数组扁平化处理的几种方法
- Maven学习 (一) 搭建Maven环境
- springmvc 的静态资源配置
- 《机器学习技法》学习笔记13——深度学习
- 二叉树 STL 图 哈希 详解
- Editor does not contain a main type
- JS事件处理程序的几种方法
- HDU5512 Pagodas(GCD+水题)
- UVa11582 [快速幂]Colossal Fibonacci Numbers!
- php &
- Shell常见命令实践
- CodeForces
- springBoot如何如何设置fileMazSize()
- ZOJ 1525 Air Raid (有向图最小路径覆盖 + 理解)
- HDU 6071 Lazy Running