事件的三要素
事件的三要素:事件源、事件、事件驱动程序。比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯的开和关。再比如,网页上弹出一个广告,我点击右上角的X,广告就关闭了。这件事情里,事件源是:X。事件是:onclick。事件驱动程序是:广告关闭了。于是可以总结出:谁引发的后续事件,谁就是事件源。
- 事件源:引发后续事件的html标签。
- 事件:js已经定义好了。
- 事件驱动程序:对样式和html的操作。也就是DOM。
(一)获取事件源的方式
获取事件源的常见方式如下:
var div1 = document.getElementById("box1"); //方式一:通过id获取单个标签
var arr1 = document.getElementsByTagName("div1"); //方式二:通过 标签名 获得 标签数组,所以有s
var arr2 = document.getElementsByClassName("hehe"); //方式三:通过 类名 获得 标签数组,所以有s
...等等
(二) 绑定事件的方式
- 方式一:直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
- 方式二:先单独定义函数,再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getElementById("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意,这里是fn,不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
- 方式三:行内绑定
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
注意:第一行代码,绑定时,是写的"fn()",不是写的"fn"。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串。
(三)事件驱动程序
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script>
var div = document.getElementById("box");
//点击鼠标时,原本粉色的div变大了,背景变红了
div.onclick = function () {
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
}
</script>
注意:
- 在js里写属性值时,要用引号
- 在js里写属性名时,是backgroundColor,不是CSS里面的background-Color,应使用驼峰命名。
附:常见事件如下