html 表单元素有哪几种事件处理？_软件运维

在html语言中,标记<input>具有重要的地位，它能够将浏览器中的控件加载到html文档中，该标记是单个标记，没有结束标记。<input type="">标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在 <form></form>标志对之间.

type属性值定义

type属性取值

输入区域类型

控件的属性及说明

单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数

(1)name 定义控件名称

(2)value 指定控件初始值,该值就是浏览器被打开时在文本框中的内容

(3)size 指定控件宽度,表示该文本输入框所能显示的最大字符数。

(4)maxlength 表示该文本输入框允许用户输入的最大字符数。

(5)onchang 当文本改变时要执行的函数

(6)onselect 当控件被选中时要执行的函数

(7)onfocus 当文本接受焦点时要执行的函数

普通按钮,当这个按钮被点击时,就会调用属性onclick指定的函数在使用这个按钮时,一般配合使用value指定在它上面显示的文字,用onclick指定一个函数,一般为JavaScript的一个事件。

这三个按钮有下面共同的属性：

(1)name 指定按钮名称

(2)value 指定按钮表面显示的文字

(3)onclick 指定单击按钮后要调用的函数

(4)onfocus 指定按钮接受焦点时要调用的函数

提交到服务器的按钮,当这个按钮被点击时,就会连接到表单form属性action指定的url地址。

重置按钮,单击该按钮可将表单内容全部清除,重新输入数据。

一个复选框,checked属性用来设置该复选框缺省时是否被选中,右边示例中使用了三个复选框

checkbox用于多选,有以下属性:

(1) name 定义控件名称

(2) value 定义控件的值

(3) checked 设定控件初始状态是被选中的

(4) onclick 定义控件被选中时要执行的函数

(5) onfocus 定义控件为焦点时要执行的函数

隐藏区域,用户不能在其中输入,用来预设某些要传送的信息

hidden 隐藏控件,用于传递数据,对用户来说是不可见的属性有:

(1)name 控件名称,

(2)value 控件默认值

(3)hidden隐藏控件的默认值会随表单一起发送给服务器,例如:

控件的名称设置为ss,设置其数据为"688",当表单发送给服务器后,服务器就可以根据hidden的名称ss,读取value的值688

使用图像来代替Submit按钮,图像的源文件名由src属性指定,用户点击后,表单中的信息和点击位置的X、Y坐标一起传送给服务器

(1)name 指定图像按钮名称

(2)src 指定图像的url地址

事件处理程序的方式了：

1. 设置HTML标签属性为事件处理程序

文档元素的事件处理程序属性，其名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。当然了，这种形式只能为DOM元素注册事件处理程序。实例：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow:hidden}

#div2{margin:50px autowidth: 200pxheight: 200pxbackground: greenoverflow:hidden}

#div3{margin:50px autowidth: 100pxheight: 100pxbackground: blue}

</style>

</head>

<body>

<div id="div1" onClick="console.log('div1')">div1

<div id="div2" oNClick="console.log('div2')">div2

<div id="div3" onclick="console.log('div3')" onclick="console.log('div3333')">div3

</div>

</script>

</body>

</html>

结果（鼠标点击div3区域后）：

从结果中可以看出：

①因为HTML里面不区分大小写，所以这里事件处理程序属性名大写、小写、大小混写均可，属性值就是相应事件处理程序的JavaScript代码；

②若给同一元素写多个onclick事件处理属性，浏览器只执行第一个onclick里面的代码，后面的会被忽略；

③这种形式是在事件冒泡过程中注册事件处理程序的；

2.设置JavaScript对象属性为事件处理程序

可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成，例如：onclick、onmouseover。实例：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow:hidden}

#div2{margin:50px autowidth: 200pxheight: 200pxbackground: greenoverflow:hidden}

#div3{margin:50px autowidth: 100pxheight: 100pxbackground: blue}

</style>

</head>

<body>

