js 事件机制1

mac2024-10-30 9

方法1:在html标签中通过添加属性实现方法2:通过document对象来添加一个标签可以放多个事件一个事件可以放多个触发操作 onclick="testOnclick();test()" **获取光标** dom对象.focus() **单双击事件** 单击 onclick="操作" 双击 ondblclick="操作" **鼠标事件** 除了onmouseenter和onmouseleave不冒泡，其他为冒泡鼠标移动事件 onmousemove="操作" 鼠标悬停事件 onmouseover="操作" 鼠标移出事件 onmouseout="操作" 鼠标移进事件(不冒泡) onmouseenter="操作" 鼠标移出事件(不冒泡) onmouseleave="操作" 鼠标按下事件 onmousedown="操作" 鼠标抬起事件 onmouseup="操作" **键盘事件** 键盘弹起事件(冒泡) onkeyup="操作" 当按键弹起时触发键盘下压事件(冒泡) onkeydown="操作" 当按键下压时触发，按下会一直触发，不区分大小写键盘下压事件(冒泡) onkeypress="操作" 当按下除功能键外的按键触发，按下会一直触发，区分大小写 **焦点事件(即光标)** 获取焦点(不支持冒泡) onfocus="操作" 失去焦点(不支持冒泡) onblur="操作" 光标消失时触发 **页面加载事件** onload="操作" 放在body标签里,会在页面加载成功后触发事件在js代码域中调用，会在页面还未加载时触发事件 onerror="操作" 页面加载失败时执行 **改变事件** onchange="操作" 当搭配输入文本框时，改变数据只有当焦点失去时才触发，不合适搭配下拉框，随着选项的改变而触发 **状态改变事件** onreadystatechange="操作" 当状态改变时执行 **加载domtree完成后事件** .addEventListener("DOMContentLoaded",函数) 加载domtree时候执行,优先于onload事件 "样式/视口大小改变事件" .onresize="操作" 当样式尺寸改变时执行 **滚动条改变事件** .onscroll="操作" 滚动条改变时执行 **鼠标滑轮事件** 非火狐 .onmousewheel="操作" 火狐 .addEventListener("DOMMouseScroll",函数,false); **表单提交事件** 在form表单设置onsubmit(); 当使用input标签,且type=‘submit’时,触发 **在div区域上右键单击触发事件** .oncontextmenu='操作' **图片加载完成事件** img对象.onLoad=回调 vue:@load

代码示例:

<html > <head > <title >js 事件机制1</title> <meta charset="utf-8" /> <script type="text/javascript"> /*单机事件*/ function testOnclick(){ alert("单机事件"); } function testDblclick() { alert("双击事件"); } /*鼠标事件*/ function testOnmouseover(){ alert("鼠标悬停事件"); } function testOnmousemove(){ alert("鼠标移动事件"); } function testOnmouseout(){ alert("鼠标移出事件") } function testOnmouseenter(){ alert("鼠标移进事件") } /*键盘事件*/ function testOnkeyup() { alert("键盘弹起事件"); } function testOnkeydown() { alert("键盘下压事件"); } /*焦点事件*/ function testOnfocus() { alert("获取焦点"); } function testOnblur(){ alert("失去焦点"); } /*页面加载事件*/ function testOnload() { alert("页面加载"); } testOnload(); /*测试*/ function test() { alert("测试"); } /*改变事件*/ function t1() { alert("改变1"); } </script> <style type="text/css"> #showdiv{ width:300px; height:300px; border:solid 1px red; } </style> </head> <body onload="testOnload()" > <input type="button" value="测试单击" onclick="testOnclick();test()" /> <input type="button" value="测试双击" ondblclick="testDblclick()" /> <div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()" onmouseenter="testOnmouseenter()" > </div> <input type="text" name="" id="" onkeyup="testOnkeyup()" /> <input type="text" onkeydown="testOnkeydown()"/> <br /> <input type="text" onfocus="testOnfocus()" /> <input type="text" onblur="testOnblur()" /> <select name="" id="" onchange="t1()"> <option value="">北京</option> <option value="">上海</option> <option value="">广州</option> </select> </body> </html>

最新回复(0)