一：事件的概念
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
二：事件的组成：
1.事件的组成：事件是由三部分进行组成 事件源 事件类型 事件处理程序 我们将这三个称之为事件三要素
1）事件源 事件被触发的对象
var btn=document.getElementById('btn');
2)事件类型 如何触发 什么事件 比如鼠标点击(onclick)，鼠标经过，键盘按下
3)事件处理程序 通过一个函数赋值的方式完成
<body>
<button id= btn> 唐伯虎</button>
<script>
//点击一个按钮，弹出一个对话框
//完整的书写方式
// var btn = document.getElementById('btn');
// btn.onclick = function() {
// alert('鼠标单击事件');//鼠标点击事件
// }
var btn=document.getElementById('btn');
btn.onclick=function(){
// btn 是事件源 onclick是事件类型 function()是事件处理程序
alert('点秋香');
}
</script>执行事件的步骤：
1.获取事件源
2.绑定事件（注册事件）
3.添加事件处理程序
<div>123</div>
<script>
//点击div 控制台输出 我被选中了
// 1.获取事件源
var div=document.querySelector('div');
// 2.绑定事件（注册事件）
div.onclick
// 3.添加事件处理程序
div.onclick = function(){
alert('我被选中了')
}
</script>2.操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式。（注意：这些操作都是通过元素对象的属性实现的）。操作元素是重点内容，需要重点掌握, 需要不断进行复习，对操作元素部分的内容熟练掌握并且使用
1）element.innerText 从起始位置到终止位置的内容，去除了html标签，空格换行也会去掉。
2）element.innerHtml 起始位置到终止位置的全部内容，包括了HTML标签，同时保留了空格与换行符。 (这个使用的比较多，主要推荐使用element.innerHTML)
<button>点击获取时间</button>
<div class="nav">某个时间</div>
<p>222</p>
<script>
// 操作元素是重点内容，需要重点掌握, 需要不断进行复习，对操作元素部分的内容熟练掌握并且使用
// element(元素).innerText 从起始位置到终止位置的内容，去除了html标签，空格换行也会去掉。
// 1.当我们点击按钮，div里面的文字会发生变化
// 1）通过获取元素，和注册事件来获取当前的事件
// 1.获取元素
var btn= document.querySelector('button');
var div=document.querySelector('.nav');
// 2.注册事件
btn.onclick = function(){
//通过点击事件获取当前的的时间
div.innerText = '2022-8-12';
div.innerText = getDate();
}
//下面的函数是生成当前的时间信息
function getDate(){
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
//这里获取星期出现了问题
return '今天是:'+year+'年'+month+'月'+dates+'日 '+arr[day]
}
//以上是通过获取元素，然后通过点击事件获取当前的时间信息
// 2）元素可以不用通过添加事件也可以获取当前的时间
var p = document.querySelector('p');
p.innerText = getDate();
//直接在p标签的区域显示当前的时间
//element(元素).innerHtml (里面的HTML全部都要大写)起始位置到终止位置的全部内容，包括了HTML标签，同时保留了空格与换行符。
</script> innerText和innerHTML的区别：这两个属性是可读的，我们是可以获取元素里面的内容
1.innerText 不识别html标签 非标准 去除空格和换行。
2.innerHTML（主要是使用这个，因为这个是主流，是符合W3C标准的） 识别html标签 W3C标准 保留空格和换行
<div class="nav1"></div>
<div class="nav2"></div>
<p class="nav3">
我是文字
<span>666</span>
</p>
<script>
// innerText和innerHTML的区别：
// 1.innerText 不识别html标签 非标准 去除空格和换行。
var div1 = document .querySelector('.nav1');
div1.innerText='<strong>今天是：</strong> 2019'
// 2.innerHTML（主要是使用这个，因为这个是主流，是符合W3C标准的） 识别html标签 W3C标准 保留空格和换行
var div2 = document .querySelector('.nav2');
div2.innerHTML='<strong>今天是：</strong> 2019'
// 这两个属性是可读的，我们是可以获取元素里面的内容
var p1 = document.querySelector('.nav3');
console.log(p1.innerText);
console.log(p1.innerHTML);
</script> 3.改变元素属性 src、href、id、alt、title （对要求改变的数值进行重新的赋值，使他在完成事件之后，原先的属性的值得到改变
<button id="shuma">数码宝贝</button>
<button id="xing">星游记</button>
<img src="image/1.jpeg" alt="" title="数码宝贝">
<script>
// 1.修改元素属性 src title
// 1）获取元素
var shu = document.querySelector('#shuma');
var xing = document.querySelector('#xing');
var img = document.querySelector('img');
// 2)注册事件（以及处理程序）
xing.onclick=function(){
img.src='image/2.webp';
// 元素的什么属性= ，重新对他进行赋值操作，就可以改变它原有的值
// 修改了imgde src 路径的地址，达到修改的目的
// 给星游记的按钮赋值img 的src的地址，使用户点击的时候，可以找到图片的位置信息，并且在页面上进行显示出来
img.title='星游记';
// 修改图片里面title 的信息，可以根据图片的变化，变换相对应的鼠标悬浮时图片的提示信息
}
shu.onclick=function(){
img.src='image/1.jpeg';
// 给数码宝贝的按钮赋值img 的src的地址，使用户点击的时候，可以找到图片的位置信息，并且在页面上进行显示出来
img.title='数码宝贝';
}
</script>简单案例时间：分时显示不同的图片，显示不同的问候语，根据时间的不同 分为上午打开时，下午打开时以及最后的晚上打开时，页面显示不同的图片，同时显示不同的问候语
案例分析：1）根据系统时间的不同来判断，所以我们需要用到日期内置对象
2）利用多分枝语句来设置不同的图片
3）需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
4）需要一个div元素，显示不同的问候语，修改元素内容即可
<img src="image/1.jpeg" alt="">
<div>你的童年刚刚开始</div>
<script>
// 解题步骤
// 1）获取元素
var img = document.querySelector('img');
var div = document.querySelector('div');
// 2)得到当前的小时数
var date = new Date();
var h = date.getHours();
// var m=date.getMinutes();
//3)判断小时数，改变文字和图片信息
if (h < 12) {
img.src = 'image/1.jpeg'
div.innerHTML = '你的童年刚刚开始'
} else if (h < 18) {
img.src = 'image/2.webp'
div.innerHTML = '你的童年已经来到中间了'
} else {
img.src = 'image/3.webp'
div.innerHTML = '你的童年已经完结了'
}
</script>4.修改表单属性 表单属性：type、value、checked、selected、disabled （表单是否被使用）
注意点：1）input.innerHTML 这种是针对普通盒子的内容，无法修改输入框当中的信息
2）this 指向的是事件函数的调用者，这个函数的调用者是btn,所以this指向的就是btn;(后面主要使用的是this指向的方法，需要重点理解和掌握)
<button>按钮</button>
<input type="text" value="输入内容">
<!-- 当用户点击按钮，可以修改输入框当中的值，或者可以获取输入框当中的内容 -->
<script>
// 1）获取元素
var btn= document.querySelector('button');
var input = document.querySelector('input');
// 获取输入框当中的value值
console.log(input.value);
// 2)注册事件和处理程序
btn.onclick = function(){
//被操作的放在处理程序当中
// 注意点1：input.innerHTML 这种是针对普通盒子的内容，无法修改输入框当中的信息
// input.innerHTML='点击了';
// 这个是普通盒子比如div标签里面的内容
input.value='被点击了'
// 表单里面的值 文字内容是通过value值来进行更改的
// btn.disabled=true;
//如果想要某个表单被禁用，不能再点击 我们就要使用disabled 我们想要这个button 按钮被禁用
this.disabled=true;
// 注意点二
//this 指向的是事件函数的调用者，这个函数的调用者是btn，
//所以this指向的就是btn;(后面主要使用的是this指向的方法，需要重点理解和掌握)
}
</script>简单案例基础操作练习 仿京东显示密码：点击按钮将密码切换为文本框，并可以查看密码明文。
核心思路：点击按钮，把密码框类型切换为文本框就可以看见里面的密码
1.一个按钮两个状态，点击一次切换为文本框，继续点击一次切换为密码框
2.算法：利用一个flag变量，来判断flag的值，如果是0就切换为文本框，如果flag的值为1就切换为密码框
<style>
.box{
position: relative;
width: 400px;
border-bottom: 1px solid pink;
margin:100px auto;
}
.box>input{
width: 370px;
height: 30px;
border: 0;
outline: none;
/* 将input 框清除 */
}
.box>label>img{
position: absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
<body>
<div class="box">
<label for="">
<img src="image/close.png" alt="" id="img">
<!-- 闭眼的图片 -->
</label>
<input type="password" name=" " id="pwd">
</div>
<script>
// 1)获取事件：
var img = document.getElementById('img');
var pwd = document.getElementById('pwd');
// 2)注册事件和处理程序
var flag = 0;
img.onclick = function(){
// 点击一次之后，flag一定要出现变化
if(flag == 0){
pwd.type = 'text';
img.src="image/open.png"
flag = 1;
// 如果不对它进行重新赋值，flag的值就会一直是0，达不到切换的效果
// 一次点击完毕后需要重新对他进行赋值，使他能够进行变换
}else{
pwd.type = 'password';
img.src="image/close.png"
flag = 0;
}
}
</script>
</body>
扫一扫
3063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
