没有jQuery的OnClick
如何在没有 jQuery的情况下进行onclick
而不需要额外的HTML代码,比如:
<a href="#" onclick="tramtramtram">
只是使用外部的js文件?
<script type="text/javascript" src="functions.js"></script>
我需要replace这个代码:
$("a.scroll-up, a.scroll-down").click(function(){ SNavigate($(this).attr("href").substr(7));return false; });
当这个锚点只包含一个函数来处理点击时,你可以写出来
document.getElementById('anchorID').onclick=function(){/* some code */}
否则,你必须使用DOM方法addEventListener
function clickHandler(){ /* some code */ } var anchor = document.getElementById('anchorID'); if(anchor.addEventListener) // DOM method anchor.addEventListener('click', clickHandler, false); else if(anchor.attachEvent) // this is for IE, because it doesn't support addEventListener anchor.attachEvent('onclick', function(){ return clickHandler.apply(anchor, [window.event]}); // this strange part for making the keyword 'this' indicate the clicked anchor
当所有的元素都被加载的时候,还要记得调用上面的代码(比如window.onload)
– 编辑
我看到你添加了一些细节。 如果你想replace下面的代码
$("a.scroll-up, a.scroll-down").click(function(){SNavigate($(this).attr("href").substr(7));return false;});
与不使用jQuery的东西,这应该做的工作
function addEvent(obj, type, fn) { if (obj.addEventListener) obj.addEventListener(type, fn, false); else if (obj.attachEvent) obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);}); } addEvent(window, 'load', function(){ for(var i=0, a=document.anchors, l=a.length; i<l;++i){ if(a[i].className == 'scroll-up' || a[i].className == 'scroll-down'){ addEvent(a[i], 'click', function(e){ SNavigate(this.href.substr(7)); e.returnValue=false; if(e.preventDefault)e.preventDefault();return false}); } } });
这个怎么样 :
document.getElementById("lady").onclick = function () {alert('onclick');};
W3Cbuild议:
element.addEventListener('click',doSomething,false)
微软使用:
element.attachEvent('onclick',doSomething)
您可以执行一些function检测并确定使用哪个呼叫。
<script> function tramtramtram(){ alert("tram it!"); } </script> <a href="#" onclick="tramtramtram()">tramtram</a>
在html中没有额外的代码,这是一个办法:
<html><body><head><script> // This script could be in an external JS file function my_handler(elt) { alert("Yay!"); return false; } function setup() { document.getElementById('lady').onclick = my_handler; } window.onload = setup; </script></head> <body><a href='#' id='lady'>Test</a></body> </html>
var el = document.getElementById('lady'); el.addEventListener(“click”,tramtramtram,false);
加载文档时执行此脚本(用您的东西replace警报):
var rgLinks = document.getElementsByTagName("A"); for (var x=0; x<rgLinks.length; x++) { el = rgLinks[x]; if (el.className == 'scroll-down' || el.className == 'scroll-down') { el.onclick = function () {alert('onclick');}; } }
也许这就是你在问什么…
只需使用onclick属性即可。
<a href="#" onclick="functionName(someParam)">
或从JavaScript做到这一点,
document.getElementById("anchorID").onclick = function(){ some code };
您需要使用getElementById来添加onclick处理程序。 但是你需要在某处启动你的代码。 没有jQuery,你只能使用body加载处理程序:
<body onload="myinitfunction()">
myinitfunction可以在一个外部的js文件中。