js-DOM[1] 绑定~

来源：互联网发布：apache源码包下载编辑：程序博客网时间：2024/06/06 11:44

第一个种绑定方法：
写到标签了： <a href="" onclick=""></a>
DOM 0 的标准(古老的标准)
好处“ 所有浏览器都支持 ”

坏处“ 1. 夹在html代码中，不简洁

2. 效率低

3. 不符合提倡的行为、结构、样式分离了. ”

<a href="#" onclick="cl()">lianjie</a>

第二个种绑定方法：
直接onload绑定推荐

好处“ 1. 代码简介，完成分离

2. 便于操作当事对象(因为function是作为对象的onxx属性出现的,因此如果函数里面操作该对象，直接用this就可以引用对象)

3. 可以方便的读取事件对象,以其第一个事件传递

4. ev 事件 ”

坏处“ 1.

window.onload=function(){alert('hello');}window.onload=function(){alert('world');}/* 第二个缺点：只会弹出 world */

”

window.onload=function(){document.getElementById('test').onclick=function(ev){alert('绑定');this.style.background = 'green';console.log(ev);}document.getElementsByTagName('html')[0].onclick=function(ev){/* */var test1 = document.getElementById('test1');test1.style.left = ev.clientX + 'px';test1.style.top = ev.clientY + 'px';}}

<style> #test{height: 50px;width: 50px;background: orange;}#test1{background: yellow;height: 50px;width: 50px;position: absolute;top: 100px;left: 100px;}</style></head><body><div id="test"> </div><div id="test1"> </div></body>

第三个种绑定方法：
addEventListener
W3c标准绑定

1. 绑定那个事件？ click, load, change。。。。
2. 绑定什么函数---自定义
3. 什么方式监听？冒泡.捕捉

// 1. 事件名 一律不带on// 2. 绑定事件的函数中 this 指的绑定该事件的对象// 3. 执行顺序按照绑定顺序来搞的window.onload=function(){var test = document.getElementById('test');test.addEventListener('click',function(){alert('click');alert(this.style.width);},false);test.addEventListener('click',function(){alert('click,two');},false);}

W3C:

冒泡/捕捉：

<div id="t1">123<div id="t2"> 2<div id="t3">3</div></div></div><script> function $(id){return document.getElementById(id);}  // 冒泡与捕捉$('t1').addEventListener('click',function(ev){alert('t1');ev.stopPropagation();},false);$('t2').addEventListener('click',function(ev){alert('t2');ev.stopPropagation();},false);$('t3').addEventListener('click',function(ev){alert('t3');ev.stopPropagation();},false);/*$('t1').addEventListener('click',function(){alert('t1');},false);$('t2').addEventListener('click',function(){alert('t2');},false);$('t3').addEventListener('click',function(){alert('t3');},false);*/</script>

阻止：

<form action="" id="fm"> <p><input type="text" name="x" id="x"></p><input type="submit" value="提交"></form><script>// 阻止 w3c标准$('fm').addEventListener('submit',function(ev){if($('x').value==''){alert();ev.preventDefault();}},false);</script>

绑定：

<div><p id="dj"> 点击 </p></div><div> <input type="submit" value="让你哭" onclick="addone()"><input type="submit" value="让你笑" onclick="addtwo()"><input type="submit" value="不准哭" onclick="remone()"><input type="submit" value="不准笑" onclick="remtwo()"></div><script> var atag = document.getElementsByTagName('a')[0];function xi(){alert('笑');}function ku(){alert('哭');}function addone(){$('dj').addEventListener('click',ku,false);}function addtwo(){$('dj').addEventListener('click',xi,false);}function remone(){$('dj').removeEventListener('click',xi,false);}function remtwo(){$('dj').removeEventListener('click',ku,false);}</script>

IE下的：

冒泡/捕捉：

阻止：

绑定：

window.onload=function(){var test1 = document.getElementById('test1')if(test1.attachEvent){document.getElementById('test1').attachEvent('onclick',function(){alert('冒泡');},false);document.getElementById('test1').attachEvent('onclick',function(){alert('捕捉');},true);}else{document.getElementById('test1').addEventListener('click',function(){alert('冒泡');},false);document.getElementById('test1').addEventListener('click',function(){alert('捕捉');},true);}/*ie:0. 绑定事件的函数不一样，IE中用的 attachEvent1. 要加on ，如click->onclick2. 不支持捕捉， 只支持冒泡3. 执行顺序不固定4. 绑定事件中，this的指向问题  w3c指向元素本身， ie指向window5. ie事件对象是window.event ，实测ie678已经支持ev了 */}<input type="button" id="test1" value="d">

0 0