Làm thế nào để làm cho onclickmà không jQuery, không có mã thêm dưới dạng HTML, chẳng hạn như:OnClick mà không jQuery
<a href="#" onclick="tramtramtram">
Chỉ cần sử dụng một tập tin js extrnal?
<script type="text/javascript" src="functions.js"></script>
tôi cần phải thay thế mã này:
$("a.scroll-up, a.scroll-down").click(function(){
SNavigate($(this).attr("href").substr(7));return false;
});
Khi neo này sẽ chỉ chứa một chức năng để xử lý trên nhấp chuột, hơn bạn có thể chỉ cần viết
document.getElementById('anchorID').onclick=function(){/* some code */}
nếu không, bạn phải sử dụng DOM phương pháp 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
cũng nhớ để gọi ở trên mã khi tất cả các phần tử được tải (ví dụ: trên window.onload)
- chỉnh sửa
Tôi thấy bạn đã thêm một số chi tiết. Nếu bạn muốn thay thế mã dưới đây
$("a.scroll-up, a.scroll-down").click(function(){SNavigate($(this).attr("href").substr(7));return false;});
với sth mà không sử dụng jQuery, điều này sẽ làm công việc
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});
}
}
});
<script>
function tramtramtram(){
alert("tram it!");
}
</script>
<a href="#" onclick="tramtramtram()">tramtram</a>
thế nào về điều này:
document.getElementById("lady").onclick = function() {alert('onclick');};
có vẻ tốt. Bạn có thể thay thế chức năng đã cho bằng js thông thường mà không sử dụng jquery không? – Mike
Chỉ cần ghi đè lên thuộc tính onlick. Nếu bạn đang sử dụng addEventListener, bạn cũng sẽ phải theo dõi những gì bạn đã thêm vào để loại bỏ nó sau này (điều này chắc chắn là những gì JQuery sử dụng chính nó). – Anonymous
@Mike: đó là javascript "bình thường". Ngoại trừ nó được các yếu tố của id thay vì theo lớp như mã của bạn. – bchhun
Chỉ cần sử dụng các thuộc tính onclick.
<a href="#" onclick="functionName(someParam)">
Hoặc để làm điều đó từ javascript,
document.getElementById("anchorID").onclick = function(){
some code
};
var el = document.getElementById ('quý bà'); el.addEventListener ("click", tramtramtram, false);
Bạn cần sử dụng getElementById để thêm trình xử lý onclick. Tuy nhiên bạn cần phải bắt đầu mã của bạn ở đâu đó. Nếu không có jQuery, bạn chỉ có thể sử dụng trình xử lý tải trọng trên cơ thể:
<body onload="myinitfunction()">
myinitfunction có thể nằm trong tệp js bên ngoài.
onload - chất thải, phải không? – Mike
Với không có mã phụ trong html, đây là một cách để làm điều đó :
<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>
bạn có thể thay thế một hàm đã cho bằng js thông thường mà không cần sử dụng jquery không? – Mike
Đó là * JavaScript thông thường, không sử dụng jQuery. – RichieHindle
có một mã mới trong câu hỏi – Mike
W3C gợi ý:
element.addEventListener('click',doSomething,false)
Microsoft sử dụng:
element.attachEvent('onclick',doSomething)
Bạn có thể thực hiện một số tính năng phát hiện và xác định cuộc gọi để sử dụng.
bạn có thể xóa sự kiện sau này không? Điều gì xảy ra nếu nó là một sự kiện không tên, giống như một khai báo hàm. foo.addEventListener ('onclick', function() {alert ('bar')); hoặc có được đính kèm không? –
(Tôi chỉ tò mò, btw, tôi không cần mã này ... chỉ đọc bài đăng này và câu hỏi đã xảy ra với tôi). –
Bạn loại bỏ sự kiện thông qua element.removeEventListener (WC3) hoặc element.detachEvent (MS). Thật không may, điều này không làm việc cho các chức năng ẩn danh. Tôi sẽ ở lại với các chức năng được đặt tên cho xử lý sự kiện. –
Execute kịch bản này khi tải tài liệu (thay thế báo động với các công cụ của bạn):
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');};
}
}
Có lẽ đó là những gì bạn đang hỏi về ...
goood, cảm ơn. Đó là những gì tôi cần. – Mike
Bạn cũng có thể tìm thấy giải pháp Dean Edwards thú vị - http://dean.edwards.name/weblog/2005/10/add-event/ –
@Russ Cam: giải pháp Dean Edwards có một bất lợi, những gì Dean mô tả sau: http://dean.edwards.name/weblog/ – Rafael