JS的DOM Event事件

一、事件类型汇总

 

onclick               点击

ondblclick           双击

 

onfocus        当元素获得焦点（例如，输入框中点入鼠标）

onblur          元素失去焦点（例如，离开输入框时）

 

onchange     域的内容被改变（通常用于表单元素,当元素内容被改变时触发、三级联动）

 

onkeydown   键盘按键被按下（例如，当用户在最后一个输入框按下回车按键时，表单提交）

onkeypress   键盘按键被按下并松开

onkeyup        键盘按键被松开

 

onload         页面或图像完成加载

 

onmousedown  鼠标按钮被按下

onmousemove  鼠标被移动

onmouseout      鼠标从某元素离开

onmouseover    鼠标移到某元素之上

onmouseleave   鼠标从元素离开

 

onselect          文本框中的文本被选中时发生。

onsubmit         只能绑定给form元素使用，ele_form.onsubmit，表单提交时触发，在发送数据前触发（可用来验证用户输入是否正确），return false阻止默认事件的发生

 

二、两种绑定方式 与onclick

 

1、在标签内绑定事件（不推荐用）

#把触发放在标签内，调用要触发的函数

<div id="d1" onclick="foo(this)">aaa</div>  
//this  指代当前所在的标签，在全局都生效，且绑定在不同标签上的事件都有不同的this
(虽然都叫this，但是在哪个标签里用，就指代哪个标签)
 
<script>
        function foo(self){                      //形参不能是this
                alert(self.innerHTML);
        }
</script>

 

2、通过查找标签，为标签绑定事件（推荐用）

把绑定事件的代码全部写在JS里，通过匿名函数和this 来绑定

 

标签对象.on事件=function( event ){.... }

 

event （形参名，随意）是个对象，保存与这次触发事件相关的具体信息，比如事件发生时的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

event.target    触发事件的标签对象

event.clientX   触发时鼠标位置

event.clientY

event.keyCode  按键触发时对应按键的ASCII码

event.stopPropagation();    阻止事件向外侧传播

 

//需求：为每个标签都绑定事件，在点击时弹出text内容
<ul>
        <li class="item">111</li>
        <li class="item">222</li>
        <li class="item">333</li>
</ul>
 
<script>
        var ele_arr=document.getElementsByClassName("item");    
        for(var i=0;i<ele_arr.length;i++){
                ele_arr[i].onclick=function () {        //匿名函数
                        alert(this.innerText)
                }
        }
</script>
 
//for  循环里，通过匿名函数，把功能绑定到每个标签上，
其中的this不能用ele_arr[i]  代替，因为：
在JS代码加载过程中，只是绑定了事件，并没有实际执行事件
如果用ele_arr[i]，加载完之后，i 变为了4，当点击触发任意一个事件时，都要弹出ele_arr[4]的text内容，但实际上并没有ele_arr[4]
 

 

三、事件委派

 

事件冒泡：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象

为父标签添加监听，这样，即使子标签是后添加的，也能被触发事件

 

父标签.addEventListener("事件名",function (event) {     

        //只写事件名，不用写on，例如click

        event.target       //触发事件的标签对象，就像this一样，谁触发就是谁

} );

注意：父标签中可能有许多字标签，要注意用 if 区分哪些需要执行哪种事件

 

四、事件传播

js事件是向上传播的，

假如四层块 每层都绑定onclick事件，当触发第四层的事件时，会依次向上触发事件

可以在子标签中用event.stopPropagation()  来阻止事件向外侧传播

 

例如：

<div id="abc_1" >
        <div id="abc_2" ></div>
</div>
 
<script>
    document.getElementById("abc_1").onclick=function(){
        alert("abc_1");
    }
 
    document.getElementById("abc_2").onclick=function(event){
        alert("abc_2")；
        event.stopPropagation();    //阻止事件向外侧传播
    }
}
 
</script>

 

事件具体介绍

五、onfocus、onblur 元素焦点

 

<input type="text" id="inp1" value="请输入">
<script>
        var ele_inp=document.getElementById("inp1");
        ele_inp.onfocus=function (){        //光标点入文本框时，清除"请输入"
            this.value="";                                 
        }
 
        ele_inp.onblur=function (){
            if(!this.value.trim()){            //如果没输入光标就离开了，则恢复
                this.value="请输入"            
            }
        }
</script>

 

六、onchange 域的内容被改变

 

例如：二级联动的菜单，选择省份、城市
<select name="pro" id="s1">
    <option value="">请选择省份</option>
    <option value="1">河南</option>
    <option value="2">湖南</option>
    <option value="3">海南</option>
</select>
<select name="city" id="s2">
    <option value="">请选择城市</option>
</select>
 
<script>
    var data={"1":["洛阳","信阳","开封"],"2":["长沙","张家界"],"3":["三亚","海口"]};
    var ele_s1=document.getElementById("s1");
    var ele_s2=document.getElementById("s2");
 
    ele_s1.onchange=function(){
        var citys=data[this.value];
        ele_s2.options.length=1;        //只保留s2的第1个option标签
        for (var i=0;i<citys.length;i++){
            var ele_option=document.createElement("option");
            ele_option.innerHTML=citys[i];
            ele_s2.appendChild(ele_option)    
        }
    }
</script>

 
七、onsubmit 域的内容被改变
 
提交前触发，验证输入内容，不符合则不提交数据
 <form action="" id="form">
    <p><input type="text" id="inputext"><span class="error"></span></p>
    <input type="submit">
</form>                     
 
<script>
    var ele_form=document.getElementById("form");
    var ele_inp=document.getElementById("inputext");
    var ele_err=document.getElementsByClassName("error")[0];
    function foo(){
        ele_err.innerText="";
    }
 
    ele_form.onsubmit=function(){
        var inp_value=ele_inp.value;
        if (inp_value.length>5 && inp_value.length<12){
            //满足条件，执行默认事件    
        }
        else{
            ele_err.innerText="用户名的长度有问题";
            setTimeout(foo,3000);       //设置3秒消失
            return false        //阻止默认事件（不提交数据）
        }
     }
</script>

 

八、onkeydown  按键被按下

 

回车被按下时
<input type="text" id="d1">
<script>
    var ele=document.getElementById("d1");
    ele.onkeydown=function (event){         
        if(event.keyCode==13){            //13是回车的ASCII码
            alert(123)
        }
    }
</script>

 

九、onmouseover 、onmouseout、onmouseleave、onmousemove

 

关于onmouseout  和 onmouseleave 的区别：

onmouseout  ：鼠标离开被选标签或其子元素，都会触发事件

onmouseleave ：只有鼠标离开被选元素时，才会触发事件

 

鼠标的位置
<style>
    .c1{
        width:300px;
        height:300px;
        background-color:#2459a2;
    }
</style>
 
<body>
<div class="c1"></div>
 
<script>
    var ele=document.getElementsByClassName("c1")[0];
    ele.onmousemove=function (event){
        var x=event.clientX;
        var y=event.clientY;
        console.log(x,y)    
    }
</script>
 
</body>