1️⃣JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。

事件 具体内容 步骤
事件源 html标签 document.getElementById("box");
事件 js代码 事件源box.事件onclick = function(){ 事件驱动程序 };
事件驱动程序 对css和html的操作 关于DOM的操作

事件名

2️⃣获取事件源的方式(DOM节点的获取)

  • 获取事件源的常见方式如下:
//方式一:通过id获取单个标签
var div1 = document.getElementById("box1"); 
//方式二:通过 标签名 获得 标签数组,所以有s   
var arr1 = document.getElementsByTagName("div");   
//方式三:通过 类名 获得 标签数组,所以有s  
var arr2 = document.getElementsByClassName("hehe");  
  • 绑定事件的方式:
//方式一:直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>
//方式二:先单独定义函数,再绑定。注意上方代码的注释。绑定的时候,
//是写fn,不是写fn()。fn代表的是整个函数,而fn()代表的是返回值。
<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>

3️⃣