海南省建设网站的公司电话,国外 外贸 网站 源码,茶叶包装设计,西安网站建设地址HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时#xff0c; JavaScript 可以触发这些事件。
Html事件
HTML 事件可以是浏览器行为#xff0c;也可以是用户行为。
以下是 HTML 事件的实例#xff1a;
HTML 页面完成加载HTML input 字段改变…HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时 JavaScript 可以触发这些事件。
Html事件
HTML 事件可以是浏览器行为也可以是用户行为。
以下是 HTML 事件的实例
HTML 页面完成加载HTML input 字段改变时HTML 按钮被点击
通常当事件发生时你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
事件绑定的方式
方式1直接把事件绑定在HTML元素上
button onclickshow(hello)一个按钮/buttonfunction show(str) {alert(点击事件执行了str);}
方式2使用代码来绑定事件
bodyulli classaa01/lili classaa02/lili classaa03/lili classaa04/lili classaa05/li/ul/bodyscriptlet a document.getElementsByClassName(aa);a[0].onclick function() {alert(第一个执行了);}/script
方式3绑定事件 input typebutton value我的按钮 idbtnlet btn document.getElementById(btn);var funfunction() {alert(按钮被点击了);}btn.addEventListener(click, fun);
事件解绑
button idbtn一个按钮/buttonvar bfunction() {alert(222222)
}
btn.addEventListener(click,b)btn.removeEventListener(click,b);
常见的Html事件
焦点事件
针对表单项
onfocus 获取焦点
onblur 失去焦点
oninput 表单中内容发生变化时就触发
bodyinput typetext nameusername value请输入用户名 onfocusshow1() oninputshow3()span idsp/span/bodyscriptfunction show1() {document.getElementsByName(username)[0].value; //获取焦点时 输入框变为空}function show3() {console.log(边输入边校验);let input document.getElementsByName(username)[0];let content input.value;let regx/^[a-z]{6,16}$/i;let flag regx.test(content);let sp document.getElementById(sp);if(flag){input.style.border 2px solid green;sp.innerHTML b stylecolor: green格式正确/b;}else {input.style.border 2px solid red;sp.innerHTML b stylecolor: red格式错误/b;}}/script
键盘事件
* onkeydown 某个键盘按键被按下。不区分键码的大小写
* onkeypress 某个键盘按键被按下并松开。区分键码的大小写 a 97 A 65
* onkeyup 某个键盘按键被松开。
bodyinput typetext onkeypressshow()/bodyscriptfunction show() {let code event.keyCode;if(code97||code65){console.log(往前跑);}console.log(按键按下了code)}/script
鼠标事件
onmousedown 鼠标按下
onmouseup 鼠标松开
onmouseover 鼠标移上
onmouseout 鼠标移开
onmousemove 鼠标移动
bodybutton idbtn onmousedowndown() onmouseupup() onmouseoverover() onmouseoutout() onmousemovemove()一个按钮/buttondiv ida/div/bodyscriptfunction down() {//which 也可以获取鼠标的按键编号 1 左键 2滚轮 3右键// button 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键let code event.which;alert(鼠标按下了code);}function over() {document.getElementById(btn).style.backgroundColor red;}function out(){document.getElementById(btn).style.backgroundColor green;}let div document.getElementById(a);var w div.getBoundingClientRect().width;var h div.getBoundingClientRect().height;div.onmousemovefunction() {div.style.width (w)px;div.style.height (h) px;}/script
表单事件
bodyform action123.html methodget idform onsubmitset()用户名:input typetext nameusername placeholder请输入6-16位字母 onblurcheckUsername()span ida/spanbr密码:input typepassword namepassword placeholder请输入密码 onblurcheckPassword()span idb/spanbrbrinput typesubmit value注册input typereset value重置/form/bodyscriptlet myForm document.getElementById(form);myForm.onsubmitfunction() {return checkUsernamecheckPassword();}function checkUsername(){let input document.getElementsByName(username)[0];var content input.value;var regx/^[a-z]{6,16}$/i;var flagregx.test(content);let sp document.getElementById(a);if (flag){//alert(格式正确)input.style.border2px solid green;sp.innerHTMLb stylecolor:green格式正确/b;}else{//alert(格式不正确)input.style.border2px solid red;sp.innerHTMLb stylecolor:red格式错误/b;}return flag;}function checkPassword(){let input document.getElementsByName(password)[0];var content input.value;var regx/^[0-9]{6,16}$/;var flagregx.test(content);let sp document.getElementById(b);if (flag){//alert(格式正确)input.style.border2px solid green;sp.innerHTMLb stylecolor:green格式正确/b;}else{//alert(格式不正确)input.style.border2px solid red;sp.innerHTMLb stylecolor:red格式错误/b;}return flag;}function rest(){alert(表单重置);}/script
其他事件
script//onload 等页面中的所有元素加载完毕之后回去执行window.onload function () {let div document.getElementById(d1);alert(div);}/script/headbodydiv idd1/div/body
下拉框、单选框、多选框事件
bodyinput typetext placeholder默认值文字 onselectshow()select name id onchangeshow()option value请选择学历/optionoption value小学/optionoption value中学/optionoption value大学/option/selectinput typeradio namesex id onchangeshow()男input typeradio namesex id onchangeshow()女input typecheckbox namehobby id onchangeshow()音乐input typecheckbox namehobby id onchangeshow()踢球/bodyscriptfunction show() {alert(选择了)}document.oncontextmenufunction() {return false;}document.body.oncopyfunction() {return false;}/script
事件对象
currentTarget: 获取的是绑定了该事件的元素对象 target : 获取的是触发了该事件的元素对象
type: 获取事件类型 keyCode 当绑定了键盘事件可以从事件对象中获取按键的键码ASCII码
which/button 当绑定了鼠标事件可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键
事件冒泡
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle#a{width: 300px;height: 300px;background: red;}#b{width: 200px;height: 200px;background: yellow;}#c{width: 100px;height: 100px;background: blue;}/style/headbodydiv ida onclicka()div idb onclickb()div idc onclickc()/div/div/div/bodyscriptfunction a() {event.stopPropagation(); //阻止冒泡alert(a);}function b() {event.stopPropagation();//阻止冒泡alert(b);}function c() {event.stopPropagation();//阻止冒泡alert(c);}/script
/html
阻止元素的默认行为
e.preventDefault();
