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(事件,方法名)参考网站:http://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():事件移除事件
扫一扫
625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
