js 函数 常用事件 document事件 window对象

2021-07-07 22:09

阅读:565

标签:tin   onblur事件   elements   over   定时器   tag   click   opener   标签   

js入口函数 window.onload=function(){

}

函数

定义 有一定功能代码体的集合。函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

基本格式  function functionname(){执行代码

}

分类

基础函数

  技术分享图片

参数函数:

  fanction sum(num1,num2){
           sum= num1+num2;
alert(sum); } sum(1,2); //调用函数 输出3;

带有返回值的函数:

fanction   bb(b,a){                                   求一个b的a次幂
         var s = 1;
         for(var i=1,ibb(2,1);      //调用函数                         输出2;

变量的生命周期
    JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁

变量的作用域:

var  a=1:                         全局变量   a      对全部都起作用
function  b(){  
     alert(a);
}
b();                    输出为1
function  b(){
     var  a=2;             局部变量 a    只对这个function起作用
     alert(a);            
}                      这之前都不显示
alert(a);             输出为   a is not defined
function b(){
         var a=1;            闭包:是指内部函数可以使用外部函数的变量
        alert(a);               输出为1
       function bb(){
         sum= a+1;              这里变量a=1
        alert(sum);            输出为2
        }
          
}   

js的常用事件:

一、给元素添加事件的三种方式:

1、在元素内部添加事件:

onclick事件:点击事件


function danji(){
        alert("我是单击事件");
    }

效果如下:

技术分享图片

2、ondbclick事件: 双击事件


function shuangji(){
        alert("我是双击事件");
    }

效果如下:

技术分享图片

3、onchange事件
    当内容改变时触发。可用于文本框、列表框等对象,该事件一般用于响应用户修改内容带来的其他改变操作。

说明:当用户向一个文本框中输入文本时,不会触发onchange事件,只有用户输入结束后,单击文本框以外的区域,使文本框失去焦点时才触发该事件,如果是下拉框,则选择结束后即触发。

 


function change(){
        alert("我是改变事件");                  
    }

效果如下:

技术分享图片技术分享图片

 

 

技术分享图片

 

 4、onblur事件和onfocus事件
    onblur事件,当前元素失去焦点时触发该事件。


function aa(){
        alert("我是失去焦点事件");
    }

效果如下:

技术分享图片技术分享图片技术分享图片

 

 

对应的是onfocus事件:得到焦点事件

 


function bb(){
        alert("我是获得焦点事件");
    }

效果如下:

技术分享图片技术分享图片

 

 5、鼠标相关事件

     
鼠标移上
鼠标移动
鼠标离开
鼠标点击摁下
鼠标点击移开
  function down(){
        alert("我是鼠标摁住事件");
    }
    function up(){
        alert("我是鼠标摁住之后离开事件");
    }
    function move(){
        alert("我是鼠标移动事件");
    }
    function over(){
        alert("我是鼠标移上事件");
    }
    function out(){
        alert("我是鼠标离开事件");
    }

效果如下:

  onmousemove
        鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,只要鼠标动一次就触发一次事件。
    onmouseout
        鼠标离开某对象范围时,触发事件调用函数。
    onmouseover
        鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,无论怎样移动都只触发一次函数。
    onmouseup
        当鼠标松开时触发事件
    onmousedown
        当鼠标按下键时触发事件

 二、通过循环给多个元素添加样式:

        
111
222
333
444


评论


亲,登录后才可以留言!