目录
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;';事件处理程序
事件处理程序分为：
1 、HTML事件处理
2、 DOM0级事件处理
3 、DOM2级事件处理
4、 IE事件处理
HTML事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Js事件详解--事件处理</title>
</head>
<body>
<div id="div">
<button id="btn1" onclick="demo()">按钮</button>
</div>
<script>
function demo(){
alert("hello html事件处理");
}
</script>
</body>
</html>DOM0级事件处理
<body>
<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");}
</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",demo3);
function demo1(){
alert("DOM2级事件处理程序1")
}
function demo2(){
alert("DOM2级事件处理程序2")
}
function demo3(){
alert("DOM2级事件处理程序3")
}
btn1.removeEventListener("click",demo2);
</script>
</body>IE事件处理程序
IE实现了与DOM中类似的两个方法： attachEvent() 和 detachEvent()
事件类型之鼠标事件
常见事件类型
1 鼠标事件
2 键盘事件
3 表单事件
4 窗口事件
5 焦点/剪贴板事件
6 网页状态事件
7 Touch事件
鼠标事件
鼠标事件指与鼠标相关的事件，具体的事件主要有以下一些
1 click：按下鼠标时触发
2 dblclick：在同一个元素上双击鼠标时触发
3 mousedown：按下鼠标键时触发
4 mouseup：释放按下的鼠标键时触发
5 mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
6 mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
7 mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件
8 mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
9 mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
10 wheel：滚动鼠标的滚轮时触发
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
console.log("click事件");
}温馨提示
这些方法在使用的时候，除了DOM2级事件，都需要添加前缀 on
事件流
事件流描述的是从页面中接受事件的顺序，但有意思的是，微软 （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>Event事件对象
事件发生以后，会产生一个事件对象，作为参数传给监听函数。
Event对象属性
1 Event.currentTarget
2 Event.Target
3 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>
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对象方法
1、 Event.preventDefault()
2 、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三个事件
1 、keydown：按下键盘时触发。
2、keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触 发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
3 、keyup：松开键盘时触发该事件
username.onkeypress = function(e){
console.log("keypress事件");
}event对象
keyCode:唯一标识
var username = document.getElementById("username");
username.onkeydown = function(e){
if(e.keyCode === 13){
console.log("回车");
}
}
事件类型之表单事件
表单事件是在使用表单元素及输入框元素可以监听的一系列事件
1 input事件
2 select事件
3 Change事件
4 reset事件
5 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 事件
这两个事件发生在表单对象上，而不是发生在表单的成员 上。 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("提交");
}