页面中通常会有有条件才能触发的版块，例如鼠标点击才能触发另一个对话框，鼠标移动上去会让图片滚动（轮播图），再或者是各种下拉菜单等等，这些都需要事件来完成
利用 Java Script 可以创建动态页面，事件则是可以被其侦测到的行为，可以简单理解为一个 触发 -- 响应 机制
事件由三部分组成（事件三要素）：
事件源：事件被触发的对象，可以是一个按钮，也可以是一行文字等等页面上的内容
事件类型：即如何触发这个事件，可以是鼠标点击，或者鼠标移动等等
事件处理程序：通常为通过函数赋值来完成
其中事件类型种类很多：鼠标点击左键触发（onclick），鼠标经过触发（onmouseover），鼠标离开触发（onmouseout），鼠标移动触发（onmousemove）......
此文我们利用onclick来完成一个基本的事件案例
执行事件的步骤：
1、获取事件源
var ele=document.getElementById('an');
2、绑定事件 / 注册事件
ele.onclick
3、添加事件处理程序
ele.onclick=function()
{
alert('这是一个事件');
}
完整执行事件代码：
<body>
<button id="an">这是一个按钮</button>
<script>
var ele=document.getElementById('an');
ele.onclick=function(){
alert('这是一个事件');
}
</script>
</body>
一：修改元素内容
修改元素内容有 innerText 和 innerHTML 两种方式，两者之间的区别在于是否可以识别 HTML 标签，innerText 不识别 HTML 标签，innerHTML 可以识别 HTML 标签
innerText：
（只是简单改变元素内容的话两者效果是一样的）
<body>
<div>这里有一只小鸟</div>
<script>
var div1=document.querySelector('div');
div1.onclick=function(){
div1.innerText='其实是一只小狗';
}
</script>
</body>
结果为点击 ‘这里有一只小鸟’ 后元素内容会变成 ‘其实是一只小狗’
如果想在改变元素内容时增加操作，例如加一个 strong 标签，则 innerText 不会识别该 strong 标签，innerHTML 可以识别并产生效果
<body>
<div>这里有一只小鸟</div>
<script>
var div1=document.querySelector('div');
div1.onclick=function(){
div1.innerText='<strong>其实是一只小狗</strong>';
}
</script>
</body>
innerText 不但不会识别HTML标签，还会将标签打印到页面中
如果是 innerHTML 则可以识别并产生实际效果
var div1=document.querySelector('div');
div1.onclick=function(){
div1.innerHTML='<strong>其实是一只小狗</strong>';
}
二：修改元素属性
经常用于 src 属性，title 属性，href 属性 等等，用法为 element.src=‘............’
<body>
<img src="./登录/密码隐藏 (2).png" alt="" id="img1">
<script>
var img=document.getElementById('img1');
var flag=0;
img.onclick=function(){
img.src="./登录/密码显示.png";
}
</script>
</body>
