Web基础——JavaScript之事件绑定与事件对象
2024-05-21 18:31:39
目录
- 1.事件的绑定
- 2.事件的绑定（注意事项）
- 3.失去焦点和获得焦点
- 4.键盘事件
- 5.鼠标事件
- 6.表单事件
- 7.页面加载事件
- 8.下拉框事件
- 9.事件对象
- 10.currentTarget和target的区别
- 11.事件的冒泡现象
- 12.阻止事件冒泡的行为
- 13.元素的默认行为
- 14.事件捕获
- 15.事件委托
- 16.设置元素的自带属性以及设置元素的css样式
- 17.开关案例
- 18.排他思想
- 19.图片跟随鼠标
- 20.定位到搜索框
1.事件的绑定
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1 {height: 100px;width: 150px;background-color: aquamarine;}</style></head><body><!-- 绑定事件的方式1，直接在标签上绑定 --><button type="button" onclick="show('hello')">一个按钮</button><div id="d1">点我呀</div><input type="button" value="我的按钮" id="btn" /></body><script type="text/javascript">function show(msg) {alert(msg)}//方式2 来绑定事件var myDiv = document.getElementById("d1");var hehe=function() {alert("hehe")}//把处理函数，设置为 null 就可以解绑事件//hehe=nul;myDiv.onclick = hehe;//方式3，来绑定事件// 3. 通过 addEventListener() 方法 来添加事件// 语法：document.getElementById("myBtn").addEventListener("click",事件处理函数);var btn = document.getElementById("btn");var test = function() {alert("点击了");};btn.addEventListener("click", test)//解绑事件btn.removeEventListener('click',test);</script>
</html>
2.事件的绑定（注意事项）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button id="btn1" type="button">按钮1111</button><button id="btn2" type="button">按钮22222</button></body><script type="text/javascript">var btn1=document.getElementById("btn1");btn1.onclick=function(){alert("btn11111111111");}//多次绑定同一类型的事件，就会覆盖上一次的。btn1.onclick=function(){alert("btn11111111111555555555555555555555555555");}//使用 addEventListener() 这个方法来绑定多个同类型事件，不会覆盖var btn2=document.getElementById("btn2");btn2.addEventListener("click",function(){alert("btn2222222222")})btn2.addEventListener("click",function(){alert("btn222222222288888888888888888888")})</script>
</html>
3.失去焦点和获得焦点
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>用户名：<input type="text" name="username" onfocus="clearText()" id="" value="请输入用户名"/></body><script type="text/javascript">function clearText(){var ele=document.getElementsByName('username')[0];ele.value="";}</script>
</html>
4.键盘事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- * 键盘事件：* onkeydown 某个键盘按键被按下。* onkeyup 某个键盘按键被松开。 * onkeypress 某个键盘按键被按下并松开。 通过事件对象event中的keyCode属性，可以获取键盘某个键的键码 其实就是ASCII码表中对按键的编码 e.keyCode --><!-- event 事件对象，单词不要写错 --><input onkeypress="show(event)" type="text" name="" id="" value="" /></body><script type="text/javascript">//w 往前 s 往后 a 往左 d 往右function show(e) {//事件对象的属性 可以获取按键的编码var code=e.keyCode;console.log("按键被按下了"+code);}/* function show2(e) {console.log("按键抬起了");} */</script>
</html>
5.鼠标事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1{height: 200px;width: 100px;background: red;}/* #d1:hover{ }#d1:active{} */</style></head><body><!--test1(this) this表示绑定了该事件的元素event,事件对象，名字不要写错--><div id="d1" onmousemove="show(this)" onmouseover="test1(this)" onmouseout="test2(this)" onmousedown="test3(this,event)" onmouseup="test4(this)"></div><script type="text/javascript">function test1(ele){ele.style.background="yellow";}function test2(ele){ele.style.background="blue";}function test3(ele,e){// e.which 获取鼠标按键的编号 1 左键 2滚轮 3右键var num=e.which//alert(e.which);ele.style.background="pink";}function test4(ele){ele.style.background="black";}var i=200;function show(ele){ele.style.height=(i+=2)+"px";console.log(i);}</script></body>
</html>
6.表单事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="#" method="get" onsubmit="return tijiao()" onreset="chongzhi()"><input type="text" name="username" id="" value="" oninput="checkUsername()"/><span id="sp"></span><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body><script type="text/javascript">function tijiao() {alert("表单提交");return checkUsername(); // 返回true 表单数据会提交给后台，false 不会提交}function chongzhi() {alert("表单重置");}function checkUsername(){console.log("边输入，边触发");var regx=/^[a-z]{6,16}$/i;var text=document.getElementsByName('username')[0].value.trim();var flag=regx.test(text);var sp=document.getElementById('sp');if(flag){sp.innerHTML='<b style="color: green;">用户名格式正确✔<b>'}else{sp.innerHTML='<b style="color: red;">用户名格式错误✘<b>'}return flag;}</script>
</html>
7.页面加载事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//等文档中的所有元素加载完成之后执行,注意绑在window对象上window.onload = function() {var btn = document.getElementById("btn");alert(btn);}</script></head><body><button type="button" id="btn">一个按钮</button></body>
</html>
8.下拉框事件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" name="" id="" value="输入框中的文本内容" onselect="change()" /><!-- onchange 当你选择下拉项会触发 --><select name="" onchange="select()"><option value="">--请选择学历--</option><option value="">--小学--</option><option value="">--中学--</option><option value="">--大学--</option></select><script type="text/javascript">function select() {alert("你选择了")}function change(){alert("你扩选了");}</script></body>
</html>
9.事件对象
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 直接传递事件对象 --><button type="button" onclick="show(event)" id="btn">一个按钮</button><button type="button" onclick="show2()">一个按钮</button></body><script type="text/javascript">//event 事件对象，由浏览器创建，我们可以拿来使用function show(e){//e 你传递过来的事件对象// keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）//button 当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键//type获取事件类型 click//alert(e.type);//document.getElementById('btn').style.background="red";//获取绑定了该事件的元素var ele=e.target;//var ele=e.currentTarget;ele.style.background="yellow";}//直接在函数里面获取function show2(){//event就是事件对象var e=window.event;alert(e);}</script>
</html>
10.currentTarget和target的区别
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#wai{height: 200px;width: 200px;background: gold;}</style></head><body><div id="wai" onclick="show(event)"><button type="button" id="btn">一个按钮</button></div><script type="text/javascript">function show(e){//target获取的是触发了事件的那个元素。//currentTarget 获取的是绑定了该事件的元素对象var ele=e.currentTarget;//alert(ele);ele.style.background="red";}</script></body>
</html>
11.事件的冒泡现象
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#one{height: 400px;width:400px;background:red;}#two{height: 300px;width:300px;background:blue;}#three{height: 200px;width:200px;background:yellow;}</style></head><body><div id="one" onclick="show1()">1<div id="two" onclick="show2()">2<div id="three" onclick="show3()">3</div></div></div><script type="text/javascript">//事件冒泡，事件从内层元素，一次向外触发。//如果你不想需要这种事件冒泡现象，那我们就得阻止事件冒泡行为function show1(){alert("1111111111111111")}function show2(){alert("22222222222")}function show3(){alert("3333333")}</script></body>
</html>
12.阻止事件冒泡的行为
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#one{height: 400px;width:400px;background:red;}#two{height: 300px;width:300px;background:blue;}#three{height: 200px;width:200px;background:yellow;}</style></head><body><div id="one" onclick="show1(event)">1<div id="two" onclick="show2(event)">2<div id="three" onclick="show3(event)">3</div></div></div><script type="text/javascript">//事件冒泡，事件从内层元素，一次向外触发。//如果你不想需要这种事件冒泡现象，那我们就得阻止事件冒泡行为//我们可以通过，事件对象中的 stopPropagation() 方法来阻止冒泡行为function show1(e){alert("1111111111111111")//阻止事件冒泡e.stopPropagation();}function show2(e){alert("22222222222")e.stopPropagation();}function show3(e){alert("3333333")e.stopPropagation();}</script></body>
</html>
13.元素的默认行为
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- a 标签 跳转页面是一个默认行为 我只想让a标签，执行点击事件，但是不要跳页面--><a href="http://www.163.com" onclick="show(event)">一个连接</a><!-- 阻止a标签的默认行为，其他方式 --><a href="javascript:void(0)" onclick="show2()">一个连接</a><a href="javascript:;;" onclick="show2()">一个连接</a><form action="123.html" method="post" onsubmit="tijiao(event)"><input type="submit" value="提交"/></form></body><script type="text/javascript">function show(e){alert("abc");e.preventDefault(); //阻止元素的默认行为}function show2(){alert("abc");}function tijiao(e){e.preventDefault(); //阻止表单默认同步提交额行为alert("异步提交表单");}</script>
</html>
14.事件捕获
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#one{height: 400px;width:400px;background:red;}#two{height: 300px;width:300px;background:blue;}#three{height: 200px;width:200px;background:yellow;}</style></head><body><div id="one">1<div id="two">2<div id="three">3</div></div></div><script type="text/javascript">//事件捕获，事件从外层，向内层依次触发//如果你不想需要这种事件冒泡现象，那我们就得阻止事件冒泡行为function show1(){alert("1111111111111111")}function show2(){alert("22222222222")}function show3(){alert("3333333")}//addEventListener() 方法的参数3 false 默认值，表示冒泡， true 事件捕获。document.getElementById("one").addEventListener('click',show1,true);document.getElementById("two").addEventListener('click',show2,true);document.getElementById("three").addEventListener('click',show3,true);</script></body>
</html>
15.事件委托
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><ul id="myUL"><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li><li class="myli">这是一个个列表项</li></ul></body><script type="text/javascript">/* var liArr=document.getElementsByClassName("myli");for(let i=0;i<liArr.length;i++){//直接给每一个 子元素绑定liArr[i].addEventListener('click',function(){alert("点击了");})} *///事件委托，把所有子元素的事件，绑定给给父元素document.getElementById("myUL").addEventListener('click',function(e){//alert("点击了");e.target.style.backgroundColor = 'red';})</script>
</html>
16.设置元素的自带属性以及设置元素的css样式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css"></style></head><body><button type="button" disabled="disabled">一个按钮</button><button type="button" id="btn" onclick="test2(this)">一个按钮2222222222</button><input type="radio" name="sex" id="" value="1" />男<input type="radio" name="sex" id="" value="0" />女</body><script type="text/javascript">var btn=document.getElementById("btn");//设置元素的自带属性btn.disabled=false; //true 表示禁用，false表示不禁用var arr=document.getElementsByName("sex");//alert(arr.length);for(let i=0;i<arr.length;i++){arr[i].addEventListener("change",function(){//this 当前绑定了该事件的元素var v=this.checked;alert(v);})}function test(ele){//使用js代码设置元素的CSS样式//元素对象.style.css属性名=值 ele.style.width="100px"; //值是字符串类型ele.style.height="40px";//css属性如果有横杠拼接的，要注意，把横杠去掉，把横杠后面的第一个字母变大写//例如： background-color 得变成 backgroundColorele.style.backgroundColor="red";}function test2(ele){//使用js代码设置元素的CSS样式//方式2： ele.style.cssText="css内联样式的写法"ele.style.cssText="width:200px;height:100px;background-color:yellow";}</script>
</html>
17.开关案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="img/pic_bulboff.gif" onclick="kaiGuan(this)"></body><script type="text/javascript">var flag = true;function kaiGuan(ele) {if (flag) {ele.src = "img/pic_bulbon.gif";//开启功能} else {ele.src = "img/pic_bulboff.gif";//关闭功能}flag = !flag; //修改标记}</script>
</html>
开关图片
18.排他思想
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button></body><script type="text/javascript">var btns=document.getElementsByTagName("button");for(let i=0;i<btns.length;i++){btns[i].onclick=function(){//把所有元素的背景恢复成默认clearColor();this.style.backgroundColor="red";}}function clearColor(){for(let i=0;i<btns.length;i++){btns[i].style.backgroundColor="";}}</script>
</html>
19.图片跟随鼠标
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img{position: absolute;top:0;left:0;}</style></head><body><img src="img/yazi.gif" id="tp"></body><script type="text/javascript">//你要整个页面绑定事件，绑定 document 上//标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。//或者 window.event 中获取事件对象document.addEventListener('mousemove', function(e) {// 2. page 鼠标在页面文档的x和y坐标var x = e.pageX;var y = e.pageY;//获取图片对象var img = document.getElementById("tp");//设置图片的样式img.style.left = x + "px";img.style.top = y + "px";})</script>
</html>
20.定位到搜索框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="search" name="" id="ss" value="" /><button type="button" onclick="sousuo()">搜索</button><hr size="12000px"></body><script type="text/javascript">function sousuo() {alert("搜索");}//当输入完搜索的内容，敲回收开始搜索document.getElementById("ss").addEventListener('keydown', function(e) {//alert(e.keyCode);if (e.keyCode == 13) {alert("开始搜索")}})//给整个文档绑定按键抬起事件document.addEventListener('keyup', function(e) {//alert(e.keyCode);//判断 按的是 sif (e.keyCode == 83) {//让输入框获取焦点 focus() 在文本域上设置焦点。 document.getElementById("ss").focus();e.pageY = 0 + "px"; //让页面定位到顶部 pageY纵坐标}})</script>
</html>
Web基础——JavaScript之事件绑定与事件对象相关推荐
- javascript的事件绑定与事件委托
昨天有位web前端爱好者问关于javascript事件绑定和事件委托的知识,小编今天就来跟大家交流一下这个知识点! 事件绑定:事件是用户或者浏览器自身进行的特定的行为,这些事件都有自己特定的名字,如: ...
- addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
- 简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序 这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
- 你真的理解事件绑定、事件冒泡和事件委托吗？
一文了解Web API中的事件绑定.事件冒泡.事件委托 引言 正文 一.事件绑定 1.事件和事件绑定时什么? 2.事件是如何实现的? 二.事件冒泡 1.事件模型 2.事件模型解析 (1)捕获阶段 (2 ...
- 事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
- 事件绑定，事件监听，事件委托
事件绑定,事件监听,事件委托 事件绑定 一个元素只能绑定一个事件 obj.on+事件名称=funciton(){} 事件监听 事件监听可以监听很多很多事件. this指向当前调用触发事件的主体对象. ...
- HTML——jQuery之事件绑定、取消事件绑定及事件委托
事件绑定 事件绑定有两种方法:分别是:.click() 和.on() <!DOCTYPE html> <html lang="en"> <head&g ...
- JavaScript基础14-day16【事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- Web前端Javascript笔记（5）事件
1. 什么是事件:事件是指发生并得到处理的操作 JavaScript中的事件是由访问web页面的用户引起的一系列操作,例如,用户的点击操作,JavaScript中有两种事件模型:内联模型,脚本模型. ...
最新文章
- 数字化为小零售商带来大商机
- 最大间隔分类器的错误理解
- bzoj4472: [Jsoi2015]salesman（树形dp）
- 算法设计与分析——动态规划——矩阵连乘问题
- java 线程安全的原因_java的多线程:java安全问题产生的原因与JMM的关系
- java多态 覆盖_Java ------ 继承、方法覆盖、多态
- android和java中常见 Exception
- LA_4670_Dominating_Patterns_(AC自动机+map)
- 动态SLIC加载(DBSLDR)激活win7
- HTML测试报告模板
- Java中进行Debug断点调试
- oracle去空格去不掉,oracle去掉空格
- 每月一书（202104）：《浪潮之巅》
- 百度新闻爬虫搜索引擎实战---爬虫篇（2）
- javascript实现汉诺塔
- 物联网信息安全复习笔记
- 零基础如何快速入门微信小游戏开发？
- splatter包安装
- Python使用Turtle画孟加拉国国旗
- 一句话保险系列——几大险种混个脸熟