• 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声明变量使用在函数内,则该变量是一个局部变量,若不使用则该变量是全局变量;

  • 相关阅读:
    C++模板学习之优先队列实现
    static 和const分别怎么用,类里面static和const可以同时修饰成员函数吗?
    C和C++的区别
    C++多态例子_虚函数
    转:master公式(主方法)
    C++11最常用的新特性如下
    转:哈夫曼树详解
    linux shell脚本
    linux 正则表达式
    linux shell命令
  • 原文地址:https://www.cnblogs.com/hasagi/p/10786222.html
Copyright © 2020-2023  润新知