onclick ਈਵੈਂਟ
ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ
onclick ਈਵੈਂਟ ਉਸ ਸਮੇਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਇਲੈਕਟ੍ਰੌਨ ਕਲਿੱਕ ਕਰਦਾ ਹੈ。
实例
ਬਟਨ ਕਲਿੱਕ ਕਰਨ ਉੱਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਚਲਾਓ:
<button onclick="myFunction()">ਮੈਨੂੰ ਕਲਿੱਕ ਕਰੋ</button>
ਪੇਜ਼ ਦੇ ਨੀਚੇ ਹੋਰ TIY ਉਦਾਹਰਨ ਹਨ。
ਗਰੰਥਾ
HTML ਵਿੱਚ:
<element onclick="myScript">
ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ:
object.onclick = function(){myScript};
ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ, addEventListener() ਮੱਥਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ:
object.addEventListener("click", myScript);
ਟਿੱਪਣੀ:ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 8 ਜਾਂ ਪੁਰਾਣੇ ਤੋਂ ਮਿਲਣ ਵਾਲੇ ਨਹੀਂ ਹਨ addEventListener() ਮੱਥਾ。
ਤਕਨੀਕੀ ਵੇਰਵਾ
| ਬੁਬਲ ਕਰਨ ਦੀ ਸਮਰਥਨ: | ਸਮਰਥਨ |
|---|---|
| ਰੱਦ ਕਰਨ ਦੀ ਸਮਰਥਨ: | ਸਮਰਥਨ |
| ਈਵੈਂਟ ਪ੍ਰਕਾਰ: | MouseEvent |
| ਸਮਰਥਿਤ HTML ਟੈਗ: | ਸਾਰੇ HTML ਇਲੈਕਟ੍ਰੌਨ, ਮੱਗਰ <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> ਅਤੇ <title> ਨੂੰ ਛੱਡ ਕੇ: |
| DOM ਸੰਸਕਰਣ: | ਲੈਵਲ 2 ਈਵੈਂਟ |
ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ
| ਈਵੈਂਟ | ਚਾਰੋਮ | IE | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪਰਾ |
|---|---|---|---|---|---|
| onclick | ਸਮਰਥਨ | ਸਮਰਥਨ | ਸਮਰਥਨ | ਸਮਰਥਨ | ਸਮਰਥਨ |
ਹੋਰ ਉਦਾਹਰਨ
实例
ਕਲਿੱਕ ਕਰਕੇ <button> ਇਲੈਕਟ੍ਰੌਨ ਨੂੰ ਮੌਜੂਦਾ ਤਾਰੀਖ ਅਤੇ ਸਮਾਂ ਦਿਖਾਓ:
<button onclick="getElementById('demo').innerHTML = Date()">ਮੌਜੂਦਾ ਸਮਾਂ ਕੀ ਹੈ?</button>
实例
单击 <p> 元素将其文本颜色更改为红色：
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
实例
关于如何通过单击来更改 <p> 元素颜色的另一个例子：
<p onclick="myFunction(this, 'red')">Click me to change my text color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
实例
单击按钮将一些文本从输入字复制到另一个输入字：
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>
实例
把 "onclick" 事件分配给 window 对象：
window.onclick = myFunction;
// 如果用户在窗口中单击，则将 <body> 的背景颜色设置为黄色
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
实例
使用 onclick 创建下拉按钮：
// 获取按钮，当用户点击时，执行 myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction 在添加和删除 show 类之间切换，用于隐藏和显示下拉内容 */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
صفحات کا رابطہ
JavaScript کا تعلیم:JavaScript ھائٹس
HTML DOM مرجع دستاویز:ondblclick مہم
HTML DOM مرجع دستاویز:onmousedown مہم
HTML DOM مرجع دستاویز:onmouseup مہم
