事件基础
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为(触发---响应机制)
网页中每个元素都可以产生某些可以触发JavaScript的事件
- 事件是由三部分组成的:事件源、事件类型、事件处理程序(事件三要素)
事件源
:触发事件的对象事件类型
:如何触发,什么事件(鼠标点击、鼠标经过、键盘按下等)事件处理程序
:通过一个函数赋值的方式完成
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采用函数赋值形式)
常用的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick |
鼠标点击左键触发 |
onmouseover |
鼠标经过触发 |
onmouseout |
鼠标离开触发 |
onfocus |
获得鼠标焦点触发 |
onblur |
失去鼠标焦点触发 |
onmousemove |
鼠标移动触发 |
onmouseup |
鼠标弹起触发 |
onmousedown |
鼠标按下触发 |
操作DOM
JavaScript的DOM操作可以改变网页的内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等
- 改变元素内容
-
innerText
:从起始位置到终止位置的内容,但它除去html
标签,同时空格和换行也会去掉 -
innerHTML
:从起始位置到终止位置的全部内容,包括html
标签,同时保留空格和换行
-
<button>显示当前系统时间</button>
<div>点击按钮显示系统时间</div>
<p>直接显示系统时间</p>
<script>
// 点击按钮,div里面显示系统时间
// 获取元素
let btn = document.querySelector('button'),
div = document.querySelector('div');
// 绑定事件
btn.onclick = function() {
div.innerHTML = getDate();
}
// 获取当前系统时间
function getDate() {
let date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
dates = date.getDate(),
arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',],
day = date.getDay();
return '今天是:' + year + '年' + month + '月' + dates + '日' + arr[day];
}
// 元素不添加事件
// 页面加载直接显示当前系统时间
let p = document.querySelector('p');
p.innerHTML = getDate();
</script>
innerText
和innerHTML
的区别:
这两个属性是可读写的,可以获取元素里面的内容
innerText
不会识别html标签(非标准),去除换行和空格innerHTML
能识别html标签(W3C标准),保留空格和换行
常用元素的属性操作
innerHTML
、innerText
改变元素内容src
、href
id
、alt
、title
<!-- 通过点击按钮变换元素属性样式 -->
<button id="red">红色</button>
<button id="blue">蓝色</button>
<div style="width: 200px; height: 200px; background-color: red;" title="红色"></div>
<script>
// 修改元素属性
// 获取元素
let red = document.getElementById('red'),
blue = document.getElementById('blue'),
div = document.querySelector('div');
// 绑定事件
blue.onclick = function () {
div.style.backgroundColor = 'blue';
div.title = '蓝色';
}
red.onclick = function () {
div.style.backgroundColor = 'red';
div.title = '红色';
}
</script>
表单元素的属性操作
利用DOM可以操作如下表单元素的属性
type
、value
、checked
、selected
、disabled
等
<button>点击</button>
<input type="text" value="输入内容">
<script>
// 获取元素
let btn = document.querySelector('button'),
input = document.querySelector('input');
// 绑定事件 处理程序
but.onclick = function() {
// 表单里面的值是通过value来修改的
input.value = '被点击了';
// 如果想要某个按钮被禁用,不能再次点击了 用disabled
// btn.disabled = true;
this.disabled = true;
// this指向函数的调用者btn
}
</script>
样式属性修改
通过JS修改元素的大小、样式和属性
element.style
行内样式操作
- JS里面的样式采取驼峰命名法,例如:
fontSize
、backgroundColor
- JS修改
style
样式操作,产生的是行内样式,权重比较高element.className
类名样式操作
- 如果操作样式比较多,可以采取操作类名方式更改元素样式
<div style="width:100px; height:100px; background-color:wheat;">文本</div>
<script>
// 使用 element.style 获得修改属性样式
let div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = 'purple';
this.style.fontSize = '20px';
this.style.color = '#fff';
this.style.marginTop = '100px';
}
</script>
<!-- 使用另一种方法修改添加属性比较简单,可以设置一个类名,然后在点击div的时候,把类名赋给它 -->
<!-- 简单地说:可以通过修改元素的类名来修改元素样式 -->
获得焦点
onfocus
、失去焦点onblur
<input type="text" value="手机">
<script>
let inp = document.querySelector('input');
inp.onfocus = function() {
// 获得焦点
// 获得焦点的时候,如果里面的值是手机则清空里面的内容
if(this.value =='手机'){
this.value = '';
}
}
inp.onblur = function() {
// 失去焦点
// 失去焦点的时候如果内容为空,则改为默认值‘手机’
if(this.value ==''){
this.value = '手机';
}
}
</script>
排他思想
如果有同一组元素,我们要实现某一个元素的某种样式,需要用到循环的排他思想算法:
- 所有元素全都清除掉默认样式(干掉其他人)
- 给当前元素设置样式(留下自己)
- 注:顺序不能颠倒,首先排除其他人,再设置自己的样式
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
let btns = document.querySelectorAll('button');
for(let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
for(let i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'blue';
}
}
</script>
网友评论