JS之事件
什么是事件
发生在浏览器的上事情,键盘事件,鼠标事件,表单事件
常用的事件
| 事件名称 | 描述 |
|---|---|
| onchange | HTML 元素内容改变 |
| onblur | 输入框失去焦点 |
| onfocus | 输入框获得焦点 |
| onclick | 用户点击 HTML 元素 |
| ondblclick | 用户双击HTML元素 |
| onmouseover | 用户将鼠标移入一个HTML元素中 |
| onmousemove | 用户在一个HTML元素上移动鼠标 |
| onmouseout. | 用户从一个HTML元素上移开鼠标 |
| onkeyup | 键盘弹起 |
| onkeydown | 用户按下键盘按键 |
| onkeypress | 按压键盘 |
| onload | 浏览器已完成页面的加载 |
| onsubmit | 表单提交 |
如何绑定事件
静态绑定
通过 html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 方式一 -->
<button onclick="alert('为什么点我？')">点击</button>
<!-- 方式二 -->
<button onclick="dianji()">再次点击</button>
<script type="text/javascript">
function dianji(){
alert("请不要再点击我了")
}
</script>
</body>
</html>
动态绑定
是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名 = function()这种形式赋于事件响应后的代码，叫动态注册。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">点击</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("动态点击事件");
}
</script>
</body>
</html>
事件演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">onclick事件</button><br />
<input type="text" id="input1" placeholder="onfucs"/>
<div id="div" style="border: 2px solid springgreen; width: 300px; height: 300px;">
鼠标事件
</div><br />
<input id="input2" type="text" placeholder="键盘事件"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("动态点击事件");
}
var input = document.getElementById("input1");
input.onfocus = function(){
console.log("焦点事件");
}
var lose = document.getElementById("input1");
lose.onblur = function(){
console.log("失去焦点事件");
}
var mousein = document.getElementById("div");
mousein.onmouseover = function(){
console.log("鼠标进入事件")
}
var mouseout = document.getElementById("div");
mouseout.onmouseout = function(){
console.log("鼠标出去事件")
}
var i1 = document.getElementById("input2");
var a = 0;
var b = 0;
var c = 0;
i1.onkeydown = function(){
console.log("按下: " + (++a))
}
i1.onkeyup = function(){
console.log("弹起: " + (++b))
}
i1.onkeypress = function(){
console.log("按压: " + (++c))
}
</script>
</body>
</html>
表单事件(重点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input,select {
width:500px;
height:35px;
font-size: 29px;
}
</style>
</head>
<body>
<!-- οnsubmit="return mySubmit():
函数前加return 是给onsubmit这个事件来判断是否需要将表单提交的，
true ：提交表单；false：不提交。
如果不加return，则不管函数是否生效，都会提交表单
-->
<form action="/java2212" onsubmit="return mySubmit()">
用户名<input id="i1" type="text"/><br />
密码<input id="i2" type="password"/><br />
地址<select id="s1">
<option>德玛西亚</option>
<option>诺克萨斯</option>
</select><br>
<input id="i3" type="submit" value="提交"/>
</form>
<script type="text/javascript">
var i1 = document.getElementById("i1");
// 获得焦点,一般用在注册时用于提示格式
i1.onfocus = function() {
console.log("获得焦点: 用户名6-8位");
}
// 失去焦点.一般用在表单中,校验数据
i1.onblur = function() {
console.log("失去焦点: 两次密码不一致");
}
// 内容改变事件
var s1 = document.getElementById("s1");
s1.onchange = function(){
console.log("select内容改变")
}
// 提交事件.
// 1 需要将事件绑定在form标签上
// 2 调用函数前需要加return
// 3 函数内需要定义返回值,返回true就提交表单,返回false就阻止表单提交
function mySubmit() {
/**
* 场景: 做表单提交前的校验
*/
console.log("提交啦");
// 返回true才能提交
return true;
// 返回false不提交
//return false;
}
</script>
</body>
</html>
加载事件(重点)
当我们将JS语句写在内部时，我们调用JS函数使，可能会出现一下的错误。这是为什么？我们知道页面是瀑布式加载，从上至下加载，当加载到JS函数时，可能会发现没有该函数，这时就会报错，那么该如何解决？使用加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 页面加载事件,等页面加载完再调用
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function() {
alert("点我了?")
}
}
</script>
</head>
<body>
<button id="btn">点我!!</button>
</body>
</html>
DOM操作
DOM全称是Document Object Model 文档对象模型：意思就是把文档中的标签,属性，文本，转换成为对象来管理。
操作DOM,就是对DOM树操作,可以找到某个或者某些元素,修改元素的属性内容以及样式,创建新的节点,删除节点.
查找元素
通过di查找
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">onclick事件</button><br />
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("动态点击事件");
}
</script>
</body>
</html>
通过标签查找元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>唧唧复唧唧,木兰当户织</p>
<p>不闻机杼声,惟闻女叹息</p>
<p>问女何所思,问女何所忆</p>
<script type="text/javascript">
var ps = document.getElementsByTagName("p");
console.log(ps)
// 遍历数组,获得每个对象
for(var i = 0;i < ps.length;i++) {
console.log(ps[i])
}
</script>
</body>
</html>
通过类名查找元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p class="p1">唧唧复唧唧,木兰当户织</p>
<p class="p1">不闻机杼声,惟闻女叹息</p>
<p>问女何所思,问女何所忆</p>
<script type="text/javascript">
var ps2 = document.getElementsByClassName("p1");
console.log(ps2)
// 遍历数组,获得每个对象
for(var i = 0;i < ps2.length;i++) {
console.log(ps2[i])
}
</script>
</body>
</html>
获得并设置元素的内容(重点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p><span>噫吁嚱，危乎高哉！</span></p>
<p><span>蜀道之难，难于上青天！</span></p>
<p><span>蚕丛及鱼凫，开国何茫然！</span></p>
<button onclick="changeHTML()"> 修改文本内容HTML</button>
<button onclick="changeText()"> 修改文本内容Text</button>
<script type="text/javascript">
var parr = document.getElementsByTagName("p");
for(var i = 0;i < parr.length;i++) {
// 获得标签内部内容,获得内部的内容,包括标签
console.log(parr[i].innerHTML);
}
console.log("------------------")
for(var i = 0;i < parr.length;i++) {
// 获得标签内部内容,只能获得文本内容
console.log(parr[i].innerText);
}
function changeHTML(){
for(var i = 0;i < parr.length;i++) {
// 设置内部内容,如果有标签,会解析标签
parr[i].innerHTML = "<span>好好学习</span>";
}
}
function changeText(){
for(var i = 0;i < parr.length;i++) {
// 设置内部内容,如果有标签,不解析,就当做文本内容直接展示
parr[i].innerText = "<span>天天向上</span>";
}
}
</script>
</body>
</html>
查找和设置元素属性(重点)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="i1" type="text" value="admin"/>
<button onclick="getAttributeValue()">点击获得属性值</button>
<button onclick="setAttributeValue()">点击设置属性值-李白</button>
<script type="text/javascript">
function getAttributeValue() {
var i1 = document.getElementById("i1");
// 元素对象.属性名; 获得属性值
console.log(i1.id);
console.log(i1.type);
console.log(i1.value);// 重要!!!
}
function setAttributeValue() {
var i1 = document.getElementById("i1");
i1.value = "李白"; // 重要!!!将来更新数据时,给输入框回显数据
i1.type = "password";
}
</script>
</body>
</html>
创建元素
document.createElement("标签名")
创建文本节点
document.createTextNode("文本内容")
追加元素
元素对象.appendChild(对象);
删除元素
元素对象.removeChild(对象);
练习：动态添加和删除图书列表内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作业1</title>
<script type="text/javascript">
function add(){
//创建元素
var li = document.createElement("li");
//获取输入框内的值
var val = document.getElementById("in").value;
//创建文本节点
var text = document.createTextNode(val);
//将文本装入子标签内
li.appendChild(text);
if (val == '') {
alert("内容不能为空！");
} else{
//将子标签添加到父标签内
document.getElementById("ul1").appendChild(li);
document.getElementById("in").value = "";
}
}
function del(){
//获取父标签
var farther = document.getElementById("ul1");
//获取子标签
var son = document.getElementsByTagName("li");
// 获取输入框内的值
var val = document.getElementById("in").value;
if (val == '') {
alert("删除内容不能为空")
} else {
for (var i = son.length-1; i >= 0; i--) {
if (son[i].innerText == val ) {
farther.removeChild(son[i]);
document.getElementById("in").value = "";
}
}
alert("删除成功");
}
}
</script>
</head>
<body>
<input type="text" id="in" placeholder="请输入书籍名称"/>
<button id="add" onclick="add()">添加</button>
<button id="del" onclick="del()">删除</button>
<ul id="ul1">
<li>九阴白骨爪</li>
</ul>
</body>
</html>
练习：实现下拉框的二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var city = {
hn:["郑州","洛阳","南阳","驻马店"],
bj:["朝阳区","海淀区","丰台区"],
sh:["ss","xx","aa"],
}
function change(){
var qxselect = document.getElementById("qx");
qxselect.innerText = "";
//获取<option>标签中的value属性
var cityval = document.getElementById("city").value;
//console.log(cityval);
//通过获取的value属性来找到它对应的区/县信息
var qxval = city[cityval];
//console.log(qxval);
//遍历区县信息
for (var i = 0; i < qxval.length; i++) {
//创建<option>标签对象
var option =document.createElement("option");
//获取当前元素封装为文本节点
var text = document.createTextNode(qxval[i]);
//将文本信息放入到option标签中
option.appendChild(text);
//将option标签存放到另一个<select>标签中
qxselect.appendChild(option);
}
}
</script>
</head>
<body>
省：
<select id="city" onchange="change()">
<option value="hn">河南</option>
<option value="bj" >北京</option>
<option value="sh">上海</option>
</select>
县/区：
<select id="qx">
<option>--请选择--</option>
</select>
</body>
</html>
1378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
