您的位置：首页 > Web前端 > JavaScript

javascript--事件绑定&模型

2016-02-28 09:52 597 查看

3种事件绑定

1html方式 2对象属性方式 3 addeventlistener方式

2种模型：捕捉，冒泡

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#test1,#test2,#t3,#t4{
width: 50px;
height:50px;
margin: auto;
}
</style>
</head>
<body>

<a href="#" onclick="t();">haha</a>

<div id= 'test1'>
test~~~~~~~~~~~~1
</div>

<div id= 'test2'>
test~~~~~~~~~~~~2
<div id="t3">
t3
<div id="t4">t4</div>
</div>
</div>

</body>

<script type="text/javascript">
/*第一种*/
function t(){
alert('aiai');
}

/*第二种 onload 加载好就执行
用id定位并执行函数
相比第一种好处有：
1完成了行为的分离
2速度更快便于操作当事对象
怎么操作 this就指代getbyid的对象
3可以很方便读取事件对象看evconsole*/
window.onload = function(){
document.getElementById('test1').onclick = function(ev){
alert('test1哦啊啊啊啊啊');
console.log(ev);
}
}

/*第三种才是最常用的比第二种多一点东西,格式如下
事件名不加on(onclick)
还有第三个参数 div一个包一个每个加个add事件 alert
false 冒泡模型事件向外执行
true 捕捉摸型事件向内执行

2-3-4-3-2

怎么停止事件(一连串事件执行时)取消冒泡
ev.stopPropagation()*/
var test2 = document.getElementById('test2');
test2.addEventListener('click',function(){
alert('第三种阿鲁test2');
},true);

var test3 = document.getElementById('t3');
test2.addEventListener('click',function(){
alert('test3');
},true);

var test4 = document.getElementById('t4');
test2.addEventListener('click', function(ev){
alert('第test4');
ev.stopPropagation();
},true);

var test2 = document.getElementById('test2');
test2.addEventListener('click',function(){
alert('第三种阿鲁test2');
},false);

var test3 = document.getElementById('t3');
test2.addEventListener('click',function(){
alert('test3');
},false);

var test4 = document.getElementById('t4');
test2.addEventListener('click',function(){
alert('第test4');
},false);

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航