JS DOM事件
Posted 风追海浪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS DOM事件相关的知识，希望对你有一定的参考价值。
一.DOM事件格式
元素对象.on事件名称 = function(){ // 事件发生时，执行的代码 }
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
eg1: onfocus onblur onmouseover onmouseout
<body>
<form action="" id="from1">
<input type="text" name="username" value="请输入用户名"><span style="font-style: italic"></span>
<p></p>
<input type="text" name="passwd" value="请输入密码">
<p></p>
<input type="submit" value="提交">
</form>
<h1 id="one">点击我领取屠龙宝刀！</h1>
<script>
ele_form = document.getElementById("from1");
ele_form.onsubmit=function(){
console.log(this)
//阻止事件方式1 false表示拦截表单提交 其他放行
return false;
};
ele_form.onsubmit=function(event){
console.log(this)
//阻止事件方式2 event.preventDefault
event.preventDefault();
};
var name_ele = document.getElementsByName("username")[0];
//获得焦点时执行
name_ele.onfocus = function () {
// 函数中name_ele可以用this替代
if (this.value == "请输入用户名") {
//if (name_ele.value == "请输入用户名") {
name_ele.value = "";
ele_span = name_ele.nextElementSibling;
ele_span.innerhtml = "SB";
console.log(ele_span);
}
console.log(name_ele.value);
};
//失去焦点执行
name_ele.onblur = function () {
if (!name_ele.value.trim()) {
name_ele.value = "请输入用户名";
ele_span = name_ele.nextElementSibling;
ele_span.innerHTML = "";
}
console.log(name_ele.value);
};
console.log(name_ele.value);
var btn = document.getElementById("one");
btn.onclick = function () {
alert("我是渣渣辉，是兄弟就来砍我");
};
/* mouseover 鼠标停留的时候 */
btn.onmouseover = function () {
btn.style.color = "red";
};
/* mouseout 鼠标离开的时候 */
btn.onmouseout = function () {
btn.style.color = "blue";
};
</script>
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
思考：onclick＝function(event){};这个方法是谁调用的？
事件传播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert(\'111\');
}
document.getElementById("abc_2").onclick=function(event){
alert(\'222\');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
参考：
https://www.cnblogs.com/chichung/p/9688399.html
https://www.cnblogs.com/yuanchenqi/articles/5980312.html
以上是关于JS DOM事件的主要内容，如果未能解决你的问题，请参考以下文章