JS事件绑定
-
-
- 1 事件三要素
- 2 绑定事件的三种方法
- 3 常见事件类型(三种)
-
事件绑定，让网页的内容反映人类的指定行为。
1 事件三要素
事件三要素是指事件源、事件和事件驱动程序。事件源是指事件发生的位置，如按钮；事件是使动作发生，如点击；事件驱动程序是指事件发生的动作。例如，一旦点击按钮，按钮就会移动。这个动作是事件驱动程序。
2 绑定事件的三种方法
-
<标签名 onclick="事件驱动程序"></标签名>小案例1：点击问好按钮，弹出提示框你好吗？
<button type="button" onclick="fun1()" id="bt1">问好</button>function fun1(){ alert(你好吗？) }
函数中的this是window对象
-
在js中给标签对应的节点的事件属性赋值
小案例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绑定事件
小案例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) }效果如图：点击下拉框的选项，选项框的值跟着改变。