JavaScript学习6

最新推荐文章于 2024-03-13 16:13:01 发布

你若信

最新推荐文章于 2024-03-13 16:13:01 发布

阅读量366

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44152890/article/details/122656460

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、js常用事件

<!DOCTYPE html>
<html>
    <head>
        <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这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
            */

            //第一种注册时间
            //对于当前程序来说,er函数被称为回调函数(callback函数)
            // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
            function er(){
                alert("hhh");
            }
           
           
            
        </script>
        <input type="button" value="1" onclick="er()"/>
        <input type="button" value="2" id="my"/>
        <input type="button" value="3" id="my2"/>
        <script type="text/javascript">
        //第二种注册事件，在js种完成
            function tt(){
                alert("ii");
            }
            //第一步：先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
            var b = document.getElementById("my");//document.getElementById("")；是固定写法，且my是按钮对象的id
            //第二步：给按钮的属性赋值
            b.onclick=tt;// 注意:千万别加小括号.
                         // 这行代码的含义是,将回调函数tt注册到click事件上.
        
        //第三种注册事件
            document.getElementById("my2").onclick=function(){// 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
                alert("uuu");// 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
            }
        </script>
    </body>
</html>

2、JavaScript的运行顺序
（1）错误的

<!DOCTYPE html>
<html>
    <head>
        <title>js的运行顺序</title>
    </head>
    <body>
        <script type="text/javascript">
            document.getElementById("uu").onclick=function(){//页面没有加载完按钮，无法将函数注册到事件上
                alert("qwe"); // 返回null(因为代码执行到此处的时候id="uu"的元素还没有加载到内存)
            }
        </script>
        <input type="button" value="12" id="uu"/>
    </body>
</html>

（2）正确写法1

<!DOCTYPE html>
<html>
    <head>
        <title>js的运行顺序</title>
    </head>
    <body onload="b()">
        <script type="text/javascript">
            function b(){
            document.getElementById("uu").onclick=function(){
                alert("qwe"); 
            }
        }
        </script>
        <input type="button" value="12" id="uu"/>
    </body>
</html>

正确写法2

<!DOCTYPE html>
<html>
    <head>
        <title>js的运行顺序</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById("uu").onclick=function(){
                    alert("qwe"); 
                }
            }
        </script>
        <input type="button" value="12" id="uu"/>
    </body>
</html>