事件与表单处理

最新推荐文章于 2022-06-23 20:02:32 发布

-irony-

最新推荐文章于 2022-06-23 20:02:32 发布

阅读量205

点赞数 1

分类专栏：前端文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_51532232/article/details/120608373

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

事件处理程序

响应某个事件的函数就叫事件处理程序,事件处理程序一般以on开头

HTML事件处理程序

<input type="button" value="click me" onclick = "alert('clicked')"/> 
<script> //这个函数有权访问全局作用域中的任何代码
 function showMsg(){ 
 alert('hello world'); 
 } 
 </script>
  <input type="button" value="click me" onclick = "showMsg();"/>

缺点:HTML和javaScript代码紧密耦合

DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性

优势:1)简单 2)跨浏览器

let btn = document.getElementbyId("myBtn"); 
btn.onclick = function(){ 
alert(this.id);//this表示btn 
}//使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，事件处理程序是在元素的作用域中运行。所以this表示引用当前元素. 

//删除事件处理程序
 btn.onclick = null;//删除事件后，单击案例不会有任何动作发生

DOM2级处理程序

addEventListener()

 let btn = document.getElementById("myBtn");
        btn.addEventListener("click",function(){
            alert(this.id);
        },false);
        //1.事件冒泡阶段被触发(因为最有一个参数是false) 
        //2.事件处理程序是在其依附的元素的作用域中运行(同上)
         //3.最后一个参数: true:表示在捕获节点调用事件处理程序。 false:在冒泡节点调用事件处理程序。 
         //优势，可以添加多个事件处理程序
         let btn = document.getElementById("myBtn");
        btn.addEventListener("click",function(){
            alert('hello');
        },false);
        //事件处理程序会按照它们的顺序触发。

removeEventListener():

添加的事件处理可以只能使用removeEventListener来移除,移除时传入的参数与添加时的参数相同.所以添加匿名函数将无法移除

  let btn = document.getElementById("myBtn");
        btn.addEventListener("click",function(){
            alert('hello');
        },false);
        btn.removeEventListener("click",function(){
            alert('hello');
        },false);//没有用

        let btn = document.getElementById("myBtn");
        let handler =  function(){
            alert('hello');
        }
        btn.addEventListener("click",handler,false)
        btn.removeEventListener("click",handler,false);//有效

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器

事件对象-event

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式不同.

DOM中的事件对象

 let btn = document.getElementById("myBtn");
        btn.onclick = function(event){
            alert(event.type);
        }
        btn.addEventListener("click",function(event){
            alert(event.type);
        },false);

HTML的事件对象

<input type="button" value="click me" onclick = "alert(event.type)"/>

事件类型

DOM3定义的事件类型如下:

UI ( User Interface，用户界面）事件，当用户与页面上的元素交互时触发;
焦点事件，当元素获得或失去焦点时触发;
鼠标事件，当用户通过鼠标在页面上执行操作时触发;
滚轮事件，当使用鼠标滚轮（或类似设备）时触发;
文本事件，当在文档中输人文本时触发;
键盘事件，当用户通过键盘在页面上执行操作时触发;
合成事件，当为IME ( Input Method Editor，输入法辑器）输人- 字符时触发;

UI事件

事件	备注
load	1)当页面完全加载后在window上面触发 2）当img图像加载完成
unload	1)当页面完全卸载后在window上面
abort	在用户停止下载过程时，如果嵌入的内容没有加载完，在元素上触发
error	当发生JavaScript错误时在window上面触发，当无法加载图像时在img上触发

window.onload = function(){ 
alert("页面加载完毕");
 }
 //等价: 
 <body onload="alert('页面加载完毕')"> 
 </body>
  <img src="smile.gif" onload="alert('img loaded')"/>

焦点事件

焦点事件会在页面获得或者失去焦点时触发,利用事件并与 document.hasFocus()和document.activeElement属性配合，可以知晓用户在页面上的行踪

focus:在元素获取焦点时触发
blur:在元素丢失焦点时触发

<input type="text" id="txtName" name="txtName" onfocus="聚集焦点要做的事情" onblur ="失去焦点要做得事情"/>

鼠标事件

click:用户单击鼠标（左边的按钮) 或者按下回车键时触发,意味着onclick事件可以通过键盘或者鼠标执行
dbclick: 双击鼠标
mousedown:用户按下任意鼠标按钮,不能通过键盘触发
mouseenter: 鼠标从元素外部首次移动到元素范围内.
mouseleave:在位于元素上分的鼠标光标移动到元素范围之外时触发.
mousemove:当鼠标指针在元素内部移动时重复触发
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发
mouseover:在鼠标指针唯一一个元素外部，然后用户将其移入另一个元素边界之内时触发。

键盘和文本事件

keydown:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件。
keyup:当用户释放键盘上的键时触发。虽然所有元素都支持以上3个事件，但只有在用户通过文本框输入文本时才最常用到。只有一个文本事件: textInput。这个事件是对keypress 的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发textInput事件。在用户按了一下键盘上的字符键时，首先会触发keydown 事件，然后紧跟着是keypress事件，最后会触发keyup事件。其中, keydown和 keypress都是在文本框发生变化之前被触发的;而keyup事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放，就会重复触发keydown和keypress 事件，直到用户松开该键为止。如果用户按下的是一个非字符键，那么首先会触发keydown事件，然后就是keyup事件。如果按住这个非字符键不放，那么就会一直重复触发keydown 事件，直到用户松开这个键,此时会触发keyup事件。

表单脚本

提交与重置

 let form = document.getElementById("myForm");
        form.submit();//提交表单
        form.reset();//重置表单

文本框脚本

表单字段属性：

disabled:布尔值,表示当前字段是否被禁用。true:表示禁用
false：表示启用
form:指向当前字段所属表单的指针;只读。
name:当前字段的名称。
readonly:布尔值，表示当前字段是否只读。
tabIndex:表示当前字段的切换（ tab)序号。
type:当前字段的类型，如"checkbox " 、 “radio”，等等。
value:当前字段将被提交给服务器的值。

表单字段方法：

  window.onload = function(){
            document.forms[0].elements[0].focus();
        }

<input type="text" autofocus/> 
<!--HTML5为表单字段新增了一个autofocus属性.-->

<input type="text" name="username" required>
<!--任何有required属性都不能空着-->

JSON

简单值：字符串，数值，布尔值，null不支持undefined（字符串一定要用双引号）
对象：一组有序的键值对，可以是简单值也可以是复杂数据类型的值

在这里插入图片描述

数组：一组有序的列表，可以通过数值索引值来访问其中的值，JSON不支持变量，函数或对象实例，他就是一种表示结构化数据的格式

解析和序列化

JSON对象有两个方法：

stringify():将js对象序列化为JSON字符串

var person={ 
name:"harry", 
age: 20 
};
var jsonText = JSON.stringify(person);
 //输出的JSON字符串不包含任何空格字符或缩进 
 //所有的函数及原型成员都会被有意忽略，不体现在结果中。 
 //值为undefined的任何属性都会被跳过。

parse():将JSON字符串直接转换为JS对象

var personCopy = JSON.parse(jsonText); 
//虽然personCopy 与person的属性一致，但是他们没有任何关系。 
//如果JSON字符串不是有效的JSON，该方法会抛出错误

-irony-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录