本文内容：

  • 函数
    • 函数的定义方式
    • 函数的调用方式
    • 函数的参数
    • 匿名函数
    • 函数中的this
  • 事件
    • 常见事件
    • 绑定事件

首发日期：2018-05-11

函数：

函数的定义方式：

    • 函数可以有参数，参数为局部变量，无需要var修饰：
    • 函数可以有返回值：

函数的调用方式：除了自执行函数，其他函数都要手动调用

  • 手动调用，利用各种组件【按钮、图片、输入框等等，理论上所有都能触发】来执行【理论上，手动调用的函数都是可以认为是事件触发，所以可以说调用函数就是触发事件】：
    • 通过点击事件来调用函数：
    • 其他【各种事件都可以拿来调用函数】。。。
  • 自执行函数： 
    <!DOCTYPE html>
    
<html>
    
<head>
    
    <meta charset="UTF-8" />
    
    <title>Document</title>
    
    <script>
    
        function f1(){
    
            return document.getElementById('i1').value;
    
        }
    
        function f2(msg){
    
            alert(msg);
    
        }
    
        (function f3(){
    
            alert("hello")
    
        })();
    
    </script>
    
</head>
    
<body>
    
    <input id='i1' type="button" value="点击" onclick="f2(f1())">
    
    <!-- 自执行函数在上面时，如果是堵塞型的函数（比如alert），那么会影响下面的内容出现 -->
    
    123
    
</body>
    
</html>
  • 函数里面也能够调用其他函数。

函数的参数：

  • 函数可以有参数，参数为局部变量，无需要var修饰

  • 当函数有参数时，调用函数需要提供足够的参数。

匿名函数：

  • 如果定义没有函数名的函数，那么这个函数可以称为匿名函数。

  • 匿名函数由于是匿名的，所以只能一次使用【类似局部变量，只在某一段代码中生效以及可使用；但如果你使用了一个变量来存储这个匿名函数，那么就可以在这段代码中多次复用了。】

函数中的this:

  • 函数中的this指示调用当前函数的对象，比如如果是在div标签上触发的事件，那么this就指代当前触发触发事件的div标签。【经常使用this来操作触发事件的标签。】

补充：

  • 还有一种可以动态定义函数的方法。

事件：

常见事件：

  • onclick ：鼠标点击事件

  • ondblclick ：鼠标双击事件
  • onmouseover ：鼠标移到标签上事件
  • onmouseout  ：鼠标移出标签事件
  • onsubmit  ：提交事件【可以用来提交表单】
  • onfocus:标签获得焦点事件
  • onload:页面完成加载事件 【可以直接不使用前缀的绑定（onload="触发函数"），也可以绑定到body中作为属性。】
  • onselect ：文本被选中事件
  • ....其他

绑定事件：理论上标签能绑定各种事件

  • 在标签中使用属性   onXXX=函数名(参数列表)   绑定【onXXX 为事件名称】：
  • 在js代码中使用 对象.事件名  绑定 
  • 在js代码中使用addEventListener(事件名,触发函数[,事件捕获方式])【这里的事件名会比上面的少去on】【这种方式是事件监听机制，可以监听多个事件】 
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

<body>

    <input id='i1' type="button" value="点击" onclick="alert('hello')"><!-- 第一种 -->

    <input id='i2' type="button" value="点击2" >

    <input id='i3' type="button" value="点击3" >

    <script>

        function f2(){

            alert("hello2");

        }

        document.getElementById("i2").onclick=f2;  //第二种

        document.getElementById("i3").addEventListener("click", f2);//第三种

    </script>

</body>

</html>

补充：

  • 还有attachEvent()可以监听事件
  • 注意：上面的后两种绑定事件发生在“标签出现之后”，所以应该把script标签写在body标签里面的最后面。

javascript的函数、事件的更多相关文章

  1. JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数

    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...

  2. JavaScript的函数和事件（转）

    一.默认函数 JavaScript提供了一些默认的函数 编码函数escape():将非字母.数字字符转换成ASCII码 译码函数unescape():将ASCII码转换成字母.数字字符 求值函数eva ...

  3. JavaScript window.onload 事件和 jQuery ready 函数有何不同？

    JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片.音频.视频在内的所有外部资源都完全加载.如 ...

  4. JavaScript中的事件循环机制跟函数柯里化

    一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...

  5. 理解 JavaScript 回调函数并使用

    JavaScript中,函数是一等(first-class)对象:也就是说,函数是 Object 类型并且可以像其他一等对象(String,Array,Number等)一样使用.它们可以"保 ...

  6. javascript event（事件对象）详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  7. javascript工具函数

    第一部分 JavaScript工具函数 转义特殊字符为html实体   HtmlEncode: function(str){ return str.replace(/&/g, '&') ...

  8. javascript篇-----函数作用域，函数作用域链和声明提前

    在一些类似C语言的编程语言中,花括号内的每一段代码都具有各自的作用域,而且变量在声明它们的代码段之外是不可见的(也就是我们不能在代码段外直接访问代码段内声明的变量),我们称之为块级作用域,然而,不同于 ...

  9. javascript 中的事件机制

    1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...

随机推荐

  1. Python快速学习01：Eclipse上配置PyDev & 'Hello World ！'

    前言 系列文章:[传送门] 答应了Vamei,帮他传文章,Python,顺自己学学. 很喜欢这种黏黏的语言 突然发现--我用的GoAgent(谷歌FQ软件),竟然是Python编的. 简介 Pytho ...

  2. myeclipse-common 找不到

    1. 首先打开myeclipse 2. 找到myeclipse的顶部导航栏"myclipse"选项然后打开"Installation Summary..."然后 ...

  3. 手写spring(简易版)

    本文版权归 远方的风lyh和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作,如有错误之处忘不吝批评指正! 理解Spring本质: 相信之前在使用spring的时候大家都配置web.x ...

  4. MongoDB分片详解

    分片是MongoDB的扩展方式,通过分片能够增加更多的机器来用对不断增加的负载和数据,还不影响应用. 1.分片简介    分片是指将数据拆分,将其分散存在不同机器上的过程.有时也叫分区.将数据分散在不 ...

  5. HttpClientHelper

    using Newtonsoft.Json; using System; using System.Collections.Generic; using System.IO; using System ...

  6. Chrome 浏览器最牛插件之一 Vimium

    导航当页: ? 显示help,查询vimium的所有使用方法 h 向左滚动 j 向下滚动 k 向上滚动 l 向右滚动 gg 滚动到顶部 G 滚动到底部 d 向下滚动半页 u 向上滚动半页面 f 显示链 ...

  7. 区块链--Ubuntu上搭建以太坊私有链

    1.搭建私链所需环境 操作系统:ubuntu16.04,开虚拟机的话要至少4G,否则会影响测试挖矿时的速度 软件: geth客户端 Mist和Ethereum Wallet:https://githu ...

  8. ASP.NET资源大全-知识分享

    API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框架,基于.Net 及 Mono 平台.官网 ASP.NET WebAPI:快捷创建 HTTP 服务 ...

  9. VS2015 项目中 添加windows服务

    1. 在项目中添加winows服务 今天刚刚为自己的项目添加了windows服务,以服务的形式运行后台系统,为前端提供接口服务,下面说一下具体怎么为vs项目添加windows服务 2. 添加Windo ...

  10. hihocoder编程练习赛75

    题目1 : 工作城市分配 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 H公司在北京和上海两个城市各有一间办公室.该公司最近新招募了2N名员工,小Hi负责把这2N名员工 ...