事件是电脑输入设备与页面交互的响应。

onload加载完成事件：onload事件 是在页面被浏览器加载完成之后。自动触发的响应

onclick单击事件

onblur失去焦点事件

onchange内容发生改变事件  经常用于select下拉列表选中后的内容发生改变时候触发

onsubmit表单提交事件 经常用来在表单提交的时候验证所有表单项是否合法。

事件的注册又分为静态注册和动态注册两种

静态注册事件：在标签上使用事件属性赋值的形式 给这个标签的事件响应添加javaScript代码的方式；

动态注册事件：动态注册，需要我们先获取到标签对象。然后通过对标签对象的的属性进行赋值一个function函数的形式。

　　

事件一、onclick（下面是静态注册单击事件示例）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>The event of script</title>

<script type="text/javascript">

   function onclickEvent(){

       alert("您点击了我 我是一个单击钮触发的事件并且此处由静态加载！！");

   }

</script>

</head>

<body>

<input type="button" onclick="onclickEvent();" value="单击事件静态"/>

</body>

</html>

　　

事件二、onload（下面是静态加载）事件 是在页面被浏览器加载完成之后。自动触发的响应

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<!-- 

    onload事件 是在页面被浏览器加载完成之后。自动触发的响应

    此处静态注册

 -->

 <script type="text/javascript">

    alert("onloadFun() 还未起作用   现在页面还没有加载完！");

     function onloadFun(){

    //alert("页面被加载完成！之后执行");

    // 在javaScript中，我们要操作一个标签要分两步走：

    // 第一步，先获取标签对象

    //get 获取

    //Element 元素（元素也就是标签）

    // by 是由 经 ，通过

    // id 是id属性

    var spanObj = document.getElementById("span01");

     alert(spanObj.innerHTML);

    //  alert(spanObj);

    // 第二步，操作标签对象的属性

   // innerHTML 表示对象的起始标签和结束标签中间的html文本内容

    //alert( spanObj.innerHTML ); 

   //spanObj.innerHTML = "xxxxxx";

  // 创建一个date对象获取当前时间

var date = new Date();

 // 把日期对象转换成为字符串

var dateStr = date.toLocaleString();

alert("页面加载完 script函数执行中我将更改span标签的内容！！为一个时间");

     spanObj.innerHTML = dateStr;

}

 </script>

</head>

<body onload="onloadFun();">

    <button>我也是一个按钮</button><br />

    <span id="span01">我是span标签用来检验onload事件的静态加载  现在页面加载完  我出现</span>

</body>

</html>

　　《2》动态注册onload 和 onclick 事件（单击事件 加载完成事件）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

       alert("页面加载前 未显示页面内容");

    /*

        onload事件的动态注册的写法

    */

    window.onload = function() {

//      alert("页面被加载完成！");

//      动态注册需要分两步走：

//      第一步，先获取标签对象

        var buObj = document.getElementById("bu01");

//      alert(buObj);

//      第二步，通过标签对象.事件名 = function(){  }

         alert("页面加载完成 我已获取按钮并绑定单击事件！！");

        buObj.onclick = function(){

            alert("这是刚刚页面动态加载完给按钮绑定的单击事件 点击看看！");

        }

    }

</script>

</head>

<body>

    <button id="bu01">我是一个按钮</button>

    <font color="red" size="5">如果页面加载完 就会看见我了</font>

</body>

</html>

　　

事件三onblur 动态 和 静态 注册（失去焦点事件）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

 alert("现在未执行动态加载是页面加载前你看不懂表单吧！！");

    //onblur静态触发的script函数

    function onblurFun(){

        alert("用户名失去焦点！");

    }

    //动态获取加载完页面并赋与触发事件

    window.onload = function() {

        alert("此时页面加载完 账号标签已经被静态的注册了失去焦点事件");

        //第一步，先获取标签对象

        var passObj = document.getElementById("password");

        //  alert(passObj);

        //第二步，通过标签对象.事件名 = function(){}

        alert("页面已加载完 已获取到密码标签并正在执行绑定onblur事件");

        passObj.onblur = function() {

            alert("密码框动态注册的onblur事件生效 ");

        }

    }

</script>

</head>

<body>

<!--

    静态注册失去焦点事件

 -->

账号:<input type="text" onblur="onblurFun()"/><br/>

密码:<input id="password" type="password" /><br/>

邮箱:<input id="email" type="text" /><br/>

</body>

</html>

　　

事件四onchange 动态 和 静态 注册（内容发生改变事件）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function onchangeFun(){

    alert("静态注册的onchage事件 ");

}

alert("现在页面未加载但是男神下拉框 已经被静态绑定了onchange 改变事件");

// 页面加载完成之后

window.onload = function() {

    // 1.通过id属性值获取第二个select标签对象

    var selectObj = document.getElementById("select01");

    // 2.通过标签对象.事件名 = function(){}

    alert("现在页面加载完成 对女神下拉框动态注册onchange事件中");

    selectObj.onchange = function() {

        alert("这是动态创建的onchange事件 ");

    }

}

</script>

</head>

<body>

请选择你心中的男神：

<select onchange="onchangeFun();">

    <option selected="selected">刘德华</option>

    <option>张学友</option>

    <option>张国荣</option>

</select>

<br/>

请选择你心中的女神：

<select id="select01">

    <option>李四</option>

    <option selected="selected">张三</option>

    <option>王五</option>

</select>

</body>

</html>

　　

事件五onsubmit 动态 和 静态 注册（内容发生改变事件）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function onsubmitFun() {

    alert("验证所有的表单操作……");

    // 情况1 如果有一个表单不合法，我们就可以直接return false;阻止表单提交到服务器

    alert("有表单不合法，阻止提交");

    return false;

    // 情况2 如果所有的表单都合法

    alert("所有的表单都合法，通过验证，让表单提交到服务器");

    return true;

}

