目录
JavaScript_CSS操作
HTML 元素的 style 属性
操作 CSS 样式最简单的方法，就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性
div.setAttribute(
'style',
'background-color:red;' + 'border:1px solid black;'
);元素节点的style属性
var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';cssText属性
var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: red;'
+ 'border: 1px solid black;'
+ 'height: 100px;'
+ 'width: 100px;';<!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>
.active{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div id="root">hello</div>
<script>
var root = document.getElementById("root");
// root.setAttribute("style","color:green;width:300px;height:50px;background:red;")
// root.style.color="red";
// root.style.width="300px";
// root.style.border="1px solid red";
// root.style.backgroundColor="green";
// root.style.fontSize="20px";//HTML:font-size 和 JS:fontSize
// root.style.cssText="color:red;border:1px solid red;width:300px";
// root.setAttribute("class","active");
root.classList.add("active");
</script>
</body>
</html>JavaScript_事件处理程序
事件处理程序分为：
- HTML事件处理
- DOM0级事件处理
- DOM2级事件处理
- IE事件处理
HTML事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Js事件详解--事件处理</title>
</head>
<body>
HTML 和 js 不分离
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script>
function demo(){
alert("hello html事件处理");
}
//移除事件
function demo(){
}
</script>
</body>
</html> DOM0级事件处理
<body>
HTML 和 JS 分离了
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉
btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");}
//移除事件
btn1.onclick=null;
</script>
</body>DOM2级事件处理
<body>
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",demo1);
btn1.addEventListener("click",demo2);
btn1.addEventListener("click", function(){
alert("DOM2级事件处理程序2")//移除不了 和下面那个不是一个东西
});
btn1.addEventListener("click",demo3);
function demo1(){
alert("DOM2级事件处理程序1")
}
function demo2(){
alert("DOM2级事件处理程序2")
}
function demo3(){
alert("DOM2级事件处理程序3")
}
btn1.removeEventListener("click",demo2);
btn1.removeEventListener("click",function(){
alert("DOM2级事件处理程序2")//移除不了，必须单独写
});
</script>
</body>IE事件处理程序
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()
JavaScript_事件类型之鼠标事件
常见事件类型
- 鼠标事件
- 键盘事件
- 表单事件
- 窗口事件
- 焦点/剪贴板事件
- 网页状态事件
- Touch事件
鼠标事件
鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些
- click：按下鼠标时触发
- dblclick：在同一个元素上双击鼠标时触发
- mousedown：按下鼠标键时触发
- mouseup：释放按下的鼠标键时触发
- mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
- mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
- mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
- mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
- mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
- wheel：滚动鼠标的滚轮时触发
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
console.log("click事件");
}事件注意事项
- 这些方法在使用的时候，除了DOM2级事件，都需要添加前缀
on- click事件指的是，用户在同一个位置先完成mousedown动作，再完成mouseup动作。因此，触发顺序是，mousedown首先触发，mouseup接着触发，click最后触发。
- dblclick事件则会在mousedown、mouseup、click之后触发。
- mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。
JavaScript_事件流
事件流描述的是从页面中接受事件的顺序，但有意思的是，微软（IE）和网景（Netscape）开发团队居然提出了两个截然相反的事件流概念，IE的事件流是事件冒泡流(event bubbling)，而Netscape的事件流是事件捕获流(event capturing)
事件冒泡
IE提出的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onclick="bodyClick()">
<div onclick="divClick()">
<button onclick="btn()">
<p onclick="p()">点击冒泡</p>
</button>
</div>
<script>
function p(){
console.log('p标签被点击')
}
function btn(){
console.log("button被点击")
}
function divClick(event){
console.log('div被点击');
}
function bodyClick(){
console.log('body被点击')
}
</script>
</body>
</html>事件捕获
事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<button>
<p>点击捕获</p>
</button>
</div>
<script>
var oP=document.querySelector('p');
var oB=document.querySelector('button');
var oD=document.querySelector('div');
var oBody=document.querySelector('body');
oP.addEventListener('click',function(){
console.log('p标签被点击')
},true);
oB.addEventListener('click',function(){
console.log("button被点击")
},true);
oD.addEventListener('click', function(){
console.log('div被点击')
},true);
oBody.addEventListener('click',function(){
console.log('body被点击')
},true);
</script>
</body>
</html>
事件捕获：(只能采用DOM2级事件处理程序)
DOM2级别事件addEventListener("type",callback,boolean)
boolean:
true:事件捕获
false:默认值是false,代表事件冒泡JavaScript_Event事件对象
Event对象属性
- Event.currentTarget(指向事件监听者，即谁添加的事件指向谁)
- Event.Target（事件真正的触发者即谁触发的事件指向谁）
- Event.type
Event.currentTarget
Event.currentTarget属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点
btn.onclick = function(e){
console.log(e.currentTarget);
}Event.target
Event.target属性返回原始触发事件的那个节点，即事件最初发生的节点。事件传播过程中，不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的，前者总是不变的，后者则是指向监听函数所在的那个节点对象
// HTML代码为
// <p id="para">Hello <em>World</em></p>
para = document.getElementById("para")
function hide(e) {
console.log(this === e.currentTarget); // 总是 true
console.log(this === e.target); // 有可能不是 true
e.target.style.visibility = 'hidden';
}
para.addEventListener('click', hide, false);Event.type
Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读
Event对象方法
- Event.preventDefault()
- Event.stopPropagation()
Event.preventDefault
Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了
btn.onclick = function(e){
e.preventDefault(); // 阻止默认事件
console.log("点击A标签");
}Event.stopPropagation()
stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数
btn.onclick = function(e){
e.stopPropagation(); // 阻止事件冒泡
console.log("btn");
}事件类型之键盘事件
键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件
- keydown：按下键盘时触发。
- keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
- keyup：松开键盘时触发该事件
//HTML <input type="text" id="username">
var username = document.getElementById("username");
username.onkeypress = function(e){
console.log("keypress事件");
}event对象
keyCode:唯一标识
//HTML <input type="text" id="username">
var username = document.getElementById("username");
username.onkeydown = function(e){
if(e.keyCode === 13){
console.log("回车");
}
}JavaScript_事件类型之表单事件
表单事件是在使用表单元素及输入框元素可以监听的一系列事件
- input事件
- select事件
- Change事件
- reset事件
- submit事件
input事件
input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件
input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。
var username = document.getElementById("username");
username.oninput = function(e){
console.log(e.target.value);
}select事件
select事件当在<input>、<textarea>里面选中文本时触发
// HTML 代码如下
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
console.log(e.type); // "select"
}, false);Change 事件
Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发(前提条件是内容必须得到修改，无论是失去焦点还是回车都会触发，但是如果内容不修改，无论是失去焦点还是回车都不会触发)
var email = document.getElementById("email");
email.onchange = function(e){
console.log(e.target.value);
}reset 事件，submit 事件
这两个事件发生在表单对象<form>上，而不是发生在表单的成员上。
reset事件当表单重置（所有表单成员变回默认值）时触发。
submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮
<form id="myForm" onsubmit="submitHandle">
<button onclick="resetHandle">重置数据</button>
<button>提交</button>
</form>
var myForm = document.getElementById("myForm")
function resetHandle(){
myForm.reset();
}
function submitHandle(){
console.log("提交");
}JavaScript_事件类型之窗口事件
- scroll 事件
- resize 事件
scroll事件在文档或文档元素滚动时触发，主要出现在用户拖动滚动条
window.onscroll = function(e){
var srcrollHeight = document.documentElement.scrollTop;
console.log(srcrollHeight);
}resize事件在改变浏览器窗口大小时触发
window.onresize = function(){
console.log("窗口发生变化");
}JavaScript_事件类型之焦点_剪切板事件
焦点事件
焦点事件发生在元素节点和document对象上面，与获得或失去焦点相关。主要包括以下四个事件
- focus：元素节点获得焦点后触发，该事件不会冒泡。
- blur：元素节点失去焦点后触发，该事件不会冒泡。
- focusin：元素节点将要获得焦点时触发，发生在focus事件之前。该事件会冒泡。
- focusout：元素节点将要失去焦点时触发，发生在blur事件之前。该事件会冒泡。
var username = document.getElementById("username");
username.onfocus = function(e){
console.log("获得焦点",e.target.value);
}
username.onblur = function(e){
console.log("失去焦点",e.target.value);
}
//特殊点：focus() 和 blur() 方法
username.focus();//进来就获得焦点
username.blur();剪贴板事件
以下三个事件属于剪贴板操作的相关事件
- cut：将选中的内容从文档中移除，加入剪贴板时触发。
- copy：进行复制动作时触发。
- paste：剪贴板内容粘贴到文档后触发。
var password = document.getElementById("password");
password.oncut = function(e){
console.log("剪切");
}
password.oncopy = function(e){
console.log("复制");
}
var email = document.getElementById("email");
email.onpaste = function(){
console.log("粘贴");
}JavaScript_网页状态事件
- load
- DOMContentLoaded 事件
- readystatechange 事件
Load事件
资源加载完成之后触发，包含DOM和图片等资源都加载完成后，才会触发load
var image = new Image();
image.src = "http://iwenwiki.com/banner1.png"
image.onload = function(){
console.log("图片的资源加载完成了");
document.body.appendChild(image);
}DOMContentLoaded 事件
网页下载并解析完成以后，浏览器就会在document对象上触发 DOMContentLoaded 事件。这时，仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件，发生时间早得多
document.addEventListener('DOMContentLoaded', function (event) {
console.log('DOM生成');
});JavaScript_Touch事件
触摸引发的事件，有以下几种。可以通过TouchEvent.type属性，查看到底发生的是哪一种事件
- touchstart：用户开始触摸时触发，它的target属性返回发生触摸的元素节点
- touchend：用户不再接触触摸屏时触发
- touchmove：用户移动触摸点时触发
- touchcancel：系统取消touch事件的时候触发（使用率低）
var box = document.getElementById("box");
box.addEventListener("touchend",function(){
console.log("抬起来了");
})
box.addEventListener("touchstart",function(e){
console.log("触摸屏幕",e);
})
box.addEventListener("touchmove",function(){
console.log("移动");
})温馨提示
上述所有事件，都必须用DOM2级事件处理
JavaScript_事件代理(事件委托)
由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）
var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