<div id="div1">div1

<div id="div2">div2

<div id="div3">div3

</div>

var div1 = document.getElementById('div1')

var div2 = document.getElementById('div2')

var div3 = document.getElementById('div3')

div1.onclick = function(){

console.log('div1')

}

div2.onclick = function(){

console.log('div2')

}

div3.onclick = function(){

console.log('div3')

}

div1.onclick = function(){

console.log('div11111')

}

div1.onClick = function(){

console.log('DIV11111')

}

</script>

</body>

</html>

结果（鼠标点击div3区域后）：

从结果中可以看出：

①因为JavaScript是严格区分大小写的，所以，这种形式下属性名只能按规定小写；

②若给同一元素对象写多个onclick事件处理属性，后面写的会覆盖前面的（ps：这就是在修改一个对象属性的值，属性的值是唯一确定的）；

③这种形式也是在事件冒泡过程中注册事件处理程序的；

3.addEventListener()

前两种方式出现在Web初期，众多浏览器都有实现。而addEventListener()方法是标准事件模型中定义的。任何能成为事件目标的对象——这些对象包括Window对象、Document对象和所有文档元素等——都定义了一个名叫addEventListener()的方法，使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个参数是要注册处理程序的事件类型，其值是字符串，但并不包括前缀“on”；第二个参数是指当指定类型的事件发生时应该调用的函数；第三个参数是布尔值，其可以忽略（某些旧的浏览器上不能忽略这个参数），默认值为false。这种情况是在事件冒泡过程中注册事件处理程序。当其为true时，就是在事件捕获过程中注册事件处理程序。实例：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow:hidden}

#div2{margin:50px autowidth: 200pxheight: 200pxbackground: greenoverflow:hidden}

#div3{margin:50px autowidth: 100pxheight: 100pxbackground: blue}

</style>

</head>

<body>

<div id="div1">div1

<div id="div2">div2

<div id="div3">div3

</div>

var div1 = document.getElementById('div1')

var div2 = document.getElementById('div2')

var div3 = document.getElementById('div3')

div1.addEventListener('click', function(){ console.log('div1-bubble')}, false)

div2.addEventListener('click', function(){ console.log('div2-bubble')}, false)

div3.addEventListener('click', function(){ console.log('div3-bubble')}, false)

div3.addEventListener('click', function(){ console.log('div3-bubble222')}, false)

div1.addEventListener('click', function(){ console.log('div1-capturing')}, true)

div2.addEventListener('click', function(){ console.log('div2-capturing')}, true)

div3.addEventListener('click', function(){ console.log('div3-capturing')}, true)

</script>

</body>

</html>

结果（鼠标点击div3区域后）：

从结果中可以看出：

①addEventListener()第三个参数的作用正如上面所说；

②通过addEventListener()方法给同一对象注册多个同类型的事件，并不会发生忽略或覆盖，而是会按顺序依次执行；

相对addEventListener()的是removeEventListener()方法，它同样有三个参数，前两个参数自然跟addEventListener()的意义一样，而第三个参数也只需跟相应的addEventListener()的第三个参数保持一致即可，同样可以省略，默认值为false。它表示从对象中删除某个事件处理函数。实例：

div1.addEventListener('click', div1BubbleFun, false)

div1.removeEventListener('click', div1BubbleFun, false)

function div1BubbleFun(){

console.log('div1-bubble')

}

4.attachEvent()

但是，IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。相应的，IE定义了类似的方法attachEvent()和detachEvent()。因为IE8以及其之前版本浏览器也不支持事件捕获，所以attachEvent()并不能注册捕获过程中的事件处理函数，因此attachEvent()和detachEvent()要求只有两个参数：事件类型和事件处理函数。而且，它们的第一个参数使用了带“on”前缀的事件处理程序属性名。实例：

var div1 = document.getElementById('div1')

div1.attachEvent('onclick', div1BubbleFun)