</script>

</head>

<body>

<!--

    onsubmit事件 ，是表单提交事件。经常用来在表单提交的时候验证所有表单项是否合法。

    我们在静态注册的时候，必须手动态写上reutrn false可以阻止表单的提交

    return false可以阻止html标签元素的默认行为

 -->

    <form action="http://www.baidu.com" method="get"

    onsubmit="return onsubmitFun();">

    用户名:<input type="text" /><br /><br />

    <input type="submit" value="我是一个sumbit按钮"/>

</form>

</body>

</html>

　

JS事件

一、什么是事件？事件是电脑输入设备与页面交互的响应。我们称之为事件。

常用的事件：

onload加载完成事件

onclick单击事件

onblur失去焦点事件

onchange内容发生改变事件  经常用于select下拉列表选中后的内容发生改变时候触发

onsubmit表单提交事件 经常用来在表单提交的时候验证所有表单项是否合法。

事件五onsubmit 动态 和 静态 注册（内容发生改变事件）

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

function onsubmitFun() {

    alert("验证所有的表单操作……");

    // 情况1 如果有一个表单不合法，我们就可以直接return false;阻止表单提交到服务器

    alert("有表单不合法，阻止提交");

    return false;

    // 情况2 如果所有的表单都合法

    alert("所有的表单都合法，通过验证，让表单提交到服务器");

    return true;

}

</script>

</head>

<body>

<!--

    onsubmit事件 ，是表单提交事件。经常用来在表单提交的时候验证所有表单项是否合法。

    我们在静态注册的时候，必须手动态写上reutrn false可以阻止表单的提交

    return false可以阻止html标签元素的默认行为

 -->

    <form action="http://www.baidu.com" method="get"

    onsubmit="return onsubmitFun();">

    用户名:<input type="text" /><br /><br />

    <input type="submit" value="我是一个sumbit按钮"/>

</form>

</body>

</html>

064_Js常用的五大事件 onclick nochanger onload onsubmit onblur的更多相关文章

  1. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  2. 事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）【转载】

    ylbtech-Event:事件(Event)对象 事件(Event) HTML 4.0 事件属性 onclick onchange onload onunload onselect onmouse ...

  3. javascript中常用的DOM事件

    //常用事件 onclick 点击事件 onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标抬起 onmouseover 鼠标放上 onmouseout 鼠标放 ...

  4. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  5. 两种常用的jquery事件加载的方法 的区别

    两种常用的jquery事件加载的方法   $(function(){});  window.onload=function(){}  第一个呢,是在DOM结构渲染完成以后调用的,这时候网页中一些资源还 ...

  6. JavaScript中，有三种常用的绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

  7. 事件类型（onload）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JQuery常用实用的事件[较容易忽略的方法]

     JQuery常用实用的事件 注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...

  9. HTML事件(onclick、onmouseover、onmouseout、this)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. JS事件 鼠标单击事件( onclick ）通常与按钮一起使用。onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行

    鼠标单击事件( onclick ) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 比如,我们单击按钮时,触发  ...

随机推荐

  1. protected virtual 使用

    转载摘自:https://blog.csdn.net/qq_31116753/article/details/81203416 1.使用protected访问修饰符标记的方法或字段,只能在当前类及其子 ...

  2. Lazarus 开发环境使用技巧

    Lazarus 开发环境使用技巧 1.代码补全 按下键盘的Ctrl+W键!输入变量后按下这个键就OK啦- 2.自动完成 自动完成的快捷键大多数都冲突了,解决方法是打开 工具(T)->选项...- ...

  3. Flurl 组件使用

    简介 先发上官网地址:https://flurl.dev/ Flurl 是一个异步的.可测试的.可移植的.URL 构建器和 .NET 的 HTTP 客户端库:Flurl 在NuGet上可用,可免费用于 ...

  4. 学习笔记-Java流程控制

    学习来源: [狂神说Java]Java零基础学习视频通俗易懂_哔哩哔哩_bilibili Java流程控制 用户交互Scanner 获取用户的输入 基本语法 Scanner s = new Scann ...

  5. 利用XtraBackup实现PXC数据库的热备份

    PXC 容器中安装XtraBackup apt-get updata 1.在宿主机创建数据库卷,将数据卷映射到某个数据库的节点上 docker volume create backup 2.暂停nod ...

  6. ubuntu 20.04 ibus添加五笔输入法

    ubuntu 20.04 ibus添加五笔输入法:虽然现在五笔输入法已经没有什么新人使用,如果还有一两个人,找不到系统自带的极点五笔输入,可以按如下方式操作:以前是用ibus-setup,点添加,现在 ...

  7. SQL面试题，工作整理sql

    一.数据库和算法   表名:student,name,course,score    张青  语文  72    王华  数学72    张华  英语 81    张青 物理 671.用sql查询出& ...

  8. 大数据开源平台CDH 集群（CM6.3.1 + CDH 6.3.2）的部署

    一,概述 我依照博文:https://www.cnblogs.com/liugp/p/16286645.html ,进行了CDH集群的部署.总体来说,基本比较顺利. 在部署过程中,发生了一些小问题.本 ...

  9. Task :app:lintVitalRelease FAILED

    错误信息:Task :app:lintVitalRelease FAILED 问题原因:dl.google.com 无法连接 解决办法: 修改hosts(推荐)通过在线查询ip网站,找到dl.goog ...

  10. XenForo论坛安装

    1.下载安装程序,程序可以到qq群里面找,或者是联系我 2.域名+/install安装 3.汉化后台,访问https://www.cnxfans.com/resources/xenforo-2-x.1 ...