API之注册事件及应用
目录
- 注册事件
- 案例之点击按钮切换图片
- 非表单元素的属性
- 案例
- 点击按钮div的显示和隐藏
- 切换照片
- 点击一张照片，在当前页面显现出大图
- innerHTML和innerText的区别
- innerText的兼容性处理
- 案例
- 表单元素的属性
- 案例
- 给文本框赋值
- 检测用户名
- 设置下拉框中的选中项
- 搜索文本框
- 全选和反选
- 案例
- 自定义属性操作
注册事件
- 获取页面元素
- 触发事件
案例
在body标签中定义一个input标签，和一个img标签，然后在script中，先给获取要操作的页面元素，然后给input标签设置触发事件，因为是获取点击事件，所以用事件源（这里是btn）调用onclick属性（触发事件都是由on开头），然后给写一个匿名函数赋值给btn.onclick; 所以以后每次点击按钮时都会执行function内的内容
//获取页面元素
var btn = document.getElementById('btn');
var mv = document.getElementById('mv');
//定义一个变量记录照片的状态
flag = 1;
//触发事件
btn.onclick = function() {
if (flag === 1) {
//mv是个伪数组，所以可以用对象的方法改变mv内的属性
mv.src = 'images/b.jpg';
flag = 2; // 让下一次点击时可以切换回上一张
} else if (flag === 2) {
mv.src = 'images/a.jpg';
flag = 1;
}
}
非表单元素
- href
- title
- id
- src
- className
// 获取对象元素
var link = document.getElementById('link');
var mv = document.getElementById('mv');
//打印DOM对象元素的属性值
console.log(link.id); // link
console.log(link.href); // https://www.baidu.com/
console.log(link.title); //我是百度
console.log(mv.src); //file:///C:/Users/Administrator/Desktop/front-end%20learning/2019.05.20/images/1.jpg
console.log(mv.alt); //beauty
console.log(link.id); //link
//改变DOM对象的属性值
link.id = 'love';
mv.id = 'henious';
案例
点击按钮div的显示和隐藏
-步骤
在html内定义一个按钮和一个div盒子，分别给他们设置id名，并给div盒子设置背景颜色。先获取页面元素，然后给button设置状态。 当点击按钮后，我们要对盒子进行操作，所以我们要获取div对象。获取完div对象之后，我们应该要判断当前的div盒子是显示的还是隐藏的（我们默认刚进入网页时，盒子是显示的），这时我们便要定义一个Boolean变量（isShow）来帮我们记录div的状态。然后进入判断， 如果盒子是显示的，当我们点击按钮后，我们应该让盒子隐藏起来，并且改变button的value的值为显示，然后改变isShow的值为false，如果盒子是隐藏的，那么我们应该让盒子显示出来，改变button的value的值为隐藏，然后改变isShow的值为true
//获取元素
var btn = document.getElementById('btn');
//给按钮注册事件
//isshow 记录了box的状态，true显示， false 隐藏
var isShow = true;
btn.onclick = function() {
var box = document.getElementById('box');
if (isShow) {
box.className = 'hidden';
btn.value = '显示';
isShow = false;
} else {
box.className = 'show';
btn.value = '隐藏';
isShow = true;
}
}
切换照片
- 步骤
- 先在网页中生成一个button和一个图片
- 获取button和img的页面元素
- 定义一个变量记录照片状态，让它点击按钮时可以来回切换
- 触发事件
//获取页面元素
var btn = document.getElementById('btn');
var mv = document.getElementById('mv');
//定义一个变量记录照片的状态
var flag = 1;
//触发事件
btn.onclick = function() {
if (flag === 1) {
//mv是个伪数组，所以可以用对象的方法改变mv内的属性
mv.src = 'images/b.jpg';
flag = 2; // 让下一次点击时可以切换回上一张
} else if (flag === 2) {
mv.src = 'images/a.jpg';
flag = 1;
}
}
点击一张图片在当前页面出现大图
-案例描述
先在html中生成一div，这个div内有4个a标签，每个a标签都有一个img标签。在div外再定义一个img标签，用来显示点击a标签时，a标签里面的img标签里的图片会显示在此img标签中。再设一个p标签，p标签的内容会随着点击a标签的变化而变化
- 步骤
- 获取div内所有的a标签
- 给所有a注册事件
- 触发事件
//获取元素 获取到所有的a标签
var gallaryShow = document.getElementById('gallaryShow');
var links = document.getElementsByTagName('a');
//给所有的标签a注册事件
for (var i = 0; i < links.length; i++) {
//所有的a标签对应的元素
var link = links[i];
//注册事件
link.onclick = function() {
//获取占位大的img标签
var image = document.getElementById('image');
image.src = this.href;
var des = document.getElementById('des');
des.innerText = this.title;
return false;
}
}
innerHTML和innerText的区别
- innerHTML ： 会把标签和文本一起输出
- innerText ： 输出纯文本
var hi = document.getElementById('hi');
console.log(hi.innerHTML);// <span>hello world</span>
console.log(hi.innerText); //hello world
innerText的兼容性处理
- 如何知道浏览器是否支持元素的某个属性
- 用console.log(typeof ) 来测试，当此属性存在时返回该属性的类型，若属性不存在是，返回undefined
var box = document.getElementById('box');
function getInnerText(element) {
// 判断当前浏览器 是否支持元素的innerText属性，支持innerText 使用element.innerText获取内容
// 如果不支持innerText属性，使用element.textContent获取内容
if (typeof element.innerText === 'String') {
return element.innerText;
} else {
return element.textContent;
}
}
console.log(getInnerText(box));
表单属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
案例
给文本框赋值
// 获取元素
var btn = document.getElementById('btn');
// 注册事件
btn.onclick = function () {
var txt = document.getElementById('txt');
console.log(txt.value);
console.log(txt.type);
// 当html中的标签的属性，只有一个值的时候
// DOM中对应的元素的属性值是布尔类型
console.log(txt.disabled);
txt.disabled = true;
}
var btn1 = document.getElementById('btn1');
btn1.onclick = function () {
var txt = document.getElementById('txt');
// 设置文本框中的内容
txt.value = 'hello world';
}
检测用户名
//获取按钮元素
var btnLogin = document.getElementById("btnLogin");
//给按钮注册事件
btnLogin.onclick = function() {
//获取用户名文本框元素
var userName = document.getElementById('userName');
// 检测用户名是否是3-6位，密码是否是6-8位，
if (userName.value.length < 3 || userName.value.length > 6) {
userName.className = 'highlight';
return;
} else {
userName.className = " ";
}
//获取密码文本框元素
var userPassWord = document.getElementById('userPassWord');
//密码是否是6-8位 如果不满足要求高亮显示文本框
if (userPassWord.value.length < 6 || userPassWord.value.length > 8) {
userPassWord.className = 'highlight';
return;
} else {
userPassWord.className = " ";
}
console.log('执行登录');
}
当点击按钮的时候，获取所有文本框的值，并使用 | 分割输出
//当页面加载完毕，给所有的文本框赋值
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//根据type属性判断是否是文本框
if (input.type === 'text') {
input.value = i;
}
}
//当点击按钮时，获取所有文本框的值，并且用|分割
var btn = document.getElementById('btn');
btn.onclick = function() {
var array = [];
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//判断是文本框
if (input.type === 'text') {
array.push(input.value);
}
}
console.log(array.join('|'));
}
设置下拉框中的选中项
//给按钮注册事件
var btn = document.getElementById('btn');
//注册触发事件
btn.onclick = function() {
//获取所有的option
var selectFoods = document.getElementById('selectFoods');
var options = selectFoods.getElementsByTagName('option');
//随机生成索引
var randomIndex = parseInt(Math.random() * options.length);
// 4 根据索引获取option，并让option选中
var option = options[randomIndex];
option.selected = true;
}
搜索文本框(获取焦点和失去焦点)
<body>
<input type="text" value="请输入文字" id="txt">
<input type="button" value="搜素" id="btn">
<script>
var txt = document.getElementById('txt');
//获取焦点时，把文本框的value值置空
txt.onfocus = function() {
if (this.value === '请输入文字') {
this.value = '';
}
}
//失去焦点， 把文本框的value值设为请输入文字
txt.onblur = function() {
if (this.value === '') {
this.value = '请输入文字';
}
}
</script>
</body>
全选和反选
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
var j_tb = document.getElementById('j_tb');
var inputs = j_tb.getElementsByTagName('input');
// 1 全选
// 1.1 获取父checkbox，注册点击事件
var j_cbAll = document.getElementById('j_cbAll');
j_cbAll.onclick = function () {
// 1.2 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
// 让子的checkbox的选中状态，和父checkbox的选中状态一致
input.checked = this.checked;
}
}
}
// 2 当点击子的checkbox，如果所有的子的checkbox都被选中了，让父的checkbox也选中
// 如果有一个子的checkbox没有被选中，父的checkbox也不被选中
// 此处的循环，是遍历所有子的checkbox，注册点击事件
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
// 结束当前循环，继续下一次循环
continue;
}
// 给子的checkbox注册点击事件
input.onclick = function () {
checkAllCheckBox();
}
}
// 判断父的checkbox的状态 封装成函数
function checkAllCheckBox() {
// 假设所有的子的checkbox都被选中了
var isAllChecked = true;
// 判断是否所有的子的checkbox都被选中了
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'checkbox') {
continue;
}
// 判断当前的所有checkbox是否都被选中
if (!input.checked) {
isAllChecked = false;
}
}
// 设置父的checkbox的状态
j_cbAll.checked = isAllChecked;
}
// 3 反选
// 3.1 给反选按钮注册点击事件
var btn = document.getElementById('btn');
btn.onclick = function () {
// 3.2 找到所有的子的checkbox，让其反选
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
// 判断是否是checkbox
if (input.type !== 'checkbox') {
continue;
}
// 让子的checkbox反选
input.checked = !input.checked;
// 设置父的checkbox的状态
checkAllCheckBox();
}
}
</script>
By for now!
