11、事件（上）
1、获取外联样式
window.onload = function(){
// 获取div的css样式
var oDiv = document.getElementById("div1");
// alert(oDiv.style); //object CSS2Properties
/*alert(oDiv.style.width);
alert(oDiv.style.backgroundColor);*/
/*alert(oDiv.style.color);
alert(oDiv.style.height);*/
如果你想获取当前标签外联样式，通过具体的函数获取。
// alert(oDiv.currentStyle["color"]); //IE
// alert(getComputedStyle(oDiv)["color"]); //火狐和谷歌支持的
浏览器兼容写法
/*
获取的是当前有效样式
*/
alert(getStyle(oDiv, "height"));
}
//获取当前样式
function getStyle(node, styleName){
if(node.currentStyle){
//IE
return node.currentStyle[styleName];//返回属性值
}else{
return getComputedStyle(node)[styleName];//返回属性值
}
}
2、document.querySelector
node.querySelector(参数);
参数：字符串，选择器样式的字符串 #id .class
返回值：只返回符合要求的++第一个节点++。
document.querySelectorAll(参数);
返回值：++肯定是数组++，数组里面装着++++所有符合条件的元素++++，就算选择是id。
上述这两个方法，可以传参数，和你能写的css选择器的数量一致。
window.onload = function(){
// var node = document.querySelector("#div1");
// var node = document.querySelector("li");
// var nodes = document.querySelectorAll("li");
// var nodes = document.querySelectorAll("#div1");
// var nodes = document.querySelectorAll(".box");
var nodes = document.querySelectorAll("ul li");
alert(nodes.length);
for(var i = 0; i < nodes.length; i++){
nodes[i].style.backgroundColor = "red";
}
}
3、++innerHTML。outerHTML。innerText。nodeValue++
innerHTML
获取标签间的内容，包括子标签。
文本1<strong>粗体文本</strong>文本2
outerHTML
除了包含innerHTML的全部内容外, 还包含对象标签本身。
<div id="div1">文本1<strong>粗体文本</strong>文本2</div>
innerText
文本1粗体文本文本2
【注】只会获取该节点中 ，子节点的文本 纯文本，不包括子标签
nodeValue
元素节点 返回：null
文本节点 返回：文本的内容
window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.innerHTML);
// oDiv.innerHTML = "<h1>h1</h1>";
// alert(oDiv.outerHTML);
// alert(oDiv.innerText);
// oDiv.innerText = "<h1>h1</h1>";
var nodes = oDiv.childNodes;
alert(nodes[0].nodeValue); //文本节点
nodes[0].nodeValue = "<h1>h1</h1>"
// alert(nodes[1].nodeValue); //元素节点
}
<body>
<div id = "div1">文本1<strong>粗体文本</strong>文本2</div>
</body>
4、认知事件
<style>
#div1{
width: 100px;
height: 100px;
background-color: blue;
color: white
}
</style>
<script>
事件：
1、事件发生了
2、针对事件，进行对应的操作
在JS中有哪些事件？
1、鼠标事件
click 单击事件
onclick 处理事件的函数。
dblclick 双击 两次单击不能间隔太长
mouseover 移入
mouseout 移出
mousemove 在某一个标签上移动，会触发
mousedown 按下鼠标
mouseup 抬起鼠标
事件绑定格式：
元素节点.on事件类型 = 函数
2、键盘事件
3、HTML事件
1、事件
2、事件处理的操作
【注】应该如何链接起来。
【注】事件绑定 = 事件 + 事件发生处理函数
1、内联模式
2、外联模式/脚本模式
window.onload = function(){
// 外联模式
/*
html
css
【注】分模块，分文件的格式要求，一般写成外联的模式。
*/
var oDiv = document.getElementById('div1');
/*oDiv.onclick = function(){
alert("单击");
}*/
/*document.onclick = function(){
alert("触发");
}*/
/*oDiv.ondblclick = function(){
alert("双击");
}*/
/*oDiv.onmouseover = function(){
oDiv.style.backgroundColor = "red";
}
oDiv.onmouseout = function(){
oDiv.style.backgroundColor = "yellow";
}*/
//移动就执行
/*var i = 0;
oDiv.onmousemove = function(){
oDiv.innerHTML = i++;
}*/
oDiv.onmousedown = function(){
oDiv.innerHTML = "按下";
}
oDiv.onmouseup = function(){
oDiv.innerHTML = "抬起";
}
}
</script>
</head>
<body>
<!-- 内联 onclick = "要去执行js语句"; -->
<!-- <div id = "div1" onclick = "btnClick();"></div> -->
<div id = "div1">div</div>
</body>
5、键盘事件
keydown 按下键 按下任何键
如果长按，会重复触发
keyup 抬起键
keypress 按下键 按下字符键有效，功能不触发
如果长按，会重复触发
事件绑定：
1、输入，input textare
2、window 全局
window.onload = function(){
var i = 0;
/*window.onkeydown = function(){
// document.title = "按下";
document.title = i++;
}
window.onkeyup = function(){
document.title = "抬起";
}*/
window.onkeypress = function(){
// document.title = "按下";
document.title = i++;
}
window.onkeyup = function(){
document.title = "抬起";
}
}
6、HTML事件
<script>
HTML事件
1、window事件
load 页面加载完成以后触发
unload 页面解构的时候触发， IE兼容
点击刷新，上一页面会解构
window.onunload = function(){}
scroll 页面滚动，会触发
resize 页面大小发生变化会触发。
2、表单事件 form input textarea
blur 失去焦点
focus 获取焦点
change 文本发生改变，并失去焦点的时候触发
select 当文本被选中的时候触发
【注】表单事件，必须添加在form表单才能生效
window.onload = function(){
// var i = 0;
/*window.onscroll = function(){
//页面滚动
document.title = i++;
}*/
/*window.onresize = function(){
document.title = i++;
}*/
var oInput = document.getElementById("input1");
/*oInput.onblur = function(){
oInput.value = "失去焦点";
}
oInput.onfocus = function(){
oInput.value = "获取焦点";
}*/
/*oInput.onchange = function(){
alert("改变了");
}*/
/*oInput.onselect = function(){
alert("被选中了");
}*/
var oForm = document.getElementById("form");
oForm.onsubmit = function(){
alert("当点击submit按钮触发")
}
oForm.onreset = function(){
alert("当点击reset按钮触发")
}
}
</script>
</head>
<body style = "height: 3000px">
</body>
<input type="text" value = "文本" id = "input1" />
<form action="#" id = "form">
<input type="submit" />
<input type="reset" />
</form>
7、事件对象
事件绑定：
元素节点/目标对象.on事件类型 = 函数
1、目标对象
2、on + 事件类型
3、触发事件，要去执行的函数
系统：当你把事件绑定绑定成功以后，会将上述三者融城一个对象，这个对象，叫做事件对象。
获取事件对象：由系统，去调用事件处理函数的时候，当做第一个参数传入。
document.onclick = function(event){
// alert(123);
// alert(arguments.length);
// alert(arguments[0]); //object MouseEvent
//访问事件对象
// alert(event);
/*
IE8以下不能，直接通过形参获取对象。
window.event
*/
/*
通过或运算的短路操作，进行浏览器兼容
*/
var e = event || window.event;
alert(e);
}
短路操作：
var res = 10 < 3 || alert(a);
alert(res);
8、事件对象属性
window.onload = function(){
button属性(IE对于button的兼容也有问题)
鼠标事件对象属性：
0 左键
1 滚轮
2 右键
clientX clientY
【注】原点位置，可视区域html标签的左上角，可视区域页面的左上角。
【注】不包含滚动出去的页面
pageX pageY
【注】包含滚动出去的页面，原点位置，html标签的左上角，页面的左上角。
screenX screenY
【注】原点位置，你电脑屏幕的左上角
document.onclick = function(event){
var e = event || window.event;
// alert(e.button);
alert(e.clientX + ", " + e.clientY);
// alert(e.screenX + ", " + e.screenY);
alert(e.pageX + ", " + e.pageY);
}
}
9、坐标的实时显示
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 50px auto;
position: relative;
}
#span1{
position: absolute;
bottom: 10px;
left: 10px
}
</style>
<script src = "js/tool.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
var oSpan = document.getElementById("span1");
//获取div1的left top
// alert(getStyle(oDiv, "top"));
oDiv.onmousemove = function(event){
var e = event || window.event;
var X = e.clientX - oDiv.offsetLeft;
var Y = e.clientY - oDiv.offsetTop;
//实时的更新鼠标的坐标
oSpan.innerHTML = X + ", " + Y;
}
}
</script>
</head>
<body>
<div id = "div1">
<span id = "span1">0, 0</span>
</div>
</body>
10、offset系列
offsetLeft,offsetTop可以理解为里面盒子到外面盒子(有position的父元素，如果没有往上找)边框的距离
offsetWidth,offsetHeight是元素的宽和高
window.onload = function(){
var oDiv = document.getElementById("div1");
/*
直接获取当前元素节点的样式
offsetLeft
offsetTop
offsetWidth
offsetHeight
*/
// alert(oDiv.offsetLeft);//获取节点oDiv左侧距离；
// alert(oDiv.offsetTop);//获取节点oDiv上侧距离；
// alert(typeof getStyle(oDiv, "width"));
alert(typeof oDiv.offsetWidth);
}
11、跟随鼠标的提示框
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
font-size: 30px;
margin: 30px;
display: inline-block;
}
#desc{
width: 600px;
height: 150px;
background-color: gray;
border: 1px solid black;
position: absolute;
display: none;
color: white;
font-size: 15px
}
</style>
<script>
var arr = ["孙悟空，本名卡卡罗特，日本漫画及改编动画《龙珠》系列的主角，是来自贝吉塔行星的赛亚人。小时候以“下级战士”的身份被送到地球。被武道家孙悟饭收养并取名为“孙悟空”。小时候失控变成大猩猩踩死悟饭后独自生活在深山。有一天结识少女...", "出生地：第7宇宙-贝吉塔行星简介：贝吉塔，日本动漫《龙珠》系列中的主要角色之一。是战斗民族赛亚人的王子，拥有极高的自尊心。过去贝吉塔行星被弗利萨破坏后（不知情，一直以为是被陨石撞击而毁灭。）以前在弗利萨军团那儿做事。初登场时是个侵略地球的反派角色，后被孙悟..", "小丸子是一名小学二年级的女生,她活泼,好动,懒惰,什么事情都拖到最后一刻才做,学习不认真,成绩平平,经常和姐姐斗气,爱幻想,做事没恒心……在小丸子...", "小学生木之本樱(丹下樱 配音)是一个平凡的女孩,有一个温柔的爸爸木之本藤隆(田中秀幸 配音)和一个体贴的好友大道寺知世(岩男润子 配音)。一天,在父"];
window.onload = function(){
var nodes = document.getElementsByTagName("a");
var oDesc = document.getElementById("desc");
for(var i = 0; i < nodes.length; i++){
//给每一个a标签添加下标
nodes[i].index = i;
nodes[i].onmouseover = function(event){
//1、让div显示 2、让div位置挪动到鼠标移入的位置
var e = event || window.event;
oDesc.style.display = "block";
oDesc.innerHTML = arr[this.index];
oDesc.style.left = e.clientX + 5 + "px";
oDesc.style.top = e.clientY + 5 + "px";
}
nodes[i].onmousemove = function(event){
var e = event || window.event;
oDesc.style.left = e.clientX + 5 + "px";
oDesc.style.top = e.clientY + 5 + "px";
}
nodes[i].onmouseout = function(){
//让div隐藏
oDesc.style.display = "none";
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="#">孙悟空</a>
</li>
<li>
<a href="#">贝吉塔</a>
</li>
<li>
<a href="#">樱桃小丸子</a>
</li>
<li>
<a href="#">百变小樱</a>
</li>
</ul>
<div id = "desc"></div>
</body>
12、事件对象
//传参
function add(num1, num2){
alert(num1 + num2);
}
add(10, 20);
window.onload = function(){
//事件绑定完成
document.onclick = function(event){
alert(event);
}
}
13、点击按钮输入按钮对应下标
<script>
window.onload = function(){
var aBtns = document.getElementsByTagName("button");
/*
【注】这个for循环只是绑定事件。有几个button，就有几个onclick函数。
*/
for(var i = 0; i < aBtns.length; i++){
aBtns[i].index = i;
//绑定事件
aBtns[i].onclick = function(){
alert(this.index);
}
}
}
</script>
</head>
<body>
<button>111</button>
<!-- index = 0 onclick -->
<button>222</button>
<!-- index = 1 onclick-->
<button>333</button>
<!-- index = 2 onclick-->
</body>
14、this变量
【注】每一个函数，都有一个内置的变量叫做this。
【注】this永远存储着，当前这个函数主人的地址。
【注】仔细当前函数的主人是谁。看该函数调用的时候，前面是谁。
如果当前函数，没有主人，统一this代表window对象。
/*function show(){
alert(this);
}*/
// show(); //object Window
/*var xiaoming = {
name: "小明",
age: 40,
show: function(){
// alert(this);
// alert(xiaoming.name);
alert(this.name);
}
}
xiaoming.show();*/
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onclick = function(){
alert(this.tagName);
}
}
15、事件对象属性_修改键
都是事件对象的属性：
功能：有没有按下对应的键。
【注】在任何的事件对象里都能，访问这四个属性。
e.ctrlKey
如果你按下了ctrl键，值为true，否则为false
e.shiftKey
如果你按下了shift键，值为true，否则为false
e.altKey
如果你按下了alt键，值为true，否则为false
e.metaKey 如果你按下了 windows/command 键，值为true，否则为false
【注】主要用于实现组合键。
window.onload = function(){
document.onclick = function(event){
var e = event || window.event;
/*if(e.shiftKey == true){
alert("点击 + shift")
}else{
alert("点击")
}*/
alert(getArr(e));
}
}
function getArr(event){
var arr = [];
if(event.shiftKey){
arr.push("shift");
}
if(event.ctrlKey){
arr.push("ctrl");
}
if(event.altKey){
arr.push("alt");
}
if(event.metaKey){
arr.push("windows");
}
return arr;
}
16、键盘事件对象属性
keydown
keyup
keypress 只有字符键支持
window.onload = function(){
/*window.onkeydown = function(event){
var e = event || window.event;*/
// alert(e); //object KeyboardEvent]
/*
属性：
键码： keyCode
注意： 只有才keydown和keyup下才有
功能： 输出对应按下的键的ASCII码值，无论你按下的字符是大写还是小写，统一返回大写字母的ASCII码值。
【注】有一部分键是和ASCII值不符合的。
【注】不支持charCode
*/
/*alert(e.keyCode);
}*/
/*
keypress
字符码：charCode
特点：1、只支持字符键 2、区分大小写
【注】不支持keyCode
*/
window.onkeypress = function(event){
var e = event || window.event;
// alert(e.charCode);
/*var str = String.fromCharCode(e.charCode)
alert(str);*/
}
}
17、小游戏
上下左右 上下左右走
如果按下shift+上下左右键 快快的走 10倍速度。
左上右下 37 38 39 40
<style>
#xiaoming{
width: 100px;
height: 100px;
position: absolute;
}
#xiaoming img{
width: 100px;
height: 100px
}
</style>
<script>
window.onload = function(){
var xiaoming = document.getElementById("xiaoming");
window.onkeydown = function(event){
var e = event || window.event;
// alert(e.keyCode);
var speed = 5;
//判断是否按下了shiftkey
if(e.shiftKey){
speed *= 10;
}
switch(e.keyCode){
case 37: //左
xiaoming.style.left = xiaoming.offsetLeft - speed + "px";
break;
case 38:
xiaoming.style.top = xiaoming.offsetTop - speed + "px";
break;
case 39: //右
xiaoming.style.left = xiaoming.offsetLeft + speed + "px";
break;
case 40:
xiaoming.style.top = xiaoming.offsetTop + speed + "px";
break;
default:
break;
}
}
}
</script>
</head>
<body>
<div id = "xiaoming">
<img src="http://2t.5068.com/uploads/allimg/170616/1-1F616101S6-50.gif" alt="">
</div>
18、目标对象
window.onload = function(){
var oDiv = document.getElementById("div1");
事件绑定
目标对象.on+事件类型 = 函数;
oDiv.onclick = function(event){
var e = event || window.event;
/*
e.target 获取触发该事件的对象
IE8 以下不兼容
window.event.srcElement
*/
alert(e.target.nodeName);
var target = e.target || e.srcElement;
alert(target.nodeName);
}
}
19、事件流_冒泡
<style>
div{
padding: 50px;
}
#div1{
background-color: red
}
#div2{
background-color: blue;
}
#div3{
background-color: yellow
}
</style>
<script>
事件流：
事件的冒泡：html页面天生的特点，如果多个标签重叠，并且拥有同一个事件，那么如果你点了里面的一个标签，这个事件会向外传递，逐一触发。由里层向外层执行。
事件捕获：和事件冒泡正好相反，由外层向里层执行。
window.onload = function(){
var nodes = document.getElementsByTagName("div");
for(var i = 0; i < nodes.length; i++){
nodes[i].onclick = function(){
alert(this.id);
}
}
}
</script>
</head>
<body>
<div id = "div1">
<div id = "div2">
<div id = "div3"></div>
</div>
</div>
</body>
阻止事件冒泡的方法：
1、事件对象.cancelBubble = true; //IE
2、事件对象.stopPropagation(); //IE不兼容
window.onload = function(){
var nodes = document.getElementsByTagName("div");
for(var i = 0; i < nodes.length; i++){
nodes[i].onclick = function(event){
var e = event || window.event;
alert(this.id);
// e.cancelBubble = true;
// e.stopPropagation();
stopBubble(e);
}
}
}
阻止事件冒泡
function stopBubble(event){
if(event.cancelBubble){
event.cancelBubble = true;
}else{
event.stopPropagation();
}
}
