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事件的主要内容,如果未能解决你的问题,请参考以下文章

JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

JS常用代码片段2-值得收藏

JS常用代码片段2-值得收藏

[JS-DOM]事件监听机制

JS DOM事件

js如何清除dom节点上的指定监听事件?