js的两种写法为什么第一种写法无效?

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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function addEvent(obj,type,fun){
if(obj.addEventListener){
obj.addEventListener(type,fun,false);
}else{
obj[type+fun]=fun;
obj['on'+type+fun]=function(){obj[type+fun](window.event)};
obj.attachEvent('on'+type,obj['on'+type+fun]);
}
}
window.onload=function(){
var a=document.getElementsByTagName("a")[0];
addEvent(a,'click',function(){
alert(this.href);
})
var a2=document.getElementsByTagName("a")[1];
a2.onclick=function(){
return false;
}}
</script>
</head><body>
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.baidu.com">baidu2</a>
</body>
</html>
你的addEventListener用法貌似不对
不能跳转时因为你return false了

我是个新手,我是想知道这种写法为什么就无效了呢,一楼的大哥回复说没加obj,这是一个失误.但我主要的疑问是两种调用职数的结果却相反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];     //2行
  addEvent(link, 'click', function(){                  //3行
    return false;
  });
});请问这行代码return false无效,点击后也能进入百度的原因是不是因为第3行的link不被识别所致啊?

虽然我不懂，但是从代码理解addEvent(window, 'load', function(){窗体加载中，而不是文档加载完成。文档没有加载完成，就不能获取DOM对象了所以这个就无效 var link = document.getElementsByTagName('a')[0]; 百度搜索 jquery $(document).ready() 与window.onload的区别其实我Js很弱。。路过...

有，没他快。<!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>

一个是属性，onclick
一个是方法，addEventListener。这样看fireEvent寻找的顺序了。

我觉得吧，其实就是两种绑定的区别。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的时候，取消它的默认动作。说的有点多，逻辑结构也有点乱。
之前还真是没有细想过这个事情，拖楼主福了啊

首先，这个关系到触发函数的问题。
我一开始以为是dispatchEvent，不过改来该去都该不成功。算了，现在就认为是dispatchEvent，
对dispatchEvent函数，应该是这些代码：
var items=[fn1,fn2,fn3];
var i=0;
for(;items[i];i++){
if(items[i].call(null) ==false){
break;
}
}对于fn1,fn2,fn3是按什么顺序：正在研究。

addEvent(window, 'load', function(){
  var link = document.getElementsByTagName('a')[0];
  addEvent(link, 'click', function(){
    return false;
  });这里点击之后点击的效果还是有的,因为dom2级绑定取消默认操作不是return false;
return false 只是当前函数退出而已.

就是在谷歌的浏览器中，调试工具选择Elements时，右侧有一个Event Listeners的地方显示的。首先你得先选择你要查看的标签，比如这里我就是先选择到对应的A标签，然后再去右侧看他的事件监听，看这个标签上面绑定了什么事件。然后勇截图工具截出来。

谢谢了，找到了。看来那个判定是分2路的，还要依据isAttribute。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
</script>
</head>
<body><a href='5.html' id='g'>5555</a>
<input id='w' type='text'><div id='vg'>ggg</div><script>
function $(id){
return document.getElementById(id);
}function $g(){
alert('1');
}
function $gg(){
alert('2');
return false;
}
function $ggg(){
alert('3')
}$('g').onclick = $g;
$('g').addEventListener('click',$gg);
$('g').addEventListener('click',$ggg);</script>
</body>
</html>

哈哈，好，我也悟到了，<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
</script>
</head>
<body><a href='5.html' id='g'>5555</a>
<input id='w' type='text'><div id='vg'>ggg</div><script>
function $(id){
return document.getElementById(id);
}function $g(){
alert('1');
}
function $gg(){
alert('2');
return false;
}
function $ggg(){
alert('3')
}
$('g').addEventListener('click',$gg);
$('g').onclick = $g;$('g').addEventListener('click',$ggg);</script>
</body>
</html>

调试易

js的两种写法为什么第一种写法无效?

解决方案 »