JS的事件绑定

时间：2023-04-29 17:37:00 bt3六盘水仪表变送器

JS事件绑定

- - 1 事件三要素
  - 2 绑定事件的三种方法
  - 3 常见事件类型(三种)

事件绑定，让网页的内容反映人类的指定行为。

1 事件三要素

事件三要素是指事件源、事件和事件驱动程序。事件源是指事件发生的位置，如按钮；事件是使动作发生，如点击；事件驱动程序是指事件发生的动作。例如，一旦点击按钮，按钮就会移动。这个动作是事件驱动程序。

2 绑定事件的三种方法

在标签内赋予事件源的事件属性

<标签名 onclick="事件驱动程序">标签名>

小案例1：点击问好按钮，弹出提示框你好吗？

<button type="button" onclick="fun1()" id="bt1">问好button>

function fun1(){ 
             alert(你好吗？) }

在这里插入图片描述

函数中的this是window对象

在js中给标签对应的节点的事件属性赋值

事件源节点.οnclick=事件驱动程序对应的函数
小案例2:点击按钮弹出提示框。

<button type="button" id="bt2">提问button> <button type="button" id="bt3">黑鸭button>

document.getElementById('bt2').onclick=function(){ 
          
		alert('对面你还好么？')
}
document.getElementById('bt3').onclick=function(){ 
          
		alert('好吃吗？')
}

效果如下：

注意：事件驱动程序对应的函数必须是普遍函数的函数名或者是匿名函数
函数中的this是事件源

在js中通过节点对象的addEventListener绑定事件
事件源节点.addEventListener(事件名称，事件驱动程序对应的函数)

小案例3：点击确定按钮，弹出提示框。
```
<button type="button" id="btn3">确定button>
```
```
document.getElementById('btn3').addEventListener('click',function(){ 
          
		confirm('是否删除？')
		console.log(this)
	})
```
效果图如下：

注意：这儿的事件名需要把on去掉

3 常见的事件类型（三种）

鼠标相关事件（任何可见标签都可以绑定鼠标事件）
onclick-鼠标点击事件
onmouseover-鼠标悬停在标签上的事件
onmousemove-鼠标从标签上离开的事件

小案例4：按钮显示点我呀，当鼠标放在按钮上时，按钮显示点不了。

<button type="button" id="btn1" onmouseover="dian()" onmouseout="nodian()" >点我呀button>

bt1=document.getElementById('btn1')
	
	function dian(){ 
          		
		bt1.innerText='点不了'
		bt1.style.color='red'
	}
	function nodian(){ 
          
		bt1.innerText='点我呀'
		bt1.style.color='blueviolet'
	}

效果图如下：

按键相关事件
onkeydown-某个按键按下对应的事件
onkeypress-某个按键按下对应的事件
onkeyup-某个按键按下弹起来对应的事件
小案例5：英文状态下，输入值，打印按键的信息。
```
<input onkeypress="keyPress()" id="inp1">
```
```
input1=document.getElementById('inp1')
	input1.onkeypress=function(event){ 
          
	console.log('按键按下',event)
	}
```
效果如图：

注意：按键相关事件绑定的时候必须通过js绑定（用方法2或者方法3绑定），才可以在函数中添加事件对应的参数，来获取按键信息

值改变事件
onchange-用于检测下拉列表的选项发生改变的时候
小案例6：

<select name="city" id="city">
		<option value="成都">成都option>
		<option value="北京">北京option>
select>

document.getElementById('city').onchange=function(){ 
          
		console.log('sfdsfwf',city.value)
	}

效果如图：点击下拉框的选项，选项框的值跟着改变。

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

JS的事件绑定

JS事件绑定

相关文章