064_Js常用的五大事件 onclick nochanger onload onsubmit onblur

Posted BandariFang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了064_Js常用的五大事件 onclick nochanger onload onsubmit onblur相关的知识,希望对你有一定的参考价值。

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

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的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript中常用的事件

React.js 中的 OnClick 事件绑定

React.js 中的 OnClick 事件绑定

React.js 中的 OnClick 事件绑定

js常用事件

常用js事件