function div1BubbleFun(){

console.log('div1-bubble')

}

相应的，从对象上删除事件处理程序函数使用detachEvent()。例如：

div1.detachEvent('onclick', div1BubbleFun)

到此为止，我们已经说了浏览器中事件传播机制以及各种注册事件处理程序的方法。下面我们就再说说事件处理程序调用时的一些问题吧！

二.事件处理程序的调用

1.事件处理程序的参数：正如前面所说，通常事件对象作为参数传递给事件处理函数，但IE8以及其之前版本的浏览器中全局变量event才是事件对象。所以，我们在写相关代码时应该注意兼容性问题。实例（给页面上id为div1的元素添加点击事件，当点击该元素时在控制台输出事件类型和被点击元素本身）：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow: hidden}

</style>

</head>

<body>

var div1 = document.getElementById('div1')

if(div1.addEventListener){

div1.addEventListener('click', div1Fun, false)

}else if(div1.attachEvent){

div1.attachEvent('onclick', div1Fun)

}

function div1Fun(event){

event = event || window.event

var target = event.target || event.srcElement

console.log(event.type)

console.log(target)

}

</script>

</body>

</html>

2.事件处理程序的运行环境：关于事件处理程序的运行环境，也就是在事件处理程序中调用上下文（this值）的指向问题，可以看下面四个实例。

实例一：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow: hidden}

</style>

</head>

<body>

</script>

</body>

</html>

结果一：

从结果可以看出：

①第一种方法事件处理程序中this指向这个元素本身；

实例二：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow: hidden}

</style>

</head>

<body>

var div1 = document.getElementById('div1')

div1.onclick = function(){

console.log('div1.onclick:')

console.log(this)

}

</script>

</body>

</html>

结果二：

从结果可以看出：

①第二种方法事件处理程序中this也指向这个元素本身；

②存在第二种方法时，它会覆盖第一种方法注册的事件处理程序；

实例三：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow: hidden}

</style>

</head>

<body>

var div1 = document.getElementById('div1')

div1.onclick = function(){

console.log('div1.onclick:')

console.log(this)

}

div1.addEventListener('click', function(){

console.log('div1.addEventListener:')

console.log(this)

}, false)

</script>

</body>

</html>

结果三：

从结果可以看出：

①第三种方法事件处理程序中this也指向这个元素本身；

②第三种方法并不会覆盖第一种或第二种方法注册的事件处理程序；

实例四：

<!DOCTYPE HTML>

<html>

<head>

#div1{width: 300pxheight: 300pxbackground: redoverflow: hidden}

</style>

</head>

<body>

var div1 = document.getElementById('div1')

div1.onclick = function(){

console.log('div1.onclick:')

console.log(this)

}

div1.attachEvent('onclick', function(){

console.log('div1.attachEvent:')

console.log(this === window)

})

</script>

</body>

</html>

结果四：

从结果可以看出：

①第四种方法事件处理程序中this指向全局对象Window；

②第四种方法也不会覆盖第一种或第二种方法注册的事件处理程序；

3.事件处理程序的调用顺序：多个事件处理程序调用规则如下：

①通过HTML属性注册的处理程序和通过设置对象属性的处理程序一直优先调用；

②使用addEventListener()注册的处理程序按照它们的注册顺序依次调用；

③使用attachEvent()注册的处理程序可能按照任何顺序调用，所以代码不应该依赖于调用顺序；

一个问题是onclick事件处理程序，你把名字写错了，

还有不知为什么，你为什么要写那么多的<body>标签呢？

一般格式不都是：

<html>

<head>

javascript

</script>

<style>

css

</style>

</head>

<body>

</body>

</html>

只需要一个body标签

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/8149128.html

html 表单元素有哪几种事件处理？

发表评论

评论列表（0条）

html 表单元素 有哪几种事件处理？

发表评论

评论列表（0条）

html 表单元素有哪几种事件处理？