zoukankan      html  css  js  c++  java
  • JavaScript事件

    JavaScript事件概念:
    JavaScript事件和数据库的触发器一样,操作对应数据会引发对应触发器的程序执行。JS中的事件就是对用户的某些特定操作做出相应响应的过程,本质上就是浏览器监听用户的行为并根据行为执行绑定的程序;

    事件的绑定:
    在html元素上将触发事件的行为和事件响应的程序关联起来的过程就是事件的绑定;
    1、直接在html代码中绑定事件:(这里是把函数当做一个响应程序再和html的元素进行绑定)
    <a href="javascript:alert('禁止')">jump</a>

    2、绑定单击事件并在事件中添加函数:
    <button type="button" onclick="login("qwer",1234)">登录</button>
    function login(username, password) {
    var name = "qwer";
    var pwd = 1234;
    if (username == name && pwd == password) {
    alert("登录成功")
    } else {
    alert("登录失败")
    }
    }

    3、html元素中设置id,在js中获取该元素并绑定单击事件:
    (此方式必须在加载完button元素后在加载JS文件才能成功,否则将无法获取button元素)
    <button type="button" id="bt">登录</button>

    document.getElementById("bt").onclick = login();

    document.getElementById("bt").onclick = login("qwer",1234);

    function login(username, password) {
    var name = "qwer";
    var pwd = 1234;
    if (username == name && pwd == password) {
    alert("登录成功")
    } else {
    alert("登录失败")
    }
    }

    4、onload事件绑定:(表示当前页面加载完毕后 执行onload绑定的函数)
    方式一:(在body中添加onload并绑定函数)
    <body onload="login('qwer', 1234)">
    function login(username, password) {
    var name = "qwer";
    var pwd = 1234;
    if (username == name && pwd == password) {
    alert("登录成功")
    } else {
    alert("登录失败")
    }
    方式二:(在JS中通过Window.onload设置,此时事件的载体依旧body)
    window.onload = function() {
    document.getElementById("bt").onclick = login("qwer", 1234);
    }

    function login(username, password) {
    var name = "qwer";
    var pwd = 1234;
    if (username == name && pwd == password) {
    alert("登录成功")
    } else {
    alert("登录失败")
    }
    }

    事件冒泡概述:
    即多层嵌套的元素标签,如果子元素被触发则同类型事件的父元素也将逐级触发;

    阻止事件冒泡:添加(event.stopPropagation();)即可;

    除去之间的事件绑定方法外,可以使用(addEventListener( "触发事件", 绑定函数 ))的方式完成绑定;

    var关键字使用:
    如果var声明变量使用在函数内,则该变量是一个局部变量,若不使用则该变量是全局变量;

  • 相关阅读:
    ASP.NET Core 问题排查:Request.EnableRewind 后第一次读取不到 Request.Body
    解决 AutoMapper ProjectTo 不起作用的问题
    解决 ASP.NET Core 自定义错误页面对 Middleware 异常无效的问题
    ASP.NET Core 从 gitlab-ci 环境变量读取配置
    终于解决 xUnit.net 测试中无法输出到控制台的问题
    ASP.NET Core 新建线程中使用依赖注入的问题
    前端回顾:2016年 JavaScript 之星
    前端工程师和设计师必读文章推荐【系列三十五】
    AsciiMorph
    Notyf
  • 原文地址:https://www.cnblogs.com/hasagi/p/10786222.html
Copyright © 2011-2022 走看看