js学习-10(事件)
什么是事件
事件:
指的是文档或浏览器窗口中发生的一些特定的交互 瞬间。对于web应用,主要的事件有:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
JavaScript是以事件驱动为核心 的一门语言。JavaScript和HTML之间的交互式通过事件实现的。
事件的三要素:
事件的三要素:
事件源、事件、事件驱动程序。
事件源: 引发后续事件的html标签。
事件: js所定义好的。比如:鼠标单击onclick、鼠标双击ondbclick、获得焦点onfocus等等。
事件驱动程序: 对样式和html的操作,即DOM。
常见的事件:
时间名 | 说明 |
---|---|
onclick | 鼠标单击 |
ondbclick | 鼠标双击 |
onkeyup | 按下并释放键盘上的一个键触发 |
onchange | 文本内容或下拉菜单中的选项发生改变 |
onfocus | 获得焦点,表示文本框等获得鼠标光标 |
onblur | 失去焦点,表示文本框等失去鼠标光标 |
onmouseover | 鼠标悬停,即鼠标停留在图片等的上方 |
onmouseout | 鼠标移出,即离开图片等所在的区域 |
onload | 网页文档加载事件 |
onunload | 关闭网页时 |
onsubmit | 表单提交事件 |
onreset | 重置表单时 |
事件的代码书写步骤:【重要!】
(1)获取事件源:document.getElementById(“box”); document.querySelect(“box”)
(2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
(3)书写事件驱动程序:关于DOM的操作。
1、获得事件源的方式
获得事件源的常见方式:
2、绑定事件的方式
方式一:直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.querySelector("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
方式二:先单独定义函数,再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.querySelector("#box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意,这里是fn,不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
注意上方代码的注释。绑定的时候,是写fn,不是写fn()。fn代表的是整个函数,而fn()代表的是返回值。
方式三:行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
注意第一行代码,绑定时,是写的"fn()"
,不是写的"fn"
。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串。
3、事件驱动程序
可以修改标签的属性和样式。
t
}
.zhezhao{
display: none;
width: 150px;
height: 200px;
background: rgba(255,255,0,0.5);
position: absolute;
}
.right{
width: 300px;
height: 400px;
display: none;
background-image: url(img/1.jpg);
background-size: 600px 800px;
background-position: 0 0;
}
效果如下: