JavaScript 基础语法 给节点注册事件

Posted zsbenn

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 基础语法 给节点注册事件相关的知识,希望对你有一定的参考价值。

ps:DOM编程的一些前置知识点

常用事件和注册事件的两种方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS的常用事件</title>
    </head>
    <body>
        <script type="text/javascript">
            /*
                JS中的事件:
                    blur失去焦点    
                    focus获得焦点
                    
                    click鼠标单击
                    dblclick鼠标双击
                    
                    keydown键盘按下
                    keyup键盘弹起
                    
                    mousedown鼠标按下
                    mouseover鼠标经过
                    mousemove鼠标移动
                    mouseout鼠标离开
                    mouseup鼠标弹起
                    
                    reset表单重置
                    submit表单提交
                    
                    change下拉列表选中项改变,或文本框内容改变
                    select文本被选定
                    load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)
                
                任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。
                onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在。)
            */
           // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
           // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
           function sayHello(){
               alert("hello js!");
           }
        </script>
        
        <!--注册事件的第一种方式,直接在标签中使用事件句柄-->
        <!--以下代码的含义是:将sayHello函数注册到按钮上,等待click事件发生之后,该函数被浏览器调用。我们称这个函数为回调函数。-->
        <input type="button" value="hello" onclick="sayHello()"/>
        
        
        <input type="button" value="hello2" id="mybtn" />
        <input type="button" value="hello3" id="mybtn1" />
        <input type="button" value="hello4" id="mybtn2" />
        <script type="text/javascript">
            function doSome(){
                alert("do some!");
            }
            /*
                第二种注册事件的方式,是使用纯JS代码完成事件的注册。
            */
           // 第一步:先获取这个按钮对象(document是全部小写,内置对象,可以直接用,document就代表整个HTML页面)
           var btnObj = document.getElementById("mybtn");
           // 第二步:给按钮对象的onclick属性赋值
           btnObj.onclick = doSome; // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
                                    // 这行代码的含义是,将回调函数doSome注册到click事件上.
           
           var mybtn1 = document.getElementById("mybtn1");
           mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
               alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
           }
           
           document.getElementById("mybtn2").onclick = function(){
               alert("test22222222.........");
           }
        </script>
        
    </body>
</html>

 

JS代码的执行顺序——页面加载完成后给节点注册事件

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS代码的执行顺序</title>
    </head>
    <!-- load事件什么时候发生?页面全部元素加载完毕之后才会发生。-->
    <body onload="ready()">
        
        <script type="text/javascript">
            
            /*
            // 第一步:根据id获取节点对象
            var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
            
            // 第二步:给节点对象绑定事件
            btn.onclick = function(){
                alert("hello js");
            }
            */
           
           function ready(){
               var btn = document.getElementById("btn");
               btn.onclick = function(){
                   alert("hello js");
               }
           }
           
        </script>
        
        <input type="button" value="hello" id="btn" />
        
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS代码的执行顺序</title>
    </head>
    <body>
        
        <script type="text/javascript">
            // 页面加载的过程中,将a函数注册给了load事件
            // 页面加载完毕之后,load事件发生了,此时执行回调函数a
            // 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
            // 当id="btn"的节点发生click事件之后,b函数被调用并执行.
            window.onload = function(){ // 这个回调函数叫做a
                document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
                    alert("hello js..........");
                }
            }
            
        </script>
        
        <input type="button" value="hello" id="btn" />
        
    </body>
</html>

 

设置节点属性

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS代码设置节点的属性</title>
    </head>
    <body>
        
        <script type="text/javascript">
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    var mytext = document.getElementById("mytext");
                    // 一个节点对象中只要有的属性都可以"."
                    mytext.type = "checkbox";
                }
            }
        </script>
        
        <input type="text" id="mytext"/>
        
        <input type="button" value="将文本框修改为复选框" id="btn"/>
        
    </body>
</html>

 

 

捕捉按键(以回车键为例)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS代码捕捉回车键</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload = function(){
                var usernameElt = document.getElementById("username");
                // 回车键的键值是13
                // ESC键的键值是27
                /*
                usernameElt.onkeydown = function(a, b, c){
                    // 获取键值
                    // alert(a); // [object KeyboardEvent]
                    // alert(b);
                    // alert(c);
                }
                */
               /*
               usernameElt.onkeydown = function(event){
                   // 获取键值
                   // 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
                alert(event.keyCode);
               }
               */
              usernameElt.onkeydown = function(event){
                  if(event.keyCode === 13){
                      alert("正在进行验证....");
                  }
              }
              
            }
            
        </script>
        
        <input type="text" id="username"/>
        
    </body>
</html>

 

以上是关于JavaScript 基础语法 给节点注册事件的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript基础语法-DOM,前端小白必知必会

JavaScript DOM 注册事件

JavaScript 之 事件(详解)

JavaScript 高级事件学习案例

webapi

JavaScript 高级事件学习