zoukankan      html  css  js  c++  java
  • js对象 事件

     对象   

      创建  var   myObject = {};/* 声明对象字面变量*/ 添加值myObject.name="Jener";myObject.age=25;

      代码格式  var person = {name : "zhangsan",age : 25,say :function(){alert("说汉语");} }

      访问   点语法、person.name; person.say();

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

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

    基本结构  function functionname(){执行代码}  function functionname(参数){执行代码}

    带有返回值的函数     /*function sum(a,b){return a+b;}sum(10,5);//程序执行完这句话,sum(10,5)变成了15;var c=sum(10,5);alert(c);*///c是15

    变量的生命周期    JavaScript 变量生命周期在它声明时初始化。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁

    闭包:是指内部函数可以使用外部函数的变量

    js事件

      onclick事件  点击事件    ondbclick事件  双击事件 

      onload事件  页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中

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

              说明:当用户向一个文本框中输入文本时,不会触发onchange事件,只有用户输入结束后,单击文本框以外的区域,

              使文本框失去焦点时才触发该事件,如果是下拉框,则选择结束后即触发。

      onblur事件和onfocus事件  onblur事件,当前元素失去焦点时触发该事件。对应的是onfocus事件:得到焦点事件

      onscroll事件  窗口滚动事件:当页面滚动时调用函数。此事件写在方法的外面,且函数名后面不加括号,例如window.onscroll=move 

             方式  function move() {alert("页面滚动时调用");}window.onscroll = move;

      鼠标相关事件      onmousemove  鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,只要鼠标动一次就触发一次事件

                                     onmouseout  鼠标离开某对象范围时,触发事件调用函数。

                    onmousemove 事件在鼠标移动到 div 元素上时触发。

                    mouseleave 事件只在鼠标指针移出 div 元素时触发。

                    onmouseout 事件在鼠标指针移出 div 元素及离开子元素(p 和 span)时触发。

            onmouseover 鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域中,无论怎样移动都只触发一次函数。

            onmouseup 当鼠标松开时触发事件

            onmousedown 当鼠标按下键时触发事件

    通过循环给多个元素添加事件

    <body>
    		<div class="one">111</div>
    		<div class="one">222</div>
    		<div class="one">333</div>
    		<div class="one">444</div>
    	</body>
    </html>
    <script type="text/javascript">
    	var one  = document.getElementsByClassName("one");
    	for(var i = 0;i<one.length;i++){
    		one[i].onclick = function(){
    			alert(this.innerHTML);
    		}
    	}
    </script>
    

     通过addEventListener() 方法 监听事件函数

    无参数
    <button id="myBtn">点我</button>
    <script>
    document.getElementById("myBtn").addEventListener("click", myFunction);
    function myFunction() {
        alert ("Hello World!");
    }
    </script>
    有参数
    <button id="myBtn">点我</button>
    <p id="demo"></p>
    <script>
    var p1 = 5;
    var p2 = 7;
    document.getElementById("myBtn").addEventListener("click", function() {
        myFunction(p1, p2);
    });
    function myFunction(a, b) {
        var result = a * b;
        document.getElementById("demo").innerHTML = result;
    }
    </script>
    

      removeEventListener() 方法

    <body>
    
    <div id="myDIV"> div 元素添加了 onmousemove 事件句柄,鼠标在桔红色的框内移动时会显示随机数。
      <p>点击按钮移除 DIV 的事件句柄。</p>
      <button onclick="removeHandler()" id="myBtn">点我</button>
    </div>
    <p id="demo"></p>
    <script>
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);
    function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
    }
    function removeHandler() {
        document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
    }
    </script>
    

      

  • 相关阅读:
    前后端微服务联调
    Rancher搭建ES容器集群
    Rancher解决磁盘占满异常
    Rancher搭建Redis主从集群
    Rancher搭建NFS持久存储
    Linux普通用户管理
    Rancher部署mysql8
    Delegate背后的秘密
    Java——反射
    redis 操作命令
  • 原文地址:https://www.cnblogs.com/zqy6666/p/11871328.html
Copyright © 2011-2022 走看看