JS体系中DOM事件的含义

DOM中的事件01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <div id="one" >
                            div
                    </div>

</body>
</html>

<script type="text/javascript">
                    //事件的本质:div要被看成是一个对象,就可以添加一个属性了 。给对应的元素对象添加一个function类型的属性。
                                //这个function会在对应的时间被
调用。
                                //调用的时间跟属性的名称有关。
                                //1.获得div

                                      var one=document.getElementById("one");
                                //2.为div新增一个属性
                                        //在js中为一个对象属性非常简单,连(在赋值之前)声明都不用声明。就好像数组里面数组长度声明为5,但是可以为第九个元素赋初值一样。
                                 one.οnclick=function( ){
                                        //对象添加了一个onclick属性,onclick属性是一个函数;当点击它的时候被调用
                                            alert("aaa");
                                        } 
                    //还可以用其他的事件被支持:HTML DOM Event中含有被支持的事件的属性名称
   </script>

DOM中的事件02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <div id="one"  οndblclick="alert('bbb')">
                    <!-- 直接填写js代码,比较快捷的方式,相当于填写函数体中的代码-->
                                    这是div
                    </div>

              </body>
</html>

<script type="text/javascript"></script>

//以上是为属性添加两种属性的方式

//被支持单位常用属性有哪些 :onblur   onfocus这两种最常用的方式就是输入框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <input type="text"   id="two"  value=请输入用户名/邮箱/手机号/> 
 </body>
</html>

<script type="text/javascript">
                    //被支持单位常用属性有哪些 :onblur   onfocus这两种最常用的方式就是输入框
                    var two=document.getElementById("two");//获得Input对象
                    two.οnfοcus=function(){
                        alert('onfocus');
                    }
                    two.οnblur=function(){
                        alert('onblur');
                    }
                    //经常用在注册界面规则的校验;登录的时候输入框
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------

//被支持单位常用属性有哪些 :onchange 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <input type="text"   id="two"  > 
 </body>
</html>

<script type="text/javascript">
                    var two=document.getElementById("two");//获得Input对象
                    two.οnchange=function(){
                        alert('onchange');
                    }

</script>

-------------------------------------------------------------------------------------------------------------------------------------------------

另外onchange最长用的是在select中

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>DOM中的事件01</title>
</head>
<body>
                    <select id="three">
                                    <option>安徽</option>
                                    <option>江苏</option>
                                    <option>山东</option>
                    </select>

 </body>
</html>

<script type="text/javascript">
                    var three=document.getElementById("two");//获得Input对象
                    three.οnchange=function(){
                        alert('onchange');

                    }
</script>

-------------------------------------------------------------------------------------------------------------------------------------------------

//常用的onkeydown   onkeypress  onkeyup属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head> 
                        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
                         <title>DOM中的事件</title>
        </head>
                        <body>
                                        <input type="text"   id="two" /><br/>
                        </body>
</html>

                       <script type="text/javascript">
                                            //onkeydown   onkeypress  onkeyup
                                            var two =  document.getElementById("two");
                                            two.οnkeydοwn=function (){
                                                alert("onkeydown");
                                                }

                                            //函数的调用不看参数,只看函数的名称有没有被调用;调用成功却没有接收,加一个参数去接收
                                            //event中的属性和方法

                        </script>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
            <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                        <title>DOM中的事件</title>
            </head>
            <body>
                        <input type="text" id="two" /><br/>
            </body>
</html>

            <script type="text/javascript">
                var two =  document.getElementById("two");
                    two.οnkeydοwn=function (event){
                        if(event.keyCode == 13){
                            alert("表单提交啦!");
                        }
                    }

            </script>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Insert title here</title>
            <script type="text/javascript">
                //被支持的常用事件有哪些?
                // onload :表示加载完毕会触发它
                function fun1(){
                    var two =document.getElementById("two");
                    alert(two);
                }

                </script>
</head>
            <body οnlοad="fun1();">
                <input type="text" id="two" /><br/>
            </body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

/*被支持的常用事件有哪些
                           onmousedown 鼠标按钮被按下  4  1   9  Yes
                            onmouseup    鼠标按钮被松开   4   1   9   Yes
                            onmousemove   鼠标被移动      3   1   9    Yes
                            onmouseout       鼠标从某个元素上离开      4  1   9  Yes
                            onmouseover     鼠标移到某个元素之上       3  1   9   Yes
                        */

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Insert title here</title>
                <style type="text/css">
                div {
                    width:300px;
                    height:300px;
                    border: 1px solid red;
                }
                </style>
            <script type="text/javascript">
                //被支持的常用事件有哪些?
                /* onmousedown 鼠标按钮被按下。 4 1 9 Yes 
                    //onmouseup 鼠标按键被松开。 4 1 9 Yes  
                    onmouseover 鼠标移到某元素之上。 3 1 9 Yes 
                    onmouseout 鼠标从某元素移开。 4 1 9 Yes 
                    onmousemove 当鼠标悬停时,连续被触发.。 3 1 9 Yes 
                    */
              function fun1(){
                    var two =document.getElementById("two");
                    two.οnmοusedοwn=function (event){
                        //鼠标按键按下时触发
                        //获得按下的是哪个键
                        alert(event.button);
                    }
                /*     two.οnmοuseup=function (){
                        alert("onmouseup");
                    } */
                    /* two.οnmοuseοver=function (){
                        alert("onmouseover");
                    }
                    two.οnmοuseοut=function (){
                        alert("onmouseout");
                    } */
                    two.οnmοusemοve=function (event){
                        //alert("onmousemove");
                        alert(event.clientX+"=="+event.clientY);
                    } 
                }
            </script>
</head>
            <body οnlοad="fun1();">
                <div id="two">
                </div>
            </body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head> 
                        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
                         <title>DOM中的事件</title>
                         <script type="text/javascript">
                                            //表单提交之前触发
                                            //表单提交的时候要验证,验证结果分为两种一种成功一种失败,那么如何拦截表单提交
                                            //该事件是众多事件中最特殊的一个,该事件可以返回一个Boolean型的值
                                            //提交成功就不拦截他true
                                            //false 则拦截表单提交
                                        //拦截方式2         preventDefault() ==>
                                    function fun1(){
                                                var two=document.getElementById("two");
                                                two.οnsubmit=function(event){
                                                    alert('onsubmit');
                                                    /* return false; */
                                                 event.preventDefault();
                                                }
                                                
                                            }
                                    
                        </script>
        </head>
                        <body οnlοad="fun1();">
                                    <form id="two">
                                            <input type="text" name="name"><br /> 
                                            <input type="submit" value="提交" />
    </form>
</body>
</html>

-------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>Insert title here</title>
                <style type="text/css">
                    div {
                        border: 1px solid red;
                    }
                    #one {
                        width:300px;
                        height:300px;
                    }
                    #two {
                        width:100px;
                        height:100px;
                    }
                </style>

                <script type="text/javascript">
                    /* stopPropagation() 停止事件的继续传播
                        */
                        function fun1(){
                                var one =document.getElementById("one");
                                var two =document.getElementById("two");
                                one.οnclick=function(){
                                    alert("oneoneoneone");
                                }
                                two.οnclick=function(event){
                                    alert("twotwotwotwo");
                                    event.stopPropagation();
                                }
                            }
                        
                </script>

</head>
                <body οnlοad="fun1();">
                            <div id="one" >
                                        <div id="two"></div>
                            </div>
                </body>

</html>

有错误的欢迎大佬指正

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值