如需在用户点击某个元素时执行代码,请向一个HTML事件属性添加JavaScript代码 OnClick=JavaScriptcript
对事件做出反应
HTML事件属性
使用HTML DOM来分配事件
Onload/Onunload事件
Onchange事件
Onmouseover/Onmouseout事件
<body onload="checkCookies()"> <p onclick="this.innerHTML='谢谢'">对事件做出反应</p> <p id="d1" onclick="changetext()">HTML事件属性</p> <p id="d2">使用HTML DOM来分配事件</p> 请输入英文字符:<input type="text" id="fname" onchange="myfunction()" /> <p>当你离开输入字段时,会触发将输入文本转换为大写的函数。</p> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: blue;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div> <script> function changetext() { document.getElementById("d1").innerHTML = Date(); } document.getElementById("d2").onclick = function () { displaytext(this) }; function displaytext(obj) { obj.innerHTML = "成功"; } //onload 和 onunload 事件会在用户进入或离开页面时被触发。 function checkCookies() { if(navigator.cookieEnabled==true) { alert("已启用 cookie"); } else { alert("未启用cookie"); } } //onchange事件常结合对输入字段的验证来使用 function myfunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } //onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素的上方或移出元素时触发函数 function mOver(obj) { obj.innerHTML = "谢谢"; } function mOut(obj) { obj.innerHTML = "把鼠标移到上面"; } //onmousedown、onmouseup和onclick function mDown(obj) { obj.style.backgroundColor = "#1ec5e5"; obj.innerHTML = "请释放鼠标按钮"; } function mUp(obj) { obj.style.backgroundColor = "blue"; obj.innerHTML = "请按下鼠标按钮"; } </script> </body>