js事件基础
事件的组成:
- 事件源
- 事件类型
- 事件处理程序
事件源:事件被触发的对象 例如:按钮
事件类型:如何触发 例如:鼠标点击(onclick) 鼠标经过 键盘摁下
事件处理程序: 通过一个函数赋值的方式完成
常见的鼠标事件
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件程序(采取函数赋值形式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = 'div1'>huahua</div>
<script>
var div1 = document.getElementById('div1'); //获取数据
div1.onclick = function (){
console.log('花花贼可爱')
} //绑定事件 添加事件程序
</script>
</body>
</html>
操作元素
元素内容修改 innerText innerHTML
innerText与innerHTML
共同点:
都能改变元素的内容
不通点:
innerText不识别html的标签 去除换行和空格
innerHTML支持html标签的 保留空格和换行的
innerHTML使用较多 w3c标准的
实现点击按钮显示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>刷新直接显示时间</p>
<script>
//获取按钮
var btn = document.querySelector('button');
var div = document.querySelector('div');
//注册事件
btn.onclick = function(){
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();
var h = date.getHours();
h < 10 ? '0' + h : h;
var m = date.getMinutes();
m < 10 ? '0' + m : m;
var s = date.getSeconds();
s < 10 ? '0' + s : s;
return year + '年 ' + month + '月 ' + dates + '日 ' + '星期' + arr[day] + ' ' + h + ':' + m + ':' + s ;
}
//刷新直接在p标签中显示当前时间
var p = document.querySelector('p');
p.innerText = getDate();
</script>
</body>
</html>
修改元素属性
可以通Element.属性
的方法改变元素的属性
如img的src title 等
根据系统时间的不同 进入页面发生变化 同时提示问候语
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="" alt="">
<div></div>
<script>
//根据系统不同时间来判断,所以需要用到日期内置对象
//利用多分支语句来设置不同的图片
//需要通过时间修改图片,要操作元素的src属性
//需要根据时间修改问候语内容
var date =new Date;
var h = date.getHours();
var img = document.querySelector('img');
var div = document.querySelector('div');
console.log(h);
if(h < 12){
i