javascript--事件绑定&模型

来源：互联网发布：cad数控冲床编程编辑：程序博客网时间：2024/05/16 19:34

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><!-- 这是典型”事件“的案例 dom对象的句柄  句柄绑定的函数（js 事件发生的一瞬间关于事件的各种信息全在一个对象上有三种绑定事件的方式1html方式 2对象属性方式 3 addeventlistener方式第一种就是下方这种 把事件写在标签里 但夹杂在html里不好，不简洁效率不高不符合行为结构样式分离  --><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>

0 0