javascript-事件绑定和普通事件
1.什么是事件绑定,什么是普通事件?
事件绑定:针对dom绑定的事件.
普通事件:没有针对dom绑定的事件.
2.为什么要使用事件绑定?
普通事件有一个缺点,如果在普通事件里对某个节点进行两次委托事件(onclick)操作时会出现覆盖的问题,因此需要使用到事件绑定.
//普通事件
html:
<a href='#' id='clickMe'>点击我</a>
javascript:
var dom=document.getElementById('clickMe');
dom.onclick=function(){
alert(2)//输出了2
}
dom.onmouseout=function(){
alert(3)//3
}
3. 事件绑定的方法
(3.1)事件绑定类型
(3.1.1)在dom元素中直接绑定(onclick,onmouseout,onmouseover等)
<a href='javascript:void(0)' onclick='alert(111)'>我是绑定事件</a>
(3.1.2)在JavaScript代码中绑定
html结构:
<input type='text' id='pointMe'/>
javascript结构:
document.getElementById('pointMe').onclick=function(){
alert('我被点了')
}
(3.1.3)绑定事件监听函数
考虑到兼容问题:
—IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。
—addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;
兼容老版本的写法:
var x = document.getElementById('myBtn');
if (x.addEventListener) {
//所有主流浏览器,除了 IE 8 及更早 IE版本
x.addEventListener('click', myFunction);
} else if (x.attachEvent) {
// IE 8 及更早 IE 版本
x.attachEvent('onclick', myFunction);
}
(3.1.3.1)监听事件的补获和冒泡:
dom.addEventListener(事件,方法,布尔值)
当布尔值为false的时候是冒泡事件,事件执行的次序是先执行子节点的事件在执行父节点的事件
当布尔值是true的时候是补获事件.事件执行的次序是先执行父节点的事件在执行子节点的事件
(3.1.3.2)移除监听事件:
dom.removeEventListener(事件,方法名)
参考网站//www.runoob.com/jsref/met-element-addeventlistener.html
4. 事件绑定的案例
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>绑定事件和普通事件</title>
</head>
<body>
<a href='#' id='clickMe'>点击我</a>
</body>
<script type='text/javascript'> var dom=document.getElementById('clickMe'); //普通事件 dom.onclick=function(){ alert(1)//没有输出 } dom.onclick=function(){ alert(2)//输出了2 } //绑定事件 dom.addEventListener('click',function(){ alert(1)//输出了1 }) dom.addEventListener('click',function(){ alert(2)//输出了2 }) </script>
</html>
5.jquery的事件绑定方法
bind:只能对已有的元素绑定事件(现在摒弃了)
unbind:移除事件
/*可以放多个事件*/
$('.dom').bind('click mouseenter',function(){ })
live: 能对未来插入的元素绑定事件(现在摒弃了)
die:移除事件
delegate:事件处理程序适用于当前或未来的元素
undelegate:事件移除
on:事件处理程序适用于当前或未来的元素
off():事件移除事件
还没有评论,来说两句吧...