js事件
1.什么是事件
一件事情发生了，对其进行处理或者响应。
2. 事件的三要素
事件源，事件类型，事件处理
比如：点击右上角的X，页面关闭。 事件源：X，事件类型：点击 事件处理：页面关闭。
谁引发的后续事件，谁就是事件源。
事件源：DOM节点（一般为元素节点）
事件类型
事件处理 函数（代码块）
事件类型：
1.鼠标事件
2.键盘事件
3.浏览器事件
4.表单事件
鼠标事件
click == 鼠标左键单击
dbclick == 鼠标左键双击
contextmenu == 鼠标右键单击
mousewheel == 鼠标滚动
mousedown == 鼠标单击事件 不管是左键还是右键，还是滚动都可以触发
mouseup == 鼠标抬起
mousemove == 鼠标移动
mouseover == 鼠标移入（会进行事件传播）
mouseout == 鼠标移出
mouseenter == 鼠标移入（不会进行事件传播）
mouseleave == 鼠标移出
<script>
window.onload = function() {
var box = document.getElementById("box");
// box.ondblclick = function() {
// console.log("鼠标双击");
// }
// box.onclick = function() {
// console.log("鼠标单击");
// }
// box.oncontextmenu = function() {
// console.log("鼠标右键单击");
// }
// box.onmousewheel = function() {
// console.log("鼠标滚动");
// }
// box.onmousedown = function() {
// console.log("鼠标按下");
// }
box.onmouseup = function() {
console.log("鼠标抬起");
}
box.onmousemove = function() {
console.log("鼠标移动");
}
// box.onmouseover = function() {
// console.log("鼠标移入");
// }
// box.onmouseout = function() {
// console.log("鼠标移出");
// }
// box.onmouseenter = function() {
// console.log("鼠标移入");
// }
// box.onmouseleave = function() {
// console.log("鼠标移出");
// }
}
</script>
</head>
<body>
<div id="box"></div>
</body>
用户改变域的内容
onchange
<body>//效果当下拉框的内容发生改变使触发该事件
城市:
<select id="city">
<option>请选择城市</option>
<option>上海</option>
<option>北京</option>
</select>
<script>
var city = document.querySelector("#city");
city.onchange = function() {
console.log("内容改变了..")
}
</script>
</body>
键盘事件
不是所有的元素都能触发
表单元素(选中效果)，document ,window
keydown
键盘按下
keyup
键盘抬起
keypress
键盘按下
在文本框中输入的内容必须与你按下的键是一致的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: brown;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
box.onkeydown = function(){
console.log("键盘按下");
}//这个元素不能触发
document.onkeydown = function(){
console.log("键盘按下");
}
// window.onkeydown = function(){
// console.log("键盘按下");
// }
// var inp = document.querySelector("input");
// inp.onkeypress = function(){
// console.log("键盘按下");
// }
// inp.onkeyup = function(){
// console.log("键盘抬起");
// }
}
</script>
</head>
<body>
<div id="box"></div>
<input type="text">
</body>
</html>
浏览器事件
window事件
load 页面加载完毕
scroll 页面滚动
resize 窗口尺寸改变
offline 网络断开
online 网络恢复
<style>
body{
height: 2000px;
}
</style>
</head>
<script>
var i = 0;
window.onscroll = function(){
console.log(i++);//有滚动轴情况下，只要滚就会触发
}
window.onresize = function(){
console.log("页面尺寸改变");//当将浏览器窗口变小的时候
}
// window.onoffline = function(){
// console.log("你家网断了");
// }
// window.ononline = function(){
// console.log("你家网恢复了");
// }
</script>
<body>
</body>
表单事件
表单事件主要是表单元素和form标签的
change 表单内容发生改变时，而且已经失去焦点时触发。
input 表单输入事件
focus 获取焦点
blur 失去焦点
submit 表单提交
reset 表单重置
<script>
window.onload = function(){
var inp = document.querySelector("input");
var form = document.querySelector("form");
inp.onchange = function(){
console.log("表单内容发生了变化");
}
inp.oninput = function(){
console.log("你输入了内容");
}
inp.onfocus = function(){
console.log("获取了焦点");
this.style.backgroundColor = "red";
}
inp.onblur = function(){
console.log("失去了焦点");
this.style.backgroundColor = "blue";
}
// form.onsubmit = function(){
// alert("表单提交了");
// }
// form.onreset = function(){
// // alert("表单重置");
// console.log("表单重置");
// }
}
</script>
</head>
<body>
<form action="">
<input type="text" value="">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
表单元素的另外三种获取方法(不用记,知道就好,不用)
</head>
<!-- 表单元素的另外三种获取方法
1 document.表单的name名;
2 document.forms["表单的name名"];
3 document.forms[索引]; -->不用记这三种不用
<body>
<form name="form1" action="https://www.baidu.com/">表单
<input type="text">
</form>
</body>
<script>
// var form1 = document.form1;
//var form1 = document.forms["form1"];
//var form1 = document.forms[0];
console.log(form1);
</script>
获取表单内容并提交的三种方式(优先用第一种)
<body>
第一种方式/使用的是普通按钮的提交 获取表单.submit();这个方法提交
<form action="https://www.baidu.com/" id="biao">
姓名:<input id="nei" type="text">
<input type="button" value="提交表单1" οnclick="tijiao()"></input>
</form>
<hr>第二种方式使用的是submit加οnclick="return 函数()"函数运行为真时提交,为假时不提交
<form action="https://www.baidu.com/">
姓名:<input id="nei2" type="text">
<input type="submit" value="提交表单2" οnclick="return tijiao()"></input>
</form>
<hr>第三种方式和第二种差不多,提交功能函数书写位置不同,原理一样
<form action="https://www.baidu.com/" οnsubmit="return tijiao()">
姓名:<input id="nei3" type="text">
<input type="submit" value="提交表单3"></input>
</form>
</body>
<script>
function tijiao() {
var nei = document.getElementById("nei").value; //获取表单内容
if (nei == null || nei.trim() == '') {
return; //判断表单内容为空时不提交
}
var biao = document.getElementById("biao"); //获取到表单元素节点
biao.submit(); //提交表单,这一步才是提交了表单
}
//-----二和三方法车不多,只是赋予提交功能函数的书写位置不同-------利用的是return false不提交true提交这个特性-------------------------------------------------
function tijiao() {
var nei = document.getElementById("nei2").value;
if (nei == null || nei.trim() == '') {
return false;
} else {
return true;
}
}
//------------------------------------------------------
function tijiao() {
var nei = document.getElementById("nei3").value;
if (nei == null || nei.trim() == '') {
return false;
} else {
return true;
}
}
</script>
事件绑定方式
1.行内式
在标签中直接通过on+事件类型 属性 去绑定事件
<div id="box" onclick="show()"></div>
2.内联式
（1）直接绑定匿名函数
（2）先定义函数，再去绑定
var box = document.getElementById("box");
box.onclick = function(){
alert("直接绑定匿名函数");
}
监听
addEventListener
语法：事件源.addEventListener(“事件类型”,事件处理函数);
<script>
window.onload = function() {
var btn = document.querySelector("button");
console.log(btn);
btn.addEventListener('click', function() {
alert("监听弹出..")
})
}
</script>
/*<script>也可以这样写
window.onload = function() {
var btn = document.querySelector("button");
console.log(btn);
btn.addEventListener('click', dian)
function dian() {
alert("监听弹出..")
}
}
</script>*/
</head>
<body>
<button>点击我</button>
</body>
addEventListener 第三个参数为true的话 表示捕获。 false 表示 冒泡。
<style>
#div1{
background-color: #27ae60;
}
#div2{
background-color: #e67e22;
}
#div3{
background-color: #e74c3c;
}
#div1,#div2,#div3,#other{
padding: 50px;
}
</style>
<script>
window.onload = function(){
var boxs = document.getElementsByTagName("div");
for (var i = 0; i < boxs.length; i++) {
boxs[i].dataset.index = i+1;
boxs[i].addEventListener('click',function(){
alert("div" + this.dataset.index);
},false) //你写的监听默认是冒泡状态,可以改为true为捕获(从大范围到小)
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
使用监听，可以给同一个事件类型绑定多个事件处理函数。
多个事件处理函数执行顺序是按照绑定顺序来的
先绑定先执行
<script>
window.onload = function() {
var btn = document.querySelector("button");
console.log(btn);
btn.addEventListener('click', ji);//先绑定,所以弹出2 输出时在 1的前面
btn.addEventListener('click', dian);
function dian() {
console.log("监听弹出1..");
}
function ji() {
console.log("监听弹出2..")
}
}
</script>
</head>
<body>
<button>点击我</button>
</body>
在IE低版本不支持
attachEvent()
IE低版本支持
语法：事件源.attachEvent(“on+事件类型”,事件处理函数);
多个事件处理函数的执行顺序是按照绑定顺序的倒序来的
先绑定后执行
事件解绑
对于非监听方式，可以直接将null赋值。(也叫事件解绑)
box.onclick = function(){
alert("您已成功充值1000万！");
box.onclick = null;//弹一次就会停止
}
box.onclick = null;//放外面一次都不会弹
对于监听方式绑定解绑方法
标准浏览器
removeEventListener(“事件类型”,事件处理函数)；
【注意】 如果你想要解绑事件，那么你在绑定事件时，一定要将函数单独定义。使用函数名的方式去绑定事件。(匿名函数是没办法解绑的)
IE低版本
detachEvent(“on+事件类型”,事件处理函数);
<script>
window.onload = function(){
var box=document.querySelector("#box");
function show() {
alert("您已成功充值1000万！");
}
box.addEventListener("click",show);事件监听方式绑定
box.removeEventListener("click",show); 解绑，一次都不执行
}
</script>
</head>
<body>
<div id="box"></div>
</body>
为事件绑定做兼容
window.onload = function(){
/**
ele 事件源
type 事件类型
handler 事件处理函数
*/
function on(ele,type,handler) {
// 标准浏览器
if (ele.addEventListener) {
ele.addEventListener(type,handler);//下面调用时加引号了,所以这里没加
}else{
// IE浏览器
ele.attachEvent("on"+type,handler);
}
}
function show(){
alert("您已成功充值1000万！");
}
var box = document.getElementById("box");
on(box,"click",show);//调用传参
}
</script>
</head>
<body>
<div id="box"> </div>
</body>
获取下拉框的值练习
<body>
城市:
<select id="unform">
<option value="-1">请选择</option>
<option value="beijing">北京</option>
<option value="-1">上海</option>
<option>深圳</option>
</select>
<button id="sub">获取城市名</button>
</body>
<script>
var unform = document.getElementById("unform"); //1~下拉框
var sub = document.getElementById("sub"); //获取按钮
sub.onclick = function() {
//2~获取下拉框的所有下拉选项 必须是这个单词options
var selections = unform.options;
//console.log(selections);输出所有的下拉框option
//3~获取下拉框被选中项的索引 必须是这个单词selectedIndex
var index = unform.selectedIndex;
//console.log(index); //输出比如北京是1
/*-------演示和解这道题无关 var val = unform[index];
console.log(val); 当我获取北京时 <option value="beijing">北京</option> */
//4~获取被选中项的值(注意:当通过option获取选中项的value属性值时,当有value属性时输出value值,当没有value属性时输出option的文本)
var val = selections[index].value;
// console.log(val);
//5~获取被选中项的文本(上海/深圳直接是文本)
var txt = selections[index].text;
console.log(txt);
//设置下拉选项默认被选中演示这里用不到
//selections[2].selected = true;
}
/* //可以发现第二步可以不用要 //2~获取下拉框的所有下拉选项 必须是这个单词options
var selections = unform.options;
用这个也可以 var val = unform[index].value;
var txt = unform[index].text;*/
</script>