目录

• 一、四个常用事件
• 二、点击切换图片效果（简单版）
• 三、事件三要素
• 四、js的分离写法
• 五、点击按钮获取标签内容
• 六、根据标签名获取多个元素
• 七、根据标签名修改元素内容

一、四个常用事件

点击：

html:点击
js:function dj(){alert("点击");
}

双击：

html:双击
js:function sj(){alert("双击");
}

鼠标经过：

html:鼠标经过
js:function jg(){alert("鼠标经过");
}

鼠标离开：

html:鼠标离开
js:function lk(){alert("鼠标离开");
}

二、点击切换图片效果（简单版）

css:

*{margin: 0;padding: 0;
}
ul{list-style: none;
}
.box{width: 750px;height: 140px;position: relative;/* 相对定位 */
}
.box ul{position: absolute;/* 绝对定位 */right: 10px;bottom: 10px;
}
.box ul li{float: left;width: 15px;line-height: 15px;background-color: pink;text-align: center;margin: 5px;cursor: pointer;/* 小手样式 */
}

html:

1
2

js:

function fun2(){document.getElementById("pic").src="images/02.jpg";
}
function fun1(){document.getElementById("pic").src="images/01.jpg";
}

三、事件三要素

1.事件源：被触发的对象，举个例子：如上的事件源为li；
2.事件：用户的操作，比如：点击 onclick，鼠标经过 onmouseover…
3.事件处理程序：事件触发后要执行的代码（用户要做什么事情），如二中的事件处理程序是切换图片；

四、js的分离写法

要求实现结构html和行为、动画js相分离：
html:

内嵌式

js:

var btn=document.getElementById("btn");
btn.onclick=function(){alert("html与js相分离");
}

注： js代码需要放在html代码中要执行的代码前面，否则会获取不到相应元素，一般来说可直接放到上方；若想要不考虑js位置，需要将js放在js入口函数中；
入口函数：window.onload { }

公式：

事件源.事件 = function（）{执行代码；
}

五、点击按钮获取标签内容

内容效果
    

总结： getElementsByTagName(“标签”)----获取得的元素是一个集合(伪数组)。

七、根据标签名修改元素内容

豹子头林冲
黑旋风李逵
及时雨宋江
小李广花荣
双鞭呼延灼
    
豹子头林冲
黑旋风李逵
及时雨宋江
小李广花荣
双鞭呼延灼
    

注意： document.getElementById(“dv1”)后面直接写获取标签名getElementsByTagName(“p”)。