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粗体文本文本2outerHTML
除了包含innerHTML的全部内容外, 还包含对象标签本身。
文本1粗体文本文本2innerText
文本1粗体文本文本2
【注】只会获取该节点中 ，子节点的文本 纯文本，不包括子标签nodeValue
元素节点 返回：null
文本节点 返回：文本的内容 window.onload = function(){
var oDiv = document.getElementById("div1");
// alert(oDiv.innerHTML);
// oDiv.innerHTML = "h1
";
// alert(oDiv.outerHTML);
// alert(oDiv.innerText);
// oDiv.innerText = "h1
";
var nodes = oDiv.childNodes;
alert(nodes[0].nodeValue); //文本节点
nodes[0].nodeValue = "h1
"
// alert(nodes[1].nodeValue); //元素节点
}
文本1粗体文本文本2
4、认知事件
div
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事件
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、坐标的实时显示
Document
0, 0
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、跟随鼠标的提示框
Document
12、事件对象
//传参
function add(num1, num2){
alert(num1 + num2);
}
add(10, 20);
window.onload = function(){
//事件绑定完成
document.onclick = function(event){
alert(event);
}
}13、点击按钮输入按钮对应下标
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
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、事件流_冒泡
阻止事件冒泡的方法：
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();
}
}