JavaScript之事件的绑定与移除
来源:互联网 发布:今年淘宝双11 1元 编辑:程序博客网 时间:2024/06/06 01:59
对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的。
1. 原始写法
1.1 绑定事件:对象.事件=事件处理函数
<!
doctype
html>
<
html
>
<
head
>
<
style
type="text/css">
#div1{
width:200px;
height:200px;
background:pink;
margin-bottom: 10px;
}
</
style
>
</
head
>
<
body
>
<
div
id="div1"></
div
>
<
button
type="button" id="btn1">绑定事件</
button
>
<
button
type="button" id="btn2">移除事件</
button
>
</
body
><
br
><
script
type="text/javascript"><
br
>var btn1= document.getElementById("btn1");<
br
>btn1.onclick = function(){<
br
>alert(1);<
br
>}<
br
></
script
>
</
html
>
1.2 解除事件: 对象.事件=null (此方法就是函数的覆盖)
<script type="text/javascript">
var btn1= document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function(){
alert("btn1事件绑定成功!");
}
btn2.onclick = function(){
btn1.onclick =null;
alert("btn1所绑定的事件已经被移除!");
}
</script>
运行结果:在开始是,点击“绑定事件”按钮,会弹出一个提示框“btn1事件绑定成功!”,当点击“移除事件”按钮时,btn1所绑定的事件就已经移除了,并弹出提示
======================================================
2. 使用 attachEvent 、detachEvent、addEventListener 与 removeEventListener
2.1 事件绑定------attachEvent ,addEventListener
使用 attachEvent 和 addEventListenter 的好处就是,可以多次的进行事件的绑定,不向原始的方法那样,前面绑定的事件将会被后面的绑定的事件所覆盖,最后只能执行后面所绑定的函数。
attachEvent
<script type=
"text/javascript"
>
var
btn1= document.getElementById(
"btn1"
);
btn1.attachEvent (
'onclick'
,
function
(){alert(
'1'
);});
btn1.attachEvent (
'onclick'
,
function
(){alert(
'2'
);});
</script>
运行结果:2,1
说明:attachEVent 是先绑定后执行,它将先执行我后绑定的函数。
注意:1)attachEvent 只能兼容 IE7,IE8;
2)attachEvent 绑定的事件前面要加“on”
addEventListener
<script type=
"text/javascript"
>
var
btn1= document.getElementById(
"btn1"
);
btn1.addEventListener (
'click'
,
function
(){alert(
'1'
);},
false
);
btn1.addEventListener (
'click'
,
function
(){alert(
'2'
);},
false
);
</script>
运行结果:1,2
说明:1) addEventListener 是先绑定先执行,它将按顺序执行我绑定的事件。
2) addEventListener 的第三个参数:
布尔值参数是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序
注意:1)addEventListener 与 attachEVent 正好相反, 只不兼容 IE7,IE8,其他大部分的浏览器都可以执行。
2)addEventListener 绑定的事件前面不要加“on”
2.2 事件解除------detachEvent,removeEventListener
detachEvent
<script type=
"text/javascript"
>
var
fun =
function
(){
alert(11);
}
var
btn1= document.getElementById(
"btn1"
);
var
btn1= document.getElementById(
"btn1"
);
btn1.attachEvent (
'onclick'
,fun,
false
);
btn1.detachEvent(
'onclick'
,fun,
false
);
</script>
removeEventListener
<script type=
"text/javascript"
>
var
fun =
function
(){
alert(1);
}
var
btn1= document.getElementById(
"btn1"
);
btn1.addEventListener(
'click'
,fun,
false
);
btn1.removeEventListener(
'click'
,fun,
false
);
</script>
注意:1) 在removeEventListener 传入的参数与 addEventListener 传入的参数要一致,看似使用了相同的参数,但实际上,第二个参数与传入addEventListener()中的与第一个是完全不同的函数。
2) 因为移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。
btn1.addEventListener(
'click'
,
function
(){alert(1);},
false
);
btn1.removeEventListener(
'click'
,
function
(){alert(1);},
false
);
//无效
3)在公用函数体存在参数的情况下,不能将带参数的函数体传给 addEventListener 和 romoveEventListener。
错误示例:
<script type=
"text/javascript"
>
var
fun =
function
(e){
e.preventDefault();
//阻止事件目标的默认动作
alert(1);
}
var
btn1= document.getElementById(
"btn1"
);
btn1.addEventListener(
'click'
,fun(event),
false
);
btn1.removeEventListener(
'click'
,fun(event),
false
);
</script>
正确示例:
<script type=
"text/javascript"
>
var
fun =
function
(e){
e.preventDefault();
//阻止事件目标的默认动作
alert(1);
}
var
btn1= document.getElementById(
"btn1"
);
btn1.addEventListener(
'click'
,fun,
false
);
btn1.removeEventListener(
'click'
,fun,
false
);
</script>
4)detachEvent 与 removeEventListener 注意事项相同。
- JavaScript之事件的绑定与移除
- JavaScript之事件的绑定与移除
- JavaScript之兼容性事件的绑定和解除
- jQuery绑定事件与移除事件
- 书:"Pro JavaScript Techniques 精通JavaScript"之绑定/移除事件监听函数
- 事件的绑定和移除
- C# 移除所有的事件绑定
- JQuery绑定事件与移除事件、动画
- 事件的绑定和解除
- JS绑定事件和移除事件的处理方法
- JQuery事件绑定,移除绑定
- Jquery 事件绑定 | 移除事件
- JQuery removeClass和移除class的事件绑定
- JQuery removeClass和移除class的事件绑定
- 【jQuery】使用unbind()方法移除元素绑定的事件
- vue.js怎样移除绑定的点击事件?
- JavaScript 中 当用live绑定多个同名事件时,如何移除事件。
- Jquery中事件的绑定和解除
- org.apache.subversion.javahl.ClientException: Previous operation has not finished
- 判断是手机还是电脑访问的代码
- C# Process方法调用cmd执行命令
- 均分函数 numpy.arange() 和 numpy.linspace()
- 光荣的梦想
- JavaScript之事件的绑定与移除
- 车牌识别sdk与物联网发展
- js for等循环 跳出多层循环
- 单向链表实现
- 使用HTML语言和CSS开发商业站点_CSS3美化网页元素
- 387. First Unique Character in a String
- 使用Intent传递对象数据
- webim【LayIM】开发者文档
- Gradle 'ExoPlayer-release-v2' project refresh failed Error:Connection timed out: connect