前端网站开发兼职,深圳网站推广优化,网站建设技术架构,免费做公司网站一、简介
事件#xff1a;发生在HTML元素上的事情#xff0c;可以是用户的行为#xff0c;也可以是浏览器的行为#xff0c;如 用户点击了某个HTML元素用户将鼠标移动到某个HTML元素上用户输入数据时光标离开页面加载完成 事件源#xff1a;事件触发的源头#xf…一、简介
事件发生在HTML元素上的事情可以是用户的行为也可以是浏览器的行为如 用户点击了某个HTML元素用户将鼠标移动到某个HTML元素上用户输入数据时光标离开页面加载完成 事件源事件触发的源头即触发事件的元素如按钮、输入框、超链接等
事件对象当一个事件发生时这个事件相关的详细信息会被保存到一个对象中称为event对象
事件监听监听事件的发生绑定事件函数当事件被触发后执行该事件函数即回调函数
二、绑定事件
三种方式
静态绑定通过为标签的事件属性赋值
head scriptfunction f1(){console.log(静态绑定);}/script
/head
body!--方式1通过标签的事件属性--button onclickf1()按钮1/button
/body
动态绑定通过为DOM对象的事件属性赋值
headscript//当页面加载完成后执行window.onloadfunction(){var btn2document.getElementById(btn2);//方式2通过DOM对象的事件属性为按钮绑定点击事件btn2.onclickfunction(){console.log(动态绑定);}}/script
/head
bodybutton idbtn2按钮2/button
/body
动态绑定通过为DOM对象进行事件监听使用addEventListene(事件名,回调函数)
head script//当页面加载完成后执行window.onloadfunction(){//方式3通过为DOM对象进行事件监听addEventListenervar btn3document.getElementById(btn3);btn3.addEventListener(click,function(){console.log(动态绑定);});}/script
/head
bodybutton idbtn3按钮3/button
/body 注意
可以通过事件回调函数的第一个参数获取事件对象event属性含义 target 事件的目标元素即事件源type 事件类型timeStamp 事件生成的日期和时间clientX 当事件被触发时鼠标指针的水平坐标clientY 当事件被触发时鼠标指针的垂直坐标
在事件回调函数中this表示事件源即发生事件的元素
headscript//当页面加载完成后执行window.onloadfunction(){var btndocument.getElementById(btn);btn.onclickfunction(event){//事件触发时会自动为回调函数传入一个参数表示event事件对象console.log(111);console.log(event);console.log(typeof event);console.log(event.target);//事件源console.log(event.type);//事件类型console.log(this);//事件源等同于console.log(event.target);}}function f1(event){console.log(event);}/script
/head
bodybutton idbtn点我/button!--静态绑定事件时需要在绑定事件回调函数时接收事件对象参数--button onclickf1(event)click me/button
/body 三、常用事件
1、鼠标事件
事件名描述onclick鼠标单击ondblclick鼠标双击onmouseover鼠标移到某元素之上onmouseout鼠标从某元素上移开onmousedown鼠标按钮被按下onmouseup鼠标按键被松开onmousemove鼠标被移动oncontextmenu鼠标右键单击
headscriptwindow.onloadfunction(){var btndocument.getElementById(btn);//鼠标事件//btn.onclickfunction(){}//鼠标单击//btn.ondblclickfunction(){}//鼠标双击/*btn.onmouseoverfunction(){//鼠标经过console.log(111);}btn.onmouseoutfunction(){//鼠标离开console.log(222);}btn.onmousedownfunction(){//鼠标按下console.log(111);}btn.onmouseupfunction(){//鼠标松开console.log(222);}btn.onmousemovefunction(){//鼠标移动console.log(111);}*/btn.oncontextmenufunction(){//鼠标右击console.log(111);}}/script
/head
bodybutton idbtn点我/button
/body
2、键盘事件
事件名描述onkeydown某个键盘的键被按下去onkeypress某个键盘的键被按下去且松开onkeyup某个键盘的键被松开
head script//键盘事件var usernamedocument.getElementById(username);username.onkeydownfunction(e){//键盘的键被按下去//console.log(111);//console.log(e.keyCode);//获取按键码if(e.keyCode13){//当输入回车后才会输出111(回车键码是13)console.log(111);}}/*username.onkeypressfunction(){//键盘的键被按下去且松开console.log(222);}username.onkeyupfunction(){//键盘的键被松开console.log(333);}*/}/script
/head
body用户名input typetext idusername
/body
3、表单事件
事件名描述onfocus元素获得焦点onblur元素失去焦点onchange域的内容发生改变一般用于文件选择器和下拉列表onselect文本内容被选中onsubmit表单提交前触发回调函数返回true表示允许表单提交返回false表示阻止表单提交
表单元素的方法focus()、blur()、select()、click()
headstyle#username,#email{outline: 0;}.border{border: 1px solid red;}#img{width:100px;height:100px;}#head{display:none;}/*被选中的内容为红色*//*#email::selection{color:red;}*//stylescript//表单事件window.onloadfunction(){var usernamedocument.getElementById(username);username.onfocusfunction(){//元素获得焦点username.classList.add(border);}username.onblurfunction(){//元素失去焦点username.classList.remove(border);}document.getElementById(eat).onchangefunction(){//域的内容发生改变console.log(this.checked);//获取是否选中}document.getElementById(head).onchangefunction(){//console.log(this.files);//获取选择的文件数据document.getElementById(img).srcwindow.URL.createObjectURL(this.files[0]);//根据选中的图片改src}document.getElementById(email).onselectfunction(){//文本内容被选中this.classList.add(border);}document.getElementById(frm).onsubmitfunction(){//判断表单内容是否符合要求var emaildocument.getElementById(email).value;if(email){return false;}return true;}}/script
/head
bodyform action idfrm用户名input typetext idusernamebr爱好input typecheckbox namehobby ideat valueeat吃饭br头像input typefile idhead multiple!--可同时选多个文件--label forheadimg src./默认头像.png idimg/labelbr邮箱input typetext idemail valuetomsina.com.cn nameemailbrinput typesubmit value提交/form
/body 四、事件操作
1、事件流
概念当一个HTML元素产生事件时该事件会在当前元素与根元素之间按特定的顺序传播所有经过的节点都会收到该事件并执行这个传播过程就是DOM事件流。 分类事件冒泡、事件捕获 2、事件冒泡/事件捕获
事件冒泡当一个元素上的事件被触发时事件从事件源开始往上冒泡直到页面的根元素这一过程被称为事件冒泡默认方式
事件捕获当一个元素上的事件被触发时事件从页面的根元素开始往下直到事件目标元素这一过程被称为事件捕获
阻止事件冒泡 event.stopPropagation()
headstylediv{border:1px solid black;}#div1{width:200px;height:200px;}#div2{width:150px;height:150px;}#div3{width:100px;height:100px;}#div4{width:50px;height:50px;}/stylescriptfunction $(id){return document.getElementById(id);}window.onloadfunction(){$(div1).addEventListener(click,function(){console.log(div1);},false)//第三个参数为true表示采用事件捕获默认为false表示事件冒泡$(div2).addEventListener(click,function(){console.log(div2);},false)$(div3).addEventListener(click,function(event){console.log(div3);event.stopPropagation();//阻止事件传播},false)$(div4).addEventListener(click,function(){console.log(div4);},false)};/script
/head
bodydiv iddiv1 onclickprint( div1 )div1div iddiv2 onclickprint( div2 )div2div iddiv3 onclickprint( div3 )div3div iddiv4 onclickprint( div4 )div4/div/div/div/div
/body 3、事件代理/事件委托
概念利用事件冒泡/事件捕获机制通过给父元素绑定事件从而实现对所有子元素的事件管理无需为每个子元素绑定事件 优点1.减少事件注册降低内存占用 2.新增元素时实现动态绑定事件 head styleul{border:1px solid #ccc;}li{background: pink;}/stylescriptwindow.onloadfunction(){/*var lisdocument.querySelectorAll(li);for(var li of lis){li.onclickfunction(){console.log(this);//事件源console.log(this,innerText);}}*/document.querySelector(ul).onclickfunction(e){console.log(e.target.innerText);//console.log(e.target);//触发事件的原始对象console.log(this);}}function add(){var lidocument.createElement(li);li.innerTextli6;/*li.onclickfunction(){console.log(this,innerText);}*/document.querySelector(ul).appendChild(li);}/script
/head
bodybutton onclickadd()添加li/buttonullili1/lilili2/lilili3/lilili4/lilili5/li/ul
/body
4、事件默认行为
概念当一个事件发生时浏览器自己会默认做的事情如点击链接时默认会跳转右键点击时默认会弹出菜单
阻止事件的默认行为e.preventDefault();
head scriptfunction print(e){console.log(111);e.preventDefault();//阻止事件的默认行为}/script
/head
bodybutton oncontextmenuprint(event)右键点击/buttonbra hrefhttps://www.baidu.com onclickprint(event)百度/a!--a hrefJavaScript:print()百度/a--
/body
