js的两种写法为何第一种写法无效
js的两种写法为什么第一种写法无效?
<a href="http://www.baidu.com" id="link">百度</a>
js:
而如果是:
------解决方案--------------------
obj没有用到哟
------解决方案--------------------
有，没他快。
------解决方案--------------------
我觉得吧，其实就是两种绑定的区别。
dom.onclick绑定，这个就是绑定到dom对象的onclick属性上去了。
这是内置的，就是说，onclick触发的方法，如果返回false的时候，那么就会阻止事件的默认动作。
这是使用dom1级事件绑定时的情况，而dom2级的事件绑定，把阻止默认动作这个功能的实现，让你自己去完成。
比如这样阻止：
所以，上面的情况才会出现一种没有阻止默认的动作，而一种却阻止了。
在2楼基础上，把代码更改一下：
这样的话，两种情况，都不会再跳转页面了。
根本原因还是因为，dom1级，dom2级绑定事件的，下面看看这两种绑定在浏览器下的一些属性：
图片出自于谷歌浏览器的调试工具：
第一张图是dom2级绑定的，就是那个addEvent绑定的方法，注意红框的部分，这个事件不是标签的属性。
第二张图是dom1级绑定的，.onclick方法，红框部分显示，它是dom元素的一个属性。
这应该就是一个本质的区别吧，dom元素本身就携带的了onclick的属性，dom1级的事件绑定方法，就是把触发的函数，放到这个属性上，因为这是自带属性，它本身就有一些默认的，浏览器写好的处理功能，比如：对于有默认动作的标签，在返回false的时候，取消它的默认动作。
说的有点多，逻辑结构也有点乱。
之前还真是没有细想过这个事情，拖楼主福了啊。。。
本帖最后由 u013346337 于 2014-01-01 01:01:28 编辑
html:<a href="http://www.baidu.com" id="link">百度</a>
js:
function addEvent(obj, type, fn) {
if (typeof addEventListener != 'undefined') {
addEventListener(type, fn, false);
} else if (typeof attachEvent != 'undefined') {
attachEvent('on' + type, fn);
}
}
addEvent(window, 'load', function(){
var link = document.getElementsByTagName('a')[0];
addEvent(link, 'click', function(){
return false;
});
});
//能正常进入百度
而如果是:
addEvent(window, 'load', function(){
var link = document.getElementsByTagName('a')[0];
link.onclick = function() {
return false;
};
});
//这样点击无效,进不了百度页面了,麻烦哪位请告诉我下原因啊,谢谢?
------解决方案--------------------
obj没有用到哟
function addEvent(obj, type, fn) {
if (typeof obj.addEventListener != 'undefined') {
obj.addEventListener(type, fn, false);
} else if (typeof obj.attachEvent != 'undefined') {
obj.attachEvent('on' + type, fn);
}
}
------解决方案--------------------
有，没他快。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id='g'>ggg</div>
<script>
function $(id){
return document.getElementById(id);
}
function addEvent(obj, type, fn) {
if (typeof addEventListener != 'undefined') {
obj.addEventListener(type, fn, false);
} else if (typeof attachEvent != 'undefined') {
obj.attachEvent('on' + type, fn);
}
}
addEvent(window, 'load', function(){
$('g').onclick = function(){
alert('因为我，一开始就存在的，在前面');
}
addEvent($('g'), 'click', function(){
alert('mei ta kuai');
});
});
</script>
</body>
</html>
------解决方案--------------------
我觉得吧，其实就是两种绑定的区别。
dom.onclick绑定，这个就是绑定到dom对象的onclick属性上去了。
这是内置的，就是说，onclick触发的方法，如果返回false的时候，那么就会阻止事件的默认动作。
这是使用dom1级事件绑定时的情况，而dom2级的事件绑定，把阻止默认动作这个功能的实现，让你自己去完成。
比如这样阻止：
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
所以，上面的情况才会出现一种没有阻止默认的动作，而一种却阻止了。
在2楼基础上，把代码更改一下：
window.onload=function(){
var a=document.getElementsByTagName("a")[0];
addEvent(a,'click',function(e){
e = e
------解决方案--------------------
window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
})
var a2=document.getElementsByTagName("a")[1];
a2.onclick=function(){
return false;
}
}
这样的话，两种情况，都不会再跳转页面了。
根本原因还是因为，dom1级，dom2级绑定事件的，下面看看这两种绑定在浏览器下的一些属性：
图片出自于谷歌浏览器的调试工具：
第一张图是dom2级绑定的，就是那个addEvent绑定的方法，注意红框的部分，这个事件不是标签的属性。
第二张图是dom1级绑定的，.onclick方法，红框部分显示，它是dom元素的一个属性。
这应该就是一个本质的区别吧，dom元素本身就携带的了onclick的属性，dom1级的事件绑定方法，就是把触发的函数，放到这个属性上，因为这是自带属性，它本身就有一些默认的，浏览器写好的处理功能，比如：对于有默认动作的标签，在返回false的时候，取消它的默认动作。
说的有点多，逻辑结构也有点乱。
之前还真是没有细想过这个事情，拖楼主福了啊。。。