JS事件处理程序的几种方法
2017-08-04 19:55
495 查看
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函数
这两个方法的构造情况如下:
即先判断DOM2级事件处理程序,再判断IE事件处理程序,最后使用DOM0级事件处理程序。
事件就是用户或浏览器自身执行的某种动作。诸如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 ; } } }; |
相关文章推荐
- Js事件详解(1)事件类型及几种添加事件处理程序的方法
- js事件处理程序的运行环境(改变attachEvent内部的this指向&封装兼容性的 addEvent方法)
- js 几种类型的事件处理程序
- js 几种类型的事件处理程序
- js 几种类型的事件处理程序
- 深入理解在JS中通过四种设置事件处理程序的方法
- 浅谈Javascript事件处理程序的几种方式
- js添加事件处理程序
- 蛙蛙推荐:JS里声明事件处理的几种方式
- 为服务器控件加入客户端事件处理的几种方法
- 浅谈Javascript事件处理程序的几种方式
- JS注册/移除事件处理程序(ExtJS应用程序设计实战)
- js添加事件处理程序
- JS事件处理程序小结
- JS窗口问题处理:使弹出窗口保持前端显示的几种方法,及window窗体对象open()和showModalDialog()用法
- .net中多控件共享事件处理程序的方法
- js使用函数绑定技术改变事件处理程序的作用域
- JS窗口问题处理:使弹出窗口保持前端显示的几种方法,及window窗体对象open()和showModalDialog()用法
- 为服务器控件加入客户端事件处理的几种方法
- 对象事件与处理程序代码进行关联的几种方式