您的位置：首页 > Web前端 > JavaScript

JavaScript_HTML DEMO_2_事件

2017-03-24 11:42 435 查看

如需在用户点击某个元素时执行代码，请向一个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;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:
blue;color:#ffffff;width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航