zoukankan      html  css  js  c++  java
  • JavaScript 事件(基础)

    一、事件

      事件:触发-响应机制。

    二、事件三要素

      1、事件源:触发事件的元素

      2、事件名称:发送了什么方式的事件

      3、事件处理程序:事件触发后要执行的代码(函数形式)

    三、事件的使用方式

      1、获取元素

      2、给元素注册事件

      3、编写事件内容

      Demo:

    1 var box = document.getElementById('box');
    2 box.onclick = function() {              // 匿名函数
    3   console.log('代码会在box被点击后执行');  
    4 };

      注意:可以直接在触发事件的时候给事件一个匿名函数,也可以先声明一个函数,然后赋值给事件。

      Demo:

    1 var box = document.getElementById('box');
    2 box.onclick = box_click;      // 这里函数后面不可以加小括号(),加上小括号就成了调用函数,调用函数是系统来完成的,这里只是给事件赋值
    3 // 声明函数
    4 function btn_click() {
    5     alert('hello javascript');
    6 }
    7  

    四、事件注册

       事件的注册(绑定):就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。

      1、静态注册事件

        通过 html 标签的事件属性直接赋于事件响应后的代码, 这种方式我们叫静态注册。

      2、动态注册事件

        是指先通过 js 代码得到标签的 dom 对象, 然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码, 叫动态注册。

           动态注册基本步骤:

          ① 获取标签对象;

          ② 标签对象.事件名 = function(){} 
        

      Demo:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>Title</title>
     6   <script type="text/javascript">
     7     function onclickFun() {
     8       alert("静态注册 onclick 事件");
     9     } 10     //动态注册 onclick 事件
    11     window.onload = function () {
    12       // 1 获取标签对象
    13       //getElementById 通过 id 属性获取标签对象
    14       var btnObj = document.getElementById("btn01");
    15       // alert( btnObj );
    16       // 2 通过标签对象.事件名 = function(){}
    17       btnObj.onclick = function () {
    18         alert("动态注册的 onclick 事件");
    19       }
    20   }</script>
    21 </head>
    22 <body>
    23   <!--静态注册 onClick 事件-->
    24   <button onclick="onclickFun();">按钮 1</button>
    25   <button id="btn01">按钮 2</button>
    26 </body>
    27 </html
  • 相关阅读:
    haproxy 安装与配置
    Rancher使用入门
    Docker中配置国内镜像
    【转】【VC】VC程序运行时间测试函数
    【转】PNG图像文件格式
    【转】BMP图像文件格式
    【转】OPenGL MFC绘图
    OPenGL 库文件的添加
    【转】MFC WM_CTLCOLOR 消息
    【转】C#获取电脑客户端IP地址及当前用户名
  • 原文地址:https://www.cnblogs.com/niujifei/p/11406910.html
Copyright © 2011-2022 走看